Every release of the app, newest first. The installed Windows app and the shared artifact are built from the same commit, so each version below applies to both. Red dots mark feature releases; hollow dots are fixes.
23 releases
0.1.0 → 0.18.0
67 added
15 changed
10 fixed
Sep 23, 2026 – Sep 26, 2026
Play and learn
0.13.0 – 0.18.0 · Sound, a guided tour in two flavours, and a kit that starts with somewhere to sit.
On phones, tapping a piece in the Front or Drummer view brings up a bar at the top of the view with Height and Tilt sliders, − and + buttons for fine steps (½ inch or 1 cm, and 1°), the current values, and Done. You can see the kit move as you drag, and each drag is a single undo step. Before, Height and Tilt sat at the bottom of the settings sheet, which covered the view.
Changed
The Front and Drummer view hint says "Tap" on touch screens, drops the ↑/↓ tip there, and on phones sits in the empty space above the kit instead of over the drums.
The tour counted as seen the moment it appeared, so closing the app with the first card up meant it never came back. It now shows at launch until you pick Show me around, Let me try it or Skip tour (or finish it).
Changed
The tour is remembered per app version: once you've taken or skipped it, it stays away until the app is updated, then it's offered once more.
Starting the tour from the File menu while a tour was still open (possible in the hands-on version, whose last task opens that menu) resumed it on its last card. Every start now opens on the first card, and the File and Layers menus close when the tour starts or reaches its last card.
The File menu shows the version number at the bottom, so the installed app and the artifact can be compared.
The tour's last card offers Keep this kit or Clear canvas. Clearing starts a new kit with just the throne; the kit you had stays under File → Kits in this browser.
Changed
New kits (first launch, File → New kit, the hands-on tour, Clear canvas) start with a throne in place. A kit with nothing but a throne still counts as empty: it shows the "Start a kit" card and isn't added to the kit list until you change it.
The red throne mark only appears where a throne is. Delete the throne and the mark goes with it (it used to fall back to a labelled mark at the centre of the paper).
The "Start a kit" card with preset kits no longer appears while the tour is open, or afterwards once a tour option (Show me around or Let me try it) has been picked. Skipping the tour still shows it. Presets remain under File → New from a template.
Let me try it starts a fresh, empty kit so you build one from scratch. The kit you had open is kept under File → Kits in this browser (an empty kit isn't duplicated).
The tour with its two options opens on first launch of the app or artifact, including for anyone who saw the older, single-mode tour. If the browser blocks storage, it's shown rather than skipped, since there's no way to tell whether it has been seen.
The tour now starts by offering two ways through: Show me around (the click-through, as before) or Let me try it, where the app stays live and each step sets a small task (add a piece, move it, change a setting, undo, switch view, open the File menu). The tour moves on by itself once the task is done; Skip step and End tour are always there. On phones the tasks include opening a piece's settings sheet from the bar and changing a value in it.
Changed
The throne stays on top of pedals and other hardware: pieces added to the hardware layer (or moved onto it) slide in under the throne instead of above it. Existing kits keep their order; select the throne and use Bring to front to fix one.
Guided tour on first launch, and from File → Take the tour. It picks a phone or wide-layout version from the layout on screen and tap or click wording from the input in use. The phone tour opens a piece's settings sheet to show where per-piece settings live, and loads a practice kit if the paper is empty. Spotlight and card, with Back/Next/Skip, arrow keys and Esc.
Fixed
In the shared artifact, the page frame's own text colour and font overrode the app's, making the "Drum Kit Layout Builder" title nearly invisible in dark mode (1.09:1). The app now sets its colour and font on body as well.
In the Shaded style, near-black parts (throne seat, pedals, cowbell, stand feet, rack clamps) almost vanished on the dark background, in the canvas and in palette thumbnails. They now get a light outline in dark mode; exports keep the dark outline on light paper.
Play mode (P, or the drumsticks button): tap or click pieces in any view to play them. Multi-touch plays several at once, and each hit flashes the piece. Leave with Esc or Done.
Built-in synthesised sounds for kick, snare, toms, floor toms, hi-hat (closed, open with Shift, pedal chick), crash, ride (bell from the centre), splash, china, cowbell, jam block, tambourine and custom shapes. Pitch and ring follow each piece's size. Kick and hi-hat pedals play what they strike; throne, stands and racks are silent.
Volume control in the play bar, remembered per browser.
setSample/loadSample in src/audio/engine.ts: groundwork for custom sounds, pitch-shifted by size the same way.
Changed
Phone toolbar buttons are 34px so the new button fits.
Local app and sharing
0.10.0 – 0.12.2 · A self-contained Windows install with real files, the drummer’s view, shell finishes and a shareable artifact.
With the throne at the bottom, group and note selection boxes and the marquee were drawn with negative sizes, and a group's rotate handle sat below it instead of above.
Drummer view: the kit from the throne, mirrored, nearest pieces in front, tilted drums showing their top heads, and the throne hidden. V now cycles Top-down → Front → Drummer.
Shareable claude.ai artifact build (npm run artifact): the same app as one page. Saves and exports go through the platform's confirmed downloads (kit files as .drumkit.json), native file pickers are off, the viewer's light/dark choice is respected, and first-time visitors see an example kit.
In-page confirmation dialog for deleting kits and removing My pieces templates, in both builds (the artifact viewer refuses confirm()).
The top-down view can turn 180° so the throne sits at the bottom (the drummer's view), now the default. Switch with the "Throne bottom/top" button under the view switch, Shift+V, or Kit settings. It's a per-browser preference. Labels, notes and dimensions stay upright, arrow keys and the palette ghost follow the screen, and exports match the view. The front view is unchanged.
Kit-wide shell finish for the Shaded style: Solid (presets or any colour) or Fade between two picked colours, with preset fades. Drums can override it with their own Solid or Fade, or use "Same as kit". Fades run across the shell from above and top-to-bottom in the front view, and carry into exports.
meta.shellFinish and styleOverrides.finishFade in .drumkit files.
Single-file build: dist/index.html inlines scripts, styles and fonts and runs from disk with no network.
Windows installer (Install.cmd): per-user install without admin rights, Start menu and desktop shortcuts that open the app in its own Edge/Chrome window, and a Settings → Apps entry. Uninstaller removes shortcuts, the Apps entry and the program folder, never your files. Installing over an older version updates it in place.
npm run package builds release/drum-kit-layout-builder-<version>-windows.zip; CI builds it and keeps it as an artifact.
Real local files in Edge and Chrome: Save writes back to the kit's .drumkit file, Save as picks a new one (Ctrl+Shift+S), and the window title shows • when the file is out of date. Dropped files stay linked for saving where the browser allows. Exports ask where to save.
App icon (installer/icon.ico), generated by scripts/make-icon.mjs.
Changed
Fonts are bundled (Latin and Latin Extended) instead of loaded from Google Fonts, for the app and for exported images.
Browsers without the File System Access API fall back to downloads for Save and Export.
Removed
Phase 10 (accounts, cloud save, sharing) is out of scope: the app stays local.
Built to the spec
0.1.0 – 0.9.0 · Phases 1–9 of docs/spec.md: the editor, data model, layers, styles, notes, saving and the front view.
Starter templates: Jazz 4-piece, Rock 5-piece, Fusion 6-piece and Double bass, from a start card on an empty kit or File → New from a template.
File → Mirror (left-handed): flips pieces, rotations and annotations left to right, as one undo step.
Keyboard shortcuts sheet on ? or from the File menu.
The browser tab shows the kit's title.
Changed
The seat crosshair follows the throne, live while dragging, instead of staying at the origin. It's drawn over the pieces so it stays visible on the seat.
On phones the toolbar drops the rotate buttons (use the on-canvas handle) and fits without scrolling.
Front view, switched with the Top-down / Front control on the canvas or V. Drums are drawn as side profiles at their playing height with typical shell depths; the bottom head shows as they tilt. Kicks stand on the floor showing the front head. Cymbals are tilted discs on stands, the hi-hat a pair. Throne, pedals, stands, racks and extras are included. Both render styles and drum finishes apply.
Floor line and a height ruler in feet or centimetres. Depth order follows the audience's view.
Click to select in the front view; ↑/↓ nudges height (Shift 6", Alt ½") as one undo step per press.
Export uses whichever view is showing.
Library pieces now come with typical tilts (toms 12°, crash and splash 15°, ride 10°, snare 4°, china −8°).
Auto-save through a localStorage StorageAdapter: the kit restores after a reload. Pending changes are flushed when you switch kits or leave the page, and blank new kits aren't saved.
File menu: new kit, kits saved in this browser (open or delete), save and open .drumkit files, and a dark mode switch (it replaces the toolbar's theme button on phones).
Open a .drumkit file by dropping it on the page. It opens as a new kit, and repair warnings show as a message.
Export to PNG or JPEG (1×/2×/4× of the 100% size, capped at 8192 px) and SVG, with optional graph-paper grid and title/author/scale-bar header. Exports use the light paper look, embed the Caveat font, bake all styling into the SVG, and keep line weights in proportion at any size.
Status messages ("toasts") for opens, warnings and errors.
Auto-labels with each piece's name and size in a hand-drawn style, placed inside drums, under cymbal bells, on the kick's front edge and under hardware. Kit-wide toggles for labels and for brand/model lines, plus a per-piece "Show label".
Text notes (three sizes, multi-line), arrows and dimension lines, from a new Annotate section in the palette. Drag them to move, or click to add mid-view.
Line endpoints drag with grid snap and stick to piece centres, so a dimension can measure drum to drum. Dimensions show their length in the kit's units, kept upright.
Pencil or red-pencil colour per annotation.
Annotations work with selection, marquee, move, nudge, duplicate, delete, undo and the annotations layer's hide/lock.
.drumkit files store annotations; unreadable ones are skipped with a warning and unknown fields are kept.
Shaded style: coated heads, chrome hoops, lugs and stands, cast-bronze cymbals, a vinyl throne, and kick shells with cylinder shading. Toggle from the toolbar or Kit settings; saved as meta.renderStyle.
Shell finish for drums: eight presets plus any custom colour, stored as styleOverrides.finish. Works across a multi-selection.
Palette and inspector thumbnails follow the current style.
Changed
Inspector patches to styleOverrides now merge into each piece's existing overrides instead of replacing them.
Layers menu in the toolbar: show/hide and lock each layer (annotations, cymbals, drums, hardware), with piece counts.
Locked pieces stay visible but ignore the pointer, so you can work on cymbals over locked drums. Hidden and locked pieces are left out of select-all and marquee selection.
Restacking within a layer: Bottom/Down/Up/Top in the inspector and Ctrl+[, Ctrl+], Ctrl+Shift+[, Ctrl+Shift+]. Multiple selected pieces move as a block.
The parts list marks pieces on hidden or locked layers.
canvas.layers in .drumkit files stores each layer's hidden and locked flags.
Inspector panel: name, brand, model, size and depth, position, rotation, layer, height and tilt. Multi-selection edits every selected piece, showing "Mixed" where they differ. Commits on Enter or blur as a single undo step.
Kit settings when nothing is selected: title, author, inches/centimetres, grid size, snap, and a parts list that selects on click.
Unit-aware entry and display everywhere: type 22, 22", 56 cm or -12 in any length field.
Custom pieces: a "Custom shape" palette tile with a choice of shape and "draw as" style, plus "Save to My pieces" templates kept in the browser.
.drumkit loading with migrations, repair of bad data with warnings, and preservation of unknown fields (src/model/serialize.ts, src/model/migrations.ts). Wired to the UI in Phase 7.
Optional glyph field on pieces for how a custom piece is drawn.
Fixed
A palette tile could ignore one keyboard activation after a drag.
Vite + React + TypeScript project with ESLint, Prettier, EditorConfig and Vitest.
GitHub Actions workflow running lint, typecheck and tests.
Folder structure per the spec.
SVG canvas with inch-based world coordinates, a two-level grid (2" cells, 1' major lines) and an origin marker.
Pan with mouse drag, middle-drag, Space-drag and two-finger touch; zoom with wheel, trackpad pinch, touch pinch and toolbar buttons.
StorageAdapter interface stub for the future backend swap.
Generated from CHANGELOG.md and the git tags by npm run history. Times are when each version was tagged. 0.12.1 was released alongside 0.12.2 without a tag of its own.