The Components 🧩

The @nonactivity.stream/elements package provides a set of pure Lit Web Components designed to render ActivityStreams 2.0 data.

<non-activity-stream>

This is the main event. It renders an ActivityStreams 2 (AS2) Collection or OrderedCollection as a scrollable feed.

Attributes & Properties

  • collection: An AS2 Collection object (with items or orderedItems). This is the data source for the stream.
  • streamId: (Optional) A string identifier used to namespace deterministic item IDs for deep linking.
  • sortable: (Boolean, Optional) Enables drag and drop reordering of items in the stream.
  • controller: (Optional) A controller object implementing the NonActivityStreamController interface (e.g. IndexedDBController) for handling persistence and reactive updates.

The Light DOM Approach

Unlike many Web Components that hide their children inside a Shadow DOM, <non-activity-stream> renders its children in the Light DOM.

Why? Because we believe in style flexibility and accessibility.

  • Style Flexibility: You can style the stream items directly from your application's global CSS. No need to fight with ::part selectors or CSS variables.
  • Accessibility: Better integration with screen readers and standard browser navigation.
  • Fragment Navigation: Standard browser anchor links and ID targeting work out of the box.

<non-activity-note>

This component renders a single ActivityStreams 2.0 Note object. It's used internally by <non-activity-stream>, but you can also use it standalone.

Attributes & Properties

  • note: An AS2 Note object.
  • controller: (Optional) A controller object for handling interactions (like, reply, boost).

Styling

Because the components render in the Light DOM, you can style them using standard CSS.

/* Style the stream container */
non-activity-stream {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* Style individual notes */
non-activity-note {
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Style the content inside a note */
non-activity-note .content {
  font-size: 1.1rem;
  line-height: 1.5;
}

If you prefer Tailwind CSS, we also provide a @nonactivity.stream/tailwind package with pre-styled variants of the core components.