Skip to main content
Introducing packages.sweber.dev
Derivative overview

DerivativeLive demo.

Everything on this page runs the real @sweberdev/derivative build in your browser: the widget in the made-up app below, and the parsers in the playground further down.

Nothing you paste is sent anywhere. The widget remembers what you have seen in this browser's local storage only.

Read the docs

Widget

What's new, in your appClick the button.

Muster Ledger is a made-up bookkeeping app. The button in its header is <derivative-widget>, fed by the changelog.json built below. The badge counts releases you have not seen yet; opening the panel marks them as read.

Muster LedgerLoading the widget

Your app goes here. The widget is one element and about 6 kB gzipped, with no requests other than the feed itself.

Forgets what you have seen, like a first visit.

Build

From changelog to feedOne command.

derivative build reads the CHANGELOG.md that Changesets already writes, adds the highlights from the config and writes a static changelog.json next to your app. Hashes, thank-you notes and dependency updates are left out.

CHANGELOG.md

# @muster/ledger

## 3.2.0

### Minor Changes

- 8c1f2ab: Dark mode for the whole app. It follows your system setting, or pick it under **Settings → Appearance**.
- [#214](https://git.example/muster/ledger/pull/214) [`4be91d0`](https://git.example/muster/ledger/commit/4be91d0) Thanks [@mira](https://git.example/mira)! - Export the journal as `CSV` for your accountant

### Patch Changes

- 1d7e3c9: Swiss franc amounts are rounded to 5 centimes again on QR invoices.
- Updated dependencies [8c1f2ab]
  - @muster/ui@3.2.0

## 3.1.0

### Minor Changes

- 77a01e5: Recurring invoices: send the same invoice every month or quarter.

### Patch Changes

- c40d2b8: The receipt scanner reads dates written as `05.10.26`.

## 3.0.0

### Major Changes

- 0f3e9aa: Sign-in now requires a second factor for every account.

  Set it up under **Account → Security** before 1 November.

### Minor Changes

- e19b4c2: Invite your fiduciary with read-only access.

derivative.config.json

{
  "title": "Muster Ledger changelog",
  "link": "/changelog",
  "highlights": {
    "3.2.0": {
      "title": "Dark mode is here",
      "summary": "Muster Ledger now follows your system theme. Easier on the eyes for late-night bookkeeping."
    }
  },
  "out": { "json": "changelog.json" }
}

Build step

npx derivative build

derivative: 3 releases, 7 entries
  wrote public/changelog.json

public/changelog.json

{
  "version": 1,
  "releases": [
    {
      "id": "3.2.0",
      "entries": [
        {
          "type": "feature",
          "text": "Dark mode for the whole app. It follows your system setting, or pick it under **Settings → Appearance**."
        },
        {
          "type": "feature",
          "text": "Export the journal as `CSV` for your accountant",
          "link": "https://git.example/muster/ledger/pull/214"
        },
        {
          "type": "fix",
          "text": "Swiss franc amounts are rounded to 5 centimes again on QR invoices."
        }
      ],
      "version": "3.2.0",
      "title": "Dark mode is here",
      "summary": "Muster Ledger now follows your system theme. Easier on the eyes for late-night bookkeeping.",
      "date": "2026-10-01"
    },
    {
      "id": "3.1.0",
      "entries": [
        {
          "type": "feature",
          "text": "Recurring invoices: send the same invoice every month or quarter."
        },
        {
          "type": "fix",
          "text": "The receipt scanner reads dates written as `05.10.26`."
        }
      ],
      "version": "3.1.0",
      "date": "2026-09-12"
    },
    {
      "id": "3.0.0",
      "entries": [
        {
          "type": "breaking",
          "text": "Sign-in now requires a second factor for every account.",
          "details": "Set it up under **Account → Security** before 1 November."
        },
        {
          "type": "feature",
          "text": "Invite your fiduciary with read-only access."
        }
      ],
      "version": "3.0.0",
      "date": "2026-08-20"
    }
  ],
  "title": "Muster Ledger changelog",
  "link": "/changelog"
}

Embed

<derivative-widget src="/changelog.json"></derivative-widget>
<script type="module">
  import "@sweberdev/derivative/widget"
</script>

Playground

Try your own changelogPaste and watch.

Pick a format or paste your own. The same parsers as the CLI turn it into a feed, shown as JSON and in the inline mode of the widget.

Widget, inline mode

Loading the parsers

Next step

Add it to your appFree and MIT-licensed.

Install @sweberdev/derivative, add derivative build to your build script and drop the element into your header. React apps can use @sweberdev/derivative-react.

Getting started