Widgets

Drop-in components for status boards, deadlines, paydays, holidays, and calendars. One script, standard web components, no dependencies. Pick one from the shelf, tune it in the viewer, take the code in your framework.

The viewer

Live against real data. Snippets track every change you make; the key slot fills itself once you mint one below.

Region

Form field name

Style

Theme

<script src="https://dierum.io/embed.js" defer></script>

<dierum-datepicker api-key="pk_your_publishable_key" region="DE" name="delivery_date"></dierum-datepicker>

Get a publishable key

Widgets run on a publishable key (pk_...): safe in client code, locked to the origins you list, read-only, metered against your normal quota. Your secret key mints it and stays server-side. Signed in? Your account page does this too.

Secret key (not stored)

Allowed origins, comma separated

No key yet? Signup takes thirty seconds. Rotating your secret key revokes its publishable keys with it.

Try one without a key

The sample widget is fixed (US, next holiday) and needs nothing:

<script src="https://dierum.io/embed.js" defer></script>
<dierum-demo></dierum-demo>

Options every widget shares

Attribute	Notes
`api-key`	your publishable key; required everywhere except `<dierum-demo>`
`region`	any code from /v1/regions: countries, subdivisions, markets
`theme`	widgets follow the page's color scheme; `light` or `dark` pins it
`variant`	designed styles: `minimal` (default), `modern`, `soft`, `terminal`, `glass`
`density`	`compact` shrinks padding and type for dense dashboards
CSS hooks	`--dierum-ink`, `--dierum-muted`, `--dierum-hair`, `--dierum-red`, `--dierum-shade`, and `--dierum-font` restyle widgets from your stylesheet to match your brand

Widgets read display endpoints only and store nothing. Free, Developer, and Starter widgets carry a small attribution link; Pro and above shed it. For anything beyond display, call the API directly.