Studio snippet library

The code studio ships a small, curated set of retro snippets — guestbook forms, hit counters, marquees, table layouts and other GeoCities-era staples — that a writer can drop into a file from the editor.

Using snippets

1. Open a file in the studio (HTML, CSS, or JavaScript).
2. Click Snippets ▾ in the studio header. The menu only lists snippets that match the file you're editing (HTML snippets for .html, CSS for .css, and so on), so a stylesheet never offers a <form>.
3. Pick one. It's inserted at the cursor (replacing any selection).
4. Many snippets have fields — the highlighted placeholders. Press Tab to jump to the next field and type to fill it in; the editor moves past the last field when you're done.

What's included

Language	Snippets
HTML	Guestbook form, Hit counter, Marquee banner, Table layout, Under construction, Webring nav
CSS	Rainbow text, Starry background, Blinking text
JS	Last-updated stamp, Visitor counter

Adding a snippet

Snippets live in resources/js/studio/snippets.js. Append an entry to the SNIPPETS array:

{
    id: 'unique-id',            // unique across the library
    label: 'Short name',        // shown in the picker
    description: 'One line.',    // shown under the label
    language: 'html',           // 'html' | 'css' | 'js' — controls when it's offered
    code: [
        '<p>${1:Editable field}</p>',
        '<p>${2:Another field}</p>',
    ].join('\n'),
}

The code is a CodeMirror snippet template: ${1:placeholder} defines a Tab-navigable field with default text, numbered in tab order. Keep code as single-quoted strings (not backticks) so the ${…} tabstops stay literal rather than being interpreted as JavaScript template interpolation.