A free, local-first visual editor for designers to craft code in real React codebases
Stage
Not given
Startup
Founded
Not given
Not given
Based in
Not given
US
Pricing model
Freemium
Freemium
Pricing
Free: €0 forever for one design system with tokens, components, assets, MCP endpoint, Figma import and sync, live documentation site, and drift checks inside the app. Studio: €15 per seat per month with up to 5 design systems, 10 contexts and API keys, 3 connected repositories, enforcement on every
Free self-hosted version available on GitHub. For Teams: Custom pricing tailored to your team's needs. Contact us or book a demo.
Key features
Reads Figma variables and styles plus repository code to build one clear picture of your design system
Serves design system to Claude Code, Cursor and Copilot through secure MCP connection
Generates editor rule files automatically
Live documentation with auto-synced token blocks
Source code never leaves your repository
Separate space and connection for each design system or client
Configurable rule strictness with errors blocking merges and warnings letting them through
Multiple connected repositories and contexts per plan
Real-time visual editing of React components
Infinite canvas design interface
Real-time collaboration on code
Works with existing React projects and Storybook
What makes it different
Reconciles Figma design files with actual repository code into one unified source of truth
Ranks tokens by actual usage instead of showing raw Figma values
Catches design system mismatches before code merges, not just in reviews
Works through MCP protocol so compatible with multiple AI tools not just one
Code is the source of truth—no design drift from implementation
Works directly in real codebases with existing design systems
AI-assisted design generation that understands React architecture
Open-source and transparent to the development community
Contexxt
Onlook