v0.4.5 · pre-release

A local canvas with your real code.
For designers, engineers and AI agents.

Let Claude set up a canvas inside your app's dev environment. Open any page at multiple viewports, edit text straight to source, and watch agents work live. Build your own boards — any React component is a valid node.

npx forkshop initFollow on X →

Next.js only for now. Pre-1.0 — expect breaking changes. Source on GitHub.

Feedback: jakub@forkshop.dev

localhost:3000/forkshop
Forkshop running in a Next.js project — sidebar with boards on the left, canvas with stacked iframe viewports on the right.

Side-by-side viewports

Open desktop, tablet, and mobile views of any page at once. Type in one viewport, the others update as you go.

Edit text in place

Click any text in the canvas to make it editable. ⌘↵ saves to the underlying TSX file; Esc discards.

See your agent at work

When AI agents are editing files, Forkshop highlights it in real time.

Auto-discovered sitemap

Forkshop reads your route tree and assembles a sitemap board — every page as a live iframe, every section as a click target. No JSON, no enumeration.

Every component variant

Render real buttons, navbars, modals in a grid. Compare light and dark, open and collapsed, default and hover — your full design system in one view.

Build your own boards

Anything you can render in React is a valid canvas node — design refs, dashboards, internal tools. Compose boards and workflows around the work you actually do.