Everything you need to build, edit, and ship — in one editor.
A visual canvas, code editor, AI agent, CLI integrations, design resources, and deployment tools.
canvas editor
A design tool that writes real code.
Select elements on a spatial canvas, drag to reflow layouts, and edit properties visually. Every change writes back to your actual source files — HTML, CSS, React, Tailwind.
ai-powered
An agentic loop with 13+ tools.
The AI agent reads your project, searches files, executes bounded edits, and takes screenshots to verify its work. It operates as a developer, not a text predictor.
Visual verification
Takes screenshots at any viewport to verify its visual output.
Edit + Generate modes
Modify existing files or generate multi-file projects from scratch.
Design system extraction
Auto-extracts colors, typography, and spacing into a reusable design system.
Annotation system
Pin notes to elements and the AI addresses them in sequence.
Security guardrails
Path traversal protection, SSRF blocking, rate limits, and loop detection.
cli integration
Your favorite CLI agent, inside your visual editor.
Run Claude Code, Codex, Gemini CLI, or OpenCode directly from Backdraft's chat panel. Real-time streaming, live file sync, one unified interface.
import & export
Start from what you already have.
Figma Import
Multi-step wizard with layout preservation. Paste a Figma URL and watch layered designs convert to semantic HTML and CSS.
Webflow Import
Full site crawl, asset download, and URL rewrite. Bring any Webflow project into Backdraft with one click.
GitHub
Clone, push, pull, branch, and AI-generated commit messages. Full Git integration without leaving the editor.
Netlify
Two-click deploy with build config and environment variables. Ship straight from your editor.
responsive
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, every tile rebuilds in real time — so you catch layout breaks before they ship.
design resources
Fonts, animations, images, and blocks — built in.
Animation Library
Curated snippets for GSAP, Animate.css, AOS, and pure CSS. Grouped by category, copy with CDN tags.
Illustration Library
SVG illustration packs and UI component templates. Drop mockups directly onto the canvas.
Image Search
Search Unsplash directly from the editor. Drag and drop high-resolution images into your project.
Font Library
Full Google Fonts catalog with live preview, category filters, one-click CSS injection.
ASIC Texture Generator
Turn any image into authentic Unicode art with 12 distinct character presets.
Design System Extraction
Auto-extract colors, typography, and spacing tokens from code or mockup images.
developer tools
Everything you expect
from a pro tool.
File History
Up to 40 versions per file. Browse, compare, and restore any previous state with a single click.
Project Snapshots
Save up to 80 full-project snapshots. Roll back your entire workspace to any point in time.
Undo / Redo
500 levels of undo powered by byte-level CST diffs. Never lose a change, even across file switches.
Layer Panel
Full DOM tree view with search, position badges, and auto-scroll to selection. Drag to reorder.
Dark Mode & Theming
Toggle dark mode preview for Tailwind v4 projects. Set class="dark" on the root element.
Keyboard Shortcuts
Full shortcut set for power users. Frame (R), Text (P), Image (J), Annotation (N), and more.