01
Design files are plain-text, versioned JSON that live beside the code — diff, branch, review and merge them
agent-native designPre-alphaOct 2026 - PresentUpdated Nov 2026
Weft
A design canvas where humans and coding agents edit the same files.
A browser-native Figma alternative built for a world where designers and coding agents work on the same product — file-first, real-time and plugin-free.
Plain text
Design files in git
Any agent
Files · CLI · MCP
Browser-native
No install to view
MIT
Open source
Why it stands out
The decisions, trade-offs, and details that make Weft worth your time.
02
Any agent, no plugin: files, a CLI, an MCP server and a live bridge share one documented contract
03
Browser-native editor with real-time presence, cursors, direct manipulation and undo/redo
04
Capture a running page into frames, then let an agent turn annotations into code changes
05
Pre-alpha with 256 tests and 7 browser E2E checks, MIT licensed
Design files, not silos
Weft closes the gap between the design file and the repository: the design is a directory of deterministic JSON and assets that lives beside the code, and every surface — editor, CLI, MCP server and live bridge — reads and writes the same document contract.
Files, not silos
A design is a plain-text directory of deterministic JSON and assets. It diffs, reviews, branches and merges like everything else in the repository, and the file is the source of truth.
Any agent, no plugin
Agents get first-class access through files, a CLI, an MCP server and a live bridge. Hosted assistants, local harnesses and custom agents all use the same documented tools — no privileged built-in assistant.
Browser-native canvas
The editor renders the browser's own DOM, not a native runtime. Frames are labeled artboards, hover outlines show what a click will select, zoom anchors at the cursor, and Space-drag pans.
Real-time by default
Presence, cursors and concurrent edits are part of the document layer. A Yjs-backed session applies attributed commands live and merges whole-page file writes without silently dropping live edits.
Extract the real product
Capture a running allowlisted page — markup, styles and assets — into frames, annotate it, and let an agent turn those annotations into code changes. What you review is real DOM, not a screenshot.
Designs you can build from
Tokens, layout and content are structured data. The same file drives the canvas, a static HTML export, and an agent's implementation, with a published JSON Schema for non-TypeScript clients.
Reversible everything
Every agent edit is a document operation with an author, a timestamp and an undo path. Commands return their inverse, so node, page and multi-selection changes can all be undone.
Lightweight by construction
Plain text, browser APIs, a small dependency surface and no native runtime. The pre-alpha foundation is covered by 256 tests and 7 browser E2E checks.
From design file to live product
One document contract connects the editor, the repository and any coding agent — so design and implementation stay in the same loop.
Open a design
Run pnpm weft dev examples/starter.weft for the live editor, or pnpm dev for the static browser preview. The design directory is watched and the canvas updates as files change.
Edit together
Select a layer, edit its properties, move and resize on the canvas, create frames and pages, and undo or redo through command inverses. Presence and cursors keep every collaborator in sync.
Hand off to an agent
Point any MCP-capable agent at weft mcp, or let it read and write the files directly. Allowlisted reads, page/node commands, validation and context packets share one documented contract.
Extract and export
Capture a running frontend into a sanitized snapshot frame, then export static HTML, assets, tokens and an export manifest for handoff — or let an agent implement the next change.
Architecture
Browser editor <--> Weft bridge <--> design files + git
|
+--> pi · opencode · Claude Code · Codex
|
+--> chat + tools
Running product --extract--> design filesTech stack
A small, file-first stack built around browser APIs and a documented document model.
TypeScriptReactYjsMCPJSON SchemaCLIBrowser
Licensed under MIT.
Repositorygithub.com/Pranesh-Selvaraj/Weft
LicenseMIT
StatusPre-alpha — foundation and preview
EditorVite + React + TypeScript, DOM renderer
Document model@weft/core — schema, pure node operations, deterministic JSON writer, validator
Filesystem / CLI@weft/design-io + @weft/cli
Live sessionsYjs-backed commands, awareness, whole-page merge policy
Agent surfaceMCP server over stdio, allowlisted tools, read-only mode
ExtractionAllowlisted loopback capture, sanitized HTML/CSS, sandboxed iframe preview
ExportStatic HTML, assets, tokens and export manifest
ContractPublished JSON Schema + conformance fixtures
Testing256 tests + 7 browser E2E checks
Built in the open. Star it, try it, break it.
Weft is MIT-licensed and developed in public. Feedback, issues, and contributions are genuinely welcome.