Studio

Local-first design that prints exactly what you see.

Client
Dopamine Design Labs
Year
2026
Type
PWA
Live
Private
Studio's launcher with document starting points including New with AI, Markdown doc, HTML canvas, and size presets from social to print.
Overview

Studio is a local-first editor for variably-sized documents: flyers, proposals, dossiers, slide decks, social posts. The artboard you edit and the page that prints are the same DOM, in the same physical units, fragmented by the same engine. Export is a print of what is on screen, and a closed-loop pixel diff proves it.

Stack
ReactViteTypeScriptElectronPaged.jsDexie / IndexedDBZustand + ImmerClaude APIGhostscript
What it does

The shortlist.

  • 01One render contract shared by the editor and the export engine, so they cannot drift
  • 02Closed-loop verification: a 300-DPI raster of the produced PDF is pixel-diffed against the screen render and gated on SSIM
  • 03Runs in three places from one build: browser, installable PWA, and Electron desktop
  • 04Live Markdown editor with a side-by-side rendered preview, then Design with AI
  • 05Press-ready CMYK export via Ghostscript, degrading gracefully when absent
  • 06Local-first storage in IndexedDB with folder sync and backup
  • 07Brand kit that scans a website for logo, colors, fonts, and voice
Inside the system

Capabilities, in plain language.

01

The pixel-perfect contract

There is exactly one rendering of a document. Editor and export consume the same isomorphic render contract, measured in the same millimetres, with the same embedded fonts, fragmented by the same engine.

02

Artboard and inspector

Size presets from A4 to Story/Reel, per-page controls, margins and column grids in inches, gradient backgrounds, and a layers-and-properties inspector that stays out of the way.

03

Markdown and HTML in

Paste a draft from any agent and design it in one click, or import existing HTML plus CSS as a layout reference that Claude re-themes to your brand.

04

Export that is proven

RGB PDF, press-ready CMYK, PNG, and standalone HTML. The verify step rasterizes the PDF and compares it against the screen, so a broken export fails loudly instead of silently.

Inside the product

A look around.

The Studio editor: asset library on the left, a US Letter artboard with margin guides, and a document inspector with size, DPI, margins, and column grid.

The Studio editor: asset library on the left, a US Letter artboard with margin guides, and a document inspector with size, DPI, margins, and column grid.

Studio's Markdown mode with raw Markdown on the left and a live rendered preview with tables and syntax-highlighted code on the right.

Studio's Markdown mode with raw Markdown on the left and a live rendered preview with tables and syntax-highlighted code on the right.

Studio editing a 16:9 slide, showing that the same engine handles print and presentation sizes.

Studio editing a 16:9 slide, showing that the same engine handles print and presentation sizes.

1
Render contract, zero drift
3
Runtimes from one build
300
DPI verification raster
Next case studyProperty Management Platform

Rent, leases, and maintenance without the six-figure suite.

Take the meeting

Let's build something
stupidly good.

Bring us the messiest part of your operation. The thing you've been avoiding because the spreadsheet still kind of works. We build the replacement.