Docs

Feed Component

A drop-in Web Component that renders clean, paginated activity feeds anywhere in your product — account settings, team pages, admin views. Built with Angular Elements, framework-agnostic, ~45KB gzipped.

Load the script

index.htmlfeed.js · CDN

<script src="https://cdn.softechlog.com/feed@1.0/feed.js"></script>

Usage

Use your public key and scope the feed with attributes — per user, per resource, or both:

settings.htmlplain HTML

<!-- Show all events for the current user -->
<softechlog-feed
  public-key="stl_pk_xxxxxxxxxxxx"
  actor-id="user_123"
></softechlog-feed>

<!-- Show events for a specific resource -->
<softechlog-feed
  public-key="stl_pk_xxxxxxxxxxxx"
  target-type="workspace"
  target-id="ws_abc"
></softechlog-feed>

In Angular

settings.component.htmlAngular

<softechlog-feed
  [attr.public-key]="publicKey"
  [attr.actor-id]="currentUser.id"
></softechlog-feed>

In React

Settings.jsxReact

<softechlog-feed public-key={publicKey} actor-id={user.id} />

Attributes

Attribute	Type	Default	Description
`public-key`	string	required	Your project's public key
`actor-id`	string	—	Filter to a specific user
`target-type`	string	—	Filter by resource type
`target-id`	string	—	Filter by specific resource
`theme`	`light` · `dark` · `auto`	`auto`	Color scheme
`limit`	number	`25`	Events per page
`locale`	string	browser	Locale for timestamps

Theming with CSS custom properties

Match the feed to your product's design system without touching its internals:

styles.cssCSS custom properties

softechlog-feed {
  --stl-accent: #ee6c2f;        /* avatar gradient & interactive colour */
  --stl-bg: #ffffff;            /* card background */
  --stl-border: #e2e8f0;        /* border & divider colour */
  --stl-text: #0e1a2c;          /* primary text */
  --stl-muted: #94a3b8;         /* secondary / meta text */
  --stl-avatar-size: 32px;      /* avatar circle diameter */
  --stl-border-radius: 0.75rem; /* outer card corner radius */
}

The component ships with loading, empty, and error states built in — you don't need to handle them yourself.

← Auto-Capture Filtering →