Widget Gallery

Widgets published from this guide, each one a single compiled .js file — component, template and styles merged into one module. Download it, drop it into your widgets/ directory, and it works. No build step, no bundler config, no package to install.

Every entry below is a live instance rendered by the page you are reading, in whichever mode you are reading it: hydrated under /app/, server-rendered under /html/, plain text under /md/.

Clock

A wall clock that renders a complete timestamp on the server and starts ticking once the browser hydrates it.

  • hydration
  • timer
  • shadow dom
  • no params

Source & download → 1.6 kB

emkodev Logo

The emkodev mark as inline SVG, with every colour role exposed as an attribute and no JavaScript involved at any point.

  • svg
  • no javascript
  • params
  • theming

Source & download → 13.8 kB

Preact Counter

A counter whose interactive layer is a Preact component, mounted into server-rendered markup on hydrate.

  • hydration
  • third-party ui
  • dynamic import
  • params

Source & download → 2.3 kB

A widget joins the gallery when it gets a {name}.gallery.md beside it — that file carries the title, the tags, the demos and the prose. Widgets without one stay private to the site.