Your code is the
design file.
Import your codebase. Edit it visually on a spatial canvas. Every change writes back to your actual source code. Ship from the same tool.
HTML/CSS · React/Tailwind · Figma Import · Webflow Import · No lock-in
supported technologies & integrations
React
Tailwind CSS
TypeScript
Figma
Webflow
GitHub
Netlify
Claude Code
Codex
Gemini CLI
why backdraft
Your code is the design file.
Most tools force a choice: visual editing or real code. Backdraft works directly with your source files — no translation layer, no proprietary format, no lock-in.
Your actual source files
Every visual change writes back to your real HTML, CSS, React, and Tailwind code.
No proprietary format
Your project stays a normal folder of files. Open it in VS Code, commit with Git, deploy anywhere.
Visual and code, in sync
Edit on the canvas or in the code editor — changes flow both ways instantly.
No lock-in, ever
Stop using Backdraft and your code is exactly where you left it. Nothing to export or migrate.
how it works
Three steps. Zero lock-in.
Import
Open any HTML/CSS or React/Tailwind project. Or import directly from Figma and Webflow. Backdraft parses your code into a live canvas without changing a single line.
Edit
Drag, resize, restyle on the canvas — or switch to the built-in code editor. Changes sync both ways, instantly. Ask the AI agent to scaffold pages, swap fonts, or redesign sections.
Ship
Commit to GitHub with AI-generated messages. Deploy to Netlify in two clicks. Launch your dev server. All without leaving Backdraft.
core experience
Change the code, see it on canvas.
Change the canvas, see it in code.
This isn't one-way code generation. Backdraft maintains a live, bidirectional link between your source files and the visual canvas. Your routing, state, API calls, and business logic are never touched.
ai-powered
An AI agent that checks its own work.
Backdraft's agent doesn't just generate code — it reads your files, makes multi-file edits, searches the web for assets, then renders a screenshot to verify the result looks right.
Visual verification
Screenshots at xs–2xl breakpoints, compared against your reference mockup.
13+ tools
File reading, code editing, web search, image search, font discovery, animation kits.
Your models
Bring Ollama, LM Studio, or OpenRouter. No vendor lock-in on the AI either.
cli integration
Your favorite CLI agent,
inside your visual editor.
The first visual editor with native Claude Code, Codex, Gemini CLI, and OpenCode integration. Run any agent from Backdraft's chat panel — see results on the canvas in real time.
Claude Code
Anthropic
Codex
OpenAI
Gemini CLI
OpenCode
OpenRouter
annotations
Pin notes. Let the AI handle them.
Press N, click elements, type instructions, tag with categories. Accumulate as many annotations as you want, then send them all to the agent in one batch.
Style
Adjust colors, gradients, shadows, and spacing. Pin visual tweaks directly on elements and let the agent apply them across breakpoints.
Content
Rewrite headlines, refine copy, translate text. Tag any element with editorial notes and the AI rewrites content in place, preserving structure.
Layout
Restructure grids, reorder sections, change responsive behavior. Describe the layout you want and the agent rewrites the underlying flexbox and grid code.
Behavior
Add scroll animations, hover effects, click handlers, and transitions. Annotate interactive requirements and the agent wires up the JavaScript and CSS.
overwatch
Every page. Every breakpoint.
All at once.
See your entire project rendered simultaneously at desktop, tablet, and mobile viewports. When the AI agent edits a file, the corresponding tile rebuilds in real time.
design tools
Everything you need, built in.
50+ CSS Properties
Layout, typography, colors, borders, shadows, filters, flex, grid, transforms. All visual, all writing to source.
Font Library
Full Google Fonts catalog. Live preview, category filters, one-click CSS injection.
Animation Library
GSAP, Animate.css, AOS, and pure CSS. Browse by category, copy code and CDN tags.
Image Search & Gen
Unsplash built in. AI image generation with text-to-image and image-to-image.
Component Palette
Browse resolved React components. See props, source preview. Drag to instantiate.
Design System Extraction
Auto-extract colors, typography, spacing tokens from code or mockup images.
workflow
Import, edit, ship — all in one place.
Bring in your existing code or start fresh. Make visual changes on the canvas. Deploy straight to production without switching tools.
import anything
Start from what you already have.
Open any HTML/CSS or React/Tailwind project. Or import directly from Figma and Webflow — no lock-in.
Figma
Webflow
ship & deploy
From canvas to production.
Commit to GitHub with AI-generated messages. Deploy to Netlify in two clicks. Launch your dev server.
GitHub
Netlify
Dev Server
pricing
Simple pricing. No surprises.
Every plan includes a 7-day free trial. Cancel anytime.
Basic
billed annually at $84/yr
- Visual editor + code editor
- AI agent (edit + generate)
- CLI agents
- GitHub integration
Pro
Popularbilled annually at $180/yr
- Everything in Basic
- Figma & Webflow import
- Netlify deployment
- AI image generation
Compare plans in detail · 1-year license option at $135
Your code. Your canvas. No lock-in.
Import an existing project or start fresh. Backdraft works with the code you already have.
macOS desktop app + web mode. Windows & Linux coming soon.