Sprinkle - high power behaviors for HTML

See what Sprinkle can do

These are live, interactive components. Every one started as a native HTML element — then gained behavior through a single attribute. No JavaScript written, no build step.

Searchable Select — `combo-box`

A native <select> becomes a searchable combobox with option categories and multi-select pills.

<select name="framework" combo-box searchable>
    <option value="react" category="Frontend">React</option>
    <option value="vue" category="Frontend">Vue</option>
    <option value="laravel" category="Backend">Laravel</option>
    &hellip;
</select>

<select name="tags[]" multiple combo-box searchable>
    <option value="js" selected>JavaScript</option>
    <option value="css" selected>CSS</option>
    &hellip;
</select>

File Upload Zone — `drop-zone`

A <label> wrapping a file input becomes a drag-and-drop upload area with image preview and file removal.

Drop an image here or click to browse

<label drop-zone>
    <span>Drop an image here or click to browse</span>
    <input type="file" name="image" accept="image/*" multiple />
</label>

Dialogs & Drawers — `drawer` + `modal`

Slide-in drawers and centered modals using the native <dialog> element — no showModal() calls, just command-for attributes.

<dialog drawer="left" close-outside id="nav">
    &hellip; menu content &hellip;
</dialog>

<dialog modal close-outside id="confirm">
    &hellip; confirmation content &hellip;
</dialog>

<button command-for="nav" command="show-modal">Open</button>
<button command-for="confirm" command="show-modal">Confirm</button>

How it works

Sprinkle provides a set of HTML attributes that map directly to small pieces of behavior or styling. It focuses on adding UX polish — like tooltips, dropdowns, modals, and character counters — without requiring a heavy JavaScript framework, build steps, or external dependencies.

Every directive works gracefully, degrading to native elements if JavaScript is disabled. It is designed to progressively enhance your already-existing HTML.

Motivation

Modern web development often jumps straight to heavy UI component libraries or full JavaScript frameworks for simple interactive features. Sprinkle takes a different approach:

HTML-first: You write the markup and styles, we provide the enhancement layer.
CSS handles the rest: Everything that can be handled purely by CSS (avatars, breadcrumbs, modals, dropdown layouts) is handled by CSS.
Minimal footprint: Only ~47KB minified for both CSS and JS.
No build steps: Just include a <script defer> before your </body> and a <link> in your </head>.

This is not a UI component library, not a replacement for HTML, and not a polyfill. It relies on modern browser APIs like MutationObserver, IntersectionObserver, <dialog>, and CSS @starting-style.

Quick Start

To use Sprinkle, simply add the CSS and JS to your page:

<!-- In your <head> -->
<link rel="stylesheet" href="path/to/sprinkle.css">

<!-- Before your </body> -->
<script src="path/to/sprinkle.js" defer></script>

Once included, you can start using directives directly in your HTML:

<!-- A tooltip -->
<button tooltip="This cannot be undone">Delete</button>

<!-- A copy button -->
<button copy="#email">Copy Email</button>
<span id="email">hello@example.com</span>

<!-- An auto-growing textarea -->
<textarea autosize></textarea>

Check out the documentation to see all available directives, or browse the examples for real-world usage.

[] sprinkle