Developer Docs Live Preview

About this style

Interactive documentation, where a code sample runs beside its output and the reader can edit it, has become the norm for component libraries, front-end frameworks and design systems. It grew out of online code playgrounds and the older habit of putting live examples next to reference text. Developers trust a library sooner when they can see that the sample on the page is real and that changing a prop does exactly what the docs say. In launch videos and docs promos, the format shows two things at once: how little code a feature takes and how quickly the result responds. Convincing versions use a believable component, a short sample and edits a developer would really make.

Make a 10-second developer docs demo: on a dark docs page for a UI component, a cursor copies the code sample, then edits it in place (switching its tone and adding a trend prop) while the live preview beside it updates with each valid change.

<inputs>
If I don't give you something, use the default and don't ask.
- Library: Thistle UI (fictional), a component library for web apps; package "@thistle/ui", version "v3.2". Wordmark "thistle" beside an original mark: a small circle with five short strokes fanning up from its top, like a thistle head.
- Top nav: links "Docs", "Components", "Blog" and "v3.2 ▾"; a search field "Search docs" with a "⌘K" keycap.
- Sidebar: GETTING STARTED (Installation, Theming); COMPONENTS (Avatar, Badge, Button, Dialog, StatCard, Table, Tabs, Toast); HOOKS (useTheme, useMediaQuery). StatCard is the current page.
- Breadcrumb "Components / Data display"; title "StatCard"; lead "Show one number with its label, change and trend."
- File tab "Revenue.tsx". Code, exactly:
  import { StatCard } from "@thistle/ui";

  export default function Revenue() {
    return (
      <StatCard
        label="Monthly revenue"
        value="$48,200"
        delta="+12.4%"
        tone="moss"
      />
    );
  }
- Edits: change tone="moss" to tone="clay" on line 9; then add line 10: trend={[31, 34, 33, 37, 40, 43, 48]}
- The numbers agree: $48,200 is up 12.4% on last month's $42,880; the trend is monthly revenue in thousands of dollars from April to October, ending at 48.
- Props table rows (prop · type · default): tone · "moss" | "clay" | "ink" · "moss"; trend · number[] · none; delta · string · none.
- Tooltip on the last trend point: "Oct · $48,200".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a dark, editorial docs site in deep oxblood with a coral accent, where the one bright object is the light preview canvas. It should feel like a library made by people who care about type: generous spacing, a calm sidebar, and an editor that behaves exactly like a real one (selection, caret, autocomplete, auto-closing brackets). The pace is snappy at keystroke level and calm between actions.
- Palette: page #170F10; top nav and sidebar #1D1415 with 1px #3A2A2B borders; editor #130C0D; borders and rules #3A2A2B; text #F3E8E3; muted #A48F8A; faint #6E5B58; coral #FF8467 (the active nav bar, focus ring, caret, the Copied state, click rings); selection #4A2E2C; active line #1C1213; active sidebar item #2A1D1E. Code: keywords #FF8467, component names #F3E8E3 at weight 500, attribute names #9DD3BF, strings #E9C46A, numbers #F2A6A0, punctuation and brackets #A48F8A. Preview canvas #F7F0EA with 1.5px dots #EADFD6 every 24px. StatCard: card #FFFFFF, 1px #EADFD6 border, shadow 0 12px 30px rgba(60,20,20,0.10), label #6B5A57, value #1E1213; tone moss: accent #5E8B47, chip #E3EFD9 with text #3F6B2E; tone clay: accent #C8613A, chip #F7E0D5 with text #A44A2A.
- Type: Hanken Grotesk 700 for the title (56px), the wordmark (22px) and the card value (54px); Hanken Grotesk 500 for nav and sidebar items (16px), the card label (18px) and table text; Hanken Grotesk 400 20px for the lead; Spline Sans Mono 400 19px on a 32px line for code; Spline Sans Mono 500 12px uppercase tracked 0.12em for sidebar group labels; Spline Sans Mono 400 15px for the props table and the file tab.
- Layout:
  - Top nav y 0–72 across the full width: the wordmark at x 40; the search field at x 400–760, y 18–54 (radius 10, #170F10 fill, faint text, the keycap at its right); the links right-aligned ending at x 1880, 32px apart.
  - Sidebar x 0–340, y 72–1080: group labels and items from y 112, items 36px apart at x 40; StatCard active with the active fill (x 24–316, radius 8) and a 2px coral bar at its left edge.
  - Article from x 400: breadcrumb at baseline y 124 (muted 14px); title at baseline y 196; lead at baseline y 244.
  - Playground x 400–1840, y 290–850, radius 14, one 1px border; the editor x 400–1150 and the preview x 1150–1840, split by a 1px border. Editor header y 290–340: the file tab at x 424 with a 2px coral underline; at the right a "Copy" button (x 1050–1132, y 302–328, 1px border, radius 8, a copy glyph and the word) and "Reset" in muted. Code from first baseline y 384: line numbers right-aligned at x 444 in faint, code from x 468; 12 lines once the trend line is added (the last at y 736). Preview header y 290–340: "Preview" at x 1174 (muted 15px), a "Live" chip with a steady coral dot, and a status note right-aligned at x 1816 in faint 14px.
  - The StatCard, centered in the preview area on (1495, 595): 420 wide, 220 tall without a trend and 300 with one, radius 18, padding 28, a 6px accent bar down its left edge; the label at the top, the value under it, the delta chip ("↑ +12.4%", Hanken Grotesk 600 15px, radius 12) to the right of the value's baseline; with a trend, a 364×64 sparkline along the bottom: a 2.5px line in the accent, its area filled with the accent at 12%, and a 6px dot on the last point. The sparkline's x spacing is fixed for seven points and its y scale is fixed from 25 to 50, so nothing rescales as points arrive.
  - Props table from y 890: a header row ("Prop", "Type", "Default" in muted) and three 44px rows with columns at x 400, 640 and 1180, separated by 1px rules.
  - The cursor: a white arrow with a 1.5px #170F10 outline, 26px tall.
- Editor behavior: a 2px coral caret that stays solid while typing and blinks at 1 Hz only while idle (shown for 0.5 s, hidden for 0.5 s, starting shown the moment typing stops); the active-line band follows the caret; typing runs at 26 characters per second with seeded ±15 ms jitter. After "tr" an autocomplete popover (#1D1415, 1px border, radius 8) opens under the caret listing "trend    number[]" (highlighted) and "tone     'moss' | 'clay' | 'ink'"; it closes 0.15 s after "trend" is complete. Typing "{[" auto-inserts "]}" after the caret, as real editors do, and the numbers are typed between them.
- Live preview: it re-renders only when the code parses and the props are valid. While the tone reads "c", "cl" or "cla", the card keeps its last valid render and the note reads "Waiting for valid props". "trend={[]}" is valid and renders no sparkline; from the first number on, the preview re-renders whenever a number is completed by its comma (and when the last one is typed), so the sparkline gains one point at a time, its line extending to each new point over 0.2 s; the card grows from 220 to 300px with the first point (0.35 s, easeOutCubic). A tone change crossfades over 0.25 s. After every update the note reads "Updated · 12 ms".
- Copy feedback: the button's glyph morphs into a 2px-stroke check and its label becomes "Copied" in coral with a coral border for 1.1 s, then returns.
- Premium: a real-looking component API, code that compiles, an editor that behaves like an editor, a preview that honestly waits for valid props, numbers that agree everywhere. Cheap: a generic dark IDE with neon syntax, glowing borders, purple gradients, lorem components, a preview that changes before the code does.
- Banned: real company names, logos and UI copied from existing products or real docs sites; purple; glow; gradients beyond the sparkline's area fill; lorem ipsum; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the page fades in; sidebar items cascade 20 ms apart; the title and lead rise 12px into place.
- 0.5–1.2s: the playground fades in; code lines reveal 25 ms apart; the StatCard scales up from 0.97 and fades in, in moss.
- 1.3–1.9s: the cursor enters from the lower right and moves to Copy (easeInOutCubic); hover lightens the button's border at 1.75 s; click at 1.9 s with a coral ring (0 → 28px, 0.3 s); "Copied" shows until 3.0 s.
- 2.1–2.5s: the cursor moves to "moss" on line 9 and double-clicks at 2.5 s, selecting the word without its quotes.
- 2.6–2.8s: "clay" types over the selection; the preview waits through "c", "cl" and "cla" and crossfades to clay at 2.8 s (accent bar and chip).
- 3.0–3.2s: the caret jumps to the end of line 9 and Enter at 3.2 s opens line 10 at the same indentation.
- 3.3–4.7s: "trend={[" types (the autocomplete opens at "tr" and closes after "trend"; "]}" appears with "{["), then "31, 34, 33, 37, 40, 43, 48"; the card grows with the first point and the sparkline extends point by point, reaching 48 at about 4.65 s.
- 4.7–5.0s: the note reads "Updated · 12 ms".
- 6.0s: the poster: the docs page with the sidebar, title and lead, the 12-line code with the caret resting at the end of line 10, the clay StatCard with its full sparkline, and the props table.
- 6.3–6.8s: the cursor moves to the sparkline's last point; at 6.8 s the end dot grows to 9px and a dark tooltip (#1E1213, white Hanken Grotesk 500 14px, radius 8, a 6px pointer) reads "Oct · $48,200".
- 7.3–7.9s: the cursor moves to the props table's "trend" row and clicks it at 7.9 s (a coral ring): the editor loses focus, so its caret and active-line band disappear, and the row takes the active fill with a 2px coral left bar; the tooltip fades.
- 8.0–10.0s: hold; nothing moves.
For other lengths, stretch the pauses between actions; keep the typing speed and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: icons, the cursor and the sparkline are drawn in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG (the typing jitter). The editor's text at any t is rebuilt from one timed edit script (selections, typed characters, auto-inserted brackets), and the preview's state is computed from the last valid version of that text. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: HTML and CSS, every element absolutely positioned on the 1920×1080 stage; seek writes text, transforms, sizes, colors and opacities directly as inline styles. Code is real text in spans with syntax colors; the sparkline is an inline SVG path rebuilt by seek.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the code matches the given text exactly, with the edit applied and line 10 indented like line 9; the brackets close correctly; the preview never changes before the code that causes it; the card is clay from 2.8 s on and its sparkline has exactly seven points ending at 48; nothing rescales as points arrive; the caret never blinks while typing; the Copied state returns to Copy by 3.0 s; the tooltip sits on the last point; nothing blinks faster than 1 Hz or flashes; the 6.0 s frame matches the poster description; and the final frame shows the edited code, the clay card with its trend, and the highlighted props row. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…