supported technologies & integrations
React
Tailwind CSS
TypeScript
Figma
Webflow
GitHub
Netlify
Claude Code
Codex
Gemini CLI
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
the gap
Figma gives you mockups a developer has to rebuild. Webflow owns your markup. AI generators produce throwaway code. Your codebase deserves a visual editor that respects it.
vs. Figma
Outputs design specs, not code. Backdraft edits your actual source files.
vs. Webflow
Owns your markup. Backdraft works with the codebase you already have.
vs. Framer
Generates its own code. Backdraft preserves yours.
vs. Cursor
Autocompletes text. Backdraft's agent sees your rendered UI and iterates visually.
how it works
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.
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.
Commit to GitHub with AI-generated messages. Deploy to Netlify in two clicks. Launch your dev server. All without leaving Backdraft.
core experience
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
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
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
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.
overwatch
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
Layout, typography, colors, borders, shadows, filters, flex, grid, transforms. All visual, all writing to source.
Full Google Fonts catalog. Live preview, category filters, one-click CSS injection.
GSAP, Animate.css, AOS, and pure CSS. Browse by category, copy code and CDN tags.
Unsplash built in. AI image generation with text-to-image and image-to-image.
Browse resolved React components. See props, source preview. Drag to instantiate.
Auto-extract colors, typography, spacing tokens from code or mockup images.
import anything
Your codebase
Open any folder with HTML/CSS or React/Tailwind files.
Figma
Multi-step wizard with layout preservation and AI polish.
Webflow
Full site crawl, asset download, URL rewriting to local paths.
ship & deploy
GitHub
Commit and push with AI-generated messages. Clone, pull, branch management.
Netlify
Two-click publish. Build config, env vars, deploy history.
Dev Server
Preview React/TypeScript sites with HMR. Configurable port.
pricing
Every plan includes a 7-day free trial. Cancel anytime.
Basic
billed annually at $84/yr
Pro
Popularbilled annually at $180/yr
Compare plans in detail · 1-year license option at $135
Import an existing project or start fresh. Backdraft works with the code you already have.
macOS desktop app + web mode. Windows & Linux coming soon.