A visual canvas, code editor, AI agent, CLI integrations, design resources, and deployment tools.
canvas editor
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
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
Run Claude Code, Codex, Gemini CLI, or OpenCode directly from Backdraft's chat panel. Real-time streaming, live file sync, one unified interface.
Claude Code
Codex
Gemini CLI
OpenCode
import & export
Multi-step wizard with layout preservation. Paste a Figma URL and watch layered designs convert to semantic HTML and CSS.
Full site crawl, asset download, and URL rewrite. Bring any Webflow project into Backdraft with one click.
Clone, push, pull, branch, and AI-generated commit messages. Full Git integration without leaving the editor.
Two-click deploy with build config and environment variables. Ship straight from your editor.
responsive
design resources
Browse and apply Google Fonts with live preview. Copy CSS or bind to CSS variables instantly.
Curated snippets for GSAP, Animate.css, AOS, and pure CSS. Grouped by category, copy with CDN tags.
Search Unsplash directly from the editor. Drag and drop high-resolution images into your project.
SVG illustration packs ready to drop into your designs. Filter by style, customize colors on the fly.
Turn any image into authentic Unicode art with 12 distinct character presets. Works with MP4 too.
Auto-extract colors, typography, and spacing from any project into a structured design system file.
developer tools
Up to 40 versions per file. Browse, compare, and restore any previous state with a single click.
Save up to 80 full-project snapshots. Roll back your entire workspace to any point in time.
500 levels of undo powered by byte-level CST diffs. Never lose a change, even across file switches.
Full DOM tree view with search, position badges, and auto-scroll to selection. Drag to reorder.
Toggle dark mode preview for Tailwind v4 projects. Set class="dark" on the root element.
Full shortcut set for power users. Frame (R), Text (P), Image (J), Annotation (N), and more.
quick reference
| Select | V |
| Frame | R |
| Text | P |
| Image | J |
| Annotation | N |
| Select All | ⌘A |