Examples gallery

Playground Examples

Twenty self-contained HTML artifacts — explorations, code reviews, design systems, prototypes, diagrams, reports, and custom editors. Open any file directly in the browser; no server required.

01 Exploration

Three ways to implement debounced search

Side-by-side code approaches with tradeoffs annotated inline.

Open →
02 Exploration

Visual design directions rendered live

Multiple distinct UI directions for the same component, togglable in one page.

Open →
03 Code Review

Annotated pull request

Diff view with margin notes and severity tags on each changed block.

Open →
04 Code Review

Module map: package as boxes and arrows

Dependency graph with the hot path highlighted and clickable module details.

Open →
05 Design

Living design system

Tokens as swatches, copy-on-click for hex values, typography scale, spacing grid.

Open →
06 Design

Component variants

All sizes, states, and intents for a component family on one reference sheet.

Open →
07 Prototyping

Animation sandbox

Sliders for duration, delay, and easing; see the result on a live element instantly.

Open →
08 Prototyping

Clickable flow: four linked screens

Navigable prototype with transitions, back button, and state preserved across screens.

Open →
09 Decks

Arrow-key slide deck, no build step

Full-screen slides navigated with ← → keys; progress bar, speaker notes toggle.

Open →
10 Diagrams

SVG figure sheet

Diagrams for a blog post; tweak colors, labels, or layout then copy the SVG source.

Open →
11 Reports

Weekly status report

What shipped and what slipped this week, with a small inline velocity chart.

Open →
12 Reports

Incident timeline

Minute-by-minute event log, log excerpts, and a follow-up action checklist.

Open →
13 Diagrams

Annotated deploy pipeline flowchart

Click any pipeline step to expand its description and failure modes.

Open →
14 Research

Feature explainer

TL;DR upfront, collapsible steps, tabbed code snippets, and a FAQ accordion.

Open →
15 Research

Concept explainer with live interactive ring

Animated diagram, side-by-side comparison table, and a scannable glossary.

Open →
16 Exploration

Implementation plan

Milestones, data-flow diagram, wireframe mockups, and a risk/effort matrix in one doc.

Open →
17 Code Review

PR writeup: motivation and file-by-file tour

Context, design decisions, file walk-through, and guidance on where to focus review.

Open →
18 Editors

Ticket triage board

Drag items into Now / Next / Later / Cut columns, then copy the final ordering.

Open →
19 Editors

Feature flag editor

Toggle flags, see live dependency warnings, copy the diff of changes made.

Open →
20 Editors

Prompt tuner

Editable template on the left, live interpolated preview on the right, copy to clipboard.

Open →

No examples in this category.