Pin annotations
for live frontends.
Reviewers drop teardrop pins; AI dev assistants read them as JSON and reply with unified diffs. Same contract, two front doors.
Three reasons it's not just "Figma for code".
Not a comment layer over screenshots. A self-hosted review surface where the iframe is the artifact, pins are DOM-anchored, and the API is built so an AI agent can close the loop without a human pasting context into chat.
The iframe is the truth
Pins anchor to DOM nodes. Reflow, zoom, fullscreen, viewport changes: the pin stays on the element it was dropped on. No screenshot drift.
Single-mount deploy
One docker container. SQLite + filesystem. No PostgreSQL, no Redis, no S3. Mount one volume, back up one tree. 256 MB is enough.
An API agents can use
Server-side DOM resolution, computed-style extraction, unified-diff versioning. Same routes power the browser UI and autonomous orchestrators.
Pin it yourself.
A live Markup surface, running on your browser. Drop pins, write annotations, react, reply. Everything persists in localStorage so the next visitor finds a clean slate. Reset any time.
Lock the design before you discuss the build.
design-feature is a community skill that gets the most out of your AI agent and Markup. It runs the agent through a UI/UX brainstorm, hands you a live tweaker to explore every option it proposes, and only opens the implementation conversation once the design is locked.
Discovery
The agent scans your stack, your conventions, and your design rules before suggesting anything.
Design brainstorm
The agent proposes several visual directions in a single live mockup. You pick variant, density, accent.
With Markup, every iteration is uploaded for you. Reviewers leave pins straight on the live mockup. No screenshots, no chat pasting.Lock the design
When you approve, the chosen options are baked in. The mockup graduates to your Design System.
With Markup, every round of iteration is a saved version. You can scrub back to any earlier proposal at any time.Tech brainstorm
The implementation conversation only opens after the design is locked. No UI re-design at this layer.
With Markup, the agent already sees the final mockup and the full review thread before the technical discussion starts.Plan + build
A TDD plan splits the work into small tasks. Sub-agents implement them in parallel against the locked design.
Visual + behavior QA
A browser-driven check compares the live build against the Design System reference and loops on any drift.
The mockup lives on the same surface as production. Pins anchor to the same DOM. The agent reads context, patches HTML, and replies on the thread, so every step from 0 to 5 leaves an addressable trail.
The first commit was a working agent API.
Inline DraftCard
Mounted at the top of the rail while drafting. Three terminal actions. Persists across reloads.
Pin-based review
Click anywhere on the live mockup. Pin reflows with the layout via DOM-anchored coordinates.
Versioning
Every upload is immutable. Side-by-side and overlay diff views compare any two versions.
Agent context
Single-call aggregator returns annotation, inline HTML, and a unified diff against creation.
Cookie or Bearer
Browser sessions and agent tokens hit the same routes. One contract, two front doors.
Single-mount deploy
All state under ${DATA_DIR}. SQLite WAL. Online backup via Litestream supported.
Run it in 30 seconds.
# Pull and start. The first request runs the setup wizard. docker run -d --name markup \ -p 3000:3000 \ -e AUTH_SECRET=$(openssl rand -hex 32) \ -v $(pwd)/markup-data:/app/data \ ghcr.io/alkg-cloud/markup:latest
The questions reviewers always ask.
Does it work without an LLM?
Yes. The cookie-session reviewer UI is the same surface, with no required AI. The agent API is opt-in. Issue a bearer token only if you want an automated client (or just don't issue any).
Why SQLite instead of Postgres?
Markup is sized for small-to-medium teams self-hosting on a 256 MB box. SQLite in WAL mode handles the workload; a single mounted volume is dramatically simpler to back up. If you outgrow it, the Prisma schema ports to Postgres without surgery.
Can I use it with Claude Code / Cursor / Aider?
Yes. The agent API is just an HTTP contract: bearer token in, annotation context out, unified diff back. Any dev assistant that can call curl can drive Markup. The docs show example loops.
Open source, made better by contributors.
Markup is built in the open. Bug reports, feature PRs, and design feedback all land on the same issue tracker. Become a contributor in one PR.