Open Source · MIT · Pure CSS
demodeck
**A polished control panel for your demo.**
A dark, premium control-panel shell for open-source demos — segmented buttons, sliders, color fields, toggles, styled selects, popovers, a live console, and a copy code box. Pure CSS with a tiny behavior layer, zero dependencies.
How it works
1.
Drop in the shell
Link the stylesheet and script, add the `dd` class to your body, and you have the dark page, premium header, and two-column control-panel layout.
2.
Wire your controls
Copy the components you need from index.html — segmented buttons, sliders, color fields, toggles. The script auto-wires them and emits clean events like `dd:change` and `dd:color`.
3.
Show the result
Drop your library's live preview in the right column, log to the built-in console terminal, and let visitors play. Theme the whole thing by overriding a handful of `--dd-*` CSS variables.
What's inside
A full control kit
Segmented buttons, sliders, color fields with hex sync, toggles, styled selects, popovers, a live console terminal, and a copyable code box — all dark-themed out of the box.
Pure CSS, zero deps
All styling is plain CSS; the script only adds the interactive behaviors and auto-runs. No framework, no build step, nothing to install.
Auto-wired events
Controls fire tidy custom events (`dd:change`, `dd:color`) and the console has a one-call `log()` helper, so hooking up your demo is a few lines.
Themeable in one place
Override `--dd-accent`, `--dd-bg`, `--dd-radius` and friends in `:root` to reskin the whole panel. Pairs naturally with liquidframe for mobile/web UI previews.
Use it
Open the live demo, view source, and copy the pieces you want — it wires every component against a live preview card. MIT-licensed, so fork and reskin freely.