Backdraft Documentation

A bidirectional code-to-design editor. Edit visually, ship real code.

Overview

Backdraft is a visual editor that works with your actual source code. Import an existing project — HTML/CSS or React/Tailwind — and edit it on a spatial canvas. Every visual change writes back to your source files without touching routing, state, API calls, or business logic.

It runs as a macOS desktop app and as a web app at app.backdraftai.com.

Installation

Desktop (macOS)

Download the latest .dmg from backdraftai.com. Open the DMG and drag Backdraft to Applications. Requires macOS 13 or later, Apple Silicon.

The app checks for updates automatically on launch and will prompt you when a new version is available.

Web

Sign in at app.backdraftai.com. The web version includes all editing features. Import/export uses browser-based file handling.

Your First Project

When you launch Backdraft, the Welcome Screen gives you three ways to start:

• Open a file — Select any .html, .css, .tsx, or .jsx file.
• Open a folder — Load a project directory. Backdraft discovers all supported files and builds a file tree.
• Start from a template — Choose a starter project from the gallery.

Once a file is loaded, it renders live on the canvas. Click any element to select it, then use the Properties panel on the right to edit styles visually.

Toolbar

The toolbar runs across the top of the editor and provides access to file operations, history, and AI tools.

• Open — Open a file or folder from disk.
• Recent — Quick access to recently opened files and folders.
• Diff — View a side-by-side comparison of original vs. current source.
• History — Browse file versions and project snapshots. Restore any previous state.
• Undo / Redo — Up to 500 levels of undo, powered by byte-level diffs.
• AI toggle — Opens the AI chat panel.
• Publish — Push to GitHub or deploy to Netlify.

Canvas

The canvas is a live rendering of your source code inside an iframe. Everything you see is real HTML/CSS — not a simulation.

Navigation

• Pan — Hold Space and drag, or use the Pan tool (H).
• Zoom — Cmd+scroll or use the zoom controls in the bottom-right bar.
• Reset — Click the zoom percentage to reset to 100%.

Selection

• Click any element to select it.
• Drag to marquee-select multiple elements.
• Cmd+A to select all.
• Escape to deselect.
• Use breadcrumbs above the canvas to navigate to parent elements.

Editing

• Move — Drag selected elements. Snapping guides appear automatically.
• Resize — Drag corner or edge handles.
• Nudge — Arrow keys move 1px; Shift+Arrow moves 10px.
• Delete — Backspace or Delete.
• Duplicate — Cmd+D.
• Copy / Paste — Cmd+C / Cmd+V.

Canvas Controls

The floating bar in the bottom-right provides additional tools:

• Box Model — Toggle a DevTools-style overlay showing margin, padding, content, and gap.
• Measurement — Hold Alt and hover to see distance lines between elements.
• Theme — Toggle light/dark preview for Tailwind projects.
• Hidden Elements — Reveal elements with display:none or opacity:0.
• Interactive States — Preview hover, focus, and active states.
• Screenshot — Capture the current canvas view as PNG.

Layers

The Layer panel (left sidebar, first tab) shows your DOM tree as a collapsible hierarchy. Click any layer to select it on the canvas. Drag layers to reorder siblings or reparent elements into new containers.

Use the search bar at the top to find elements by name, type, or text content.

Properties

The Properties panel (right sidebar) lets you edit CSS visually. Select an element on the canvas to see its properties. Changes write directly to your source code.

Available Properties

• Layout — Display, flex direction, justify, align, gap, padding, margin, position, z-index, overflow, width, height.
• Typography — Font family, size, weight, line height, letter spacing, text align, transform, decoration.
• Style — Background color, text color, opacity, box shadow, filters (blur, brightness, contrast).
• Border — Color, width, radius (per-corner), style (solid/dashed/dotted).
• Grid — Template columns/rows, grid placement.
• Transform — Rotate, scale, translate, skew.

Each property updates your source in real time. For Tailwind projects, changes are applied as utility classes. For vanilla CSS, they're written as inline or stylesheet rules.

Code Editor

Switch to the Code workspace (tabs at top) to edit source files directly in a Monaco-powered editor with syntax highlighting, autocomplete, and IntelliSense. Changes sync to the canvas in real time.

Selection & Creation Tools

The ToolRail (left edge) provides quick access to selection and creation tools:

• V Select — Default pointer for clicking and dragging elements.
• H Pan — Drag to pan the canvas (also Space+drag).
• R Frame — Create a new container/div element.
• P Text — Create a new text/paragraph element.
• J Image — Create a new image element.
• N Annotate — Toggle annotation mode to pin notes on elements.

Keyboard Shortcuts

AI Agent — Edit Mode

Open the AI panel (toolbar toggle or chat icon) to interact with the built-in agent. In Edit mode, the agent modifies your current project files based on natural language instructions.

• Select an element on the canvas, then describe what you want changed.
• The agent reads your files, makes targeted edits, and verifies results with screenshots.
• Multi-file editing is supported — the agent can modify HTML, CSS, and JS files in a single pass.

AI Agent — Generate Mode

Switch to Generate mode to create entirely new multi-file projects from a prompt. Describe what you want to build, and the agent scaffolds the full file structure — HTML pages, stylesheets, scripts, and assets.

Generated projects are saved to disk and immediately editable on the canvas.

Agent Tools

The AI agent has access to a set of tools it uses to accomplish tasks:

• read_file / search_file — Read and search project files.
• replace / insert_after — Make precise code edits.
• create_file — Create new files in the project.
• web_search / web_fetch — Search the web and fetch content.
• image_search — Find stock photos from Unsplash.
• google_fonts — Discover and apply fonts.
• animation_kit — Search curated animation snippets.
• preview_screenshot — Capture the canvas at any viewport size.
• visual_compare — Compare current render against a reference mockup.

LLM Providers

Backdraft supports three LLM providers. Configure them in Settings → AI:

• Ollama — Run models locally. Auto-discovers available models.
• LM Studio — Local inference with the LM Studio v1 API.
• OpenRouter — Cloud-hosted models via API key. Access to GPT-4, Claude, Gemini, and more.

No vendor lock-in — switch providers or models at any time.

Font Library

Press F to open the Font Library. Browse the full Google Fonts catalog with live preview, category filters, and one-click CSS injection.

• Search by font name.
• Filter by category (serif, sans-serif, display, handwriting, monospace).
• Click "Copy CSS" to copy the @import statement.
• Click "Apply" to inject the font into your stylesheet and bind it to a CSS variable.

Animation Library

Press A to open the Animation Library. Browse curated animation snippets organized by library:

• GSAP — ScrollTrigger, timeline, stagger effects.
• Animate.css — Entrance, exit, and attention animations.
• AOS — Scroll-triggered reveal animations.
• Pure CSS — Keyframe animations with no dependencies.

Each snippet includes the animation code and required CDN tags. Copy both with one click.

Image Search

Search Unsplash directly from the editor. Find high-resolution stock photos and insert them into your project. The AI agent can also search for images via the image_search tool during editing sessions.

Breakpoints

Backdraft supports standard responsive breakpoints for previewing your project at different screen sizes:

• xs — 375px (mobile)
• sm — 640px
• md — 768px (tablet)
• lg — 1024px
• xl — 1280px (desktop)
• 2xl — 1536px

Switch breakpoints from the canvas toolbar dropdown. Visual property edits can target specific breakpoints for responsive design.

Overwatch

Overwatch renders your entire project simultaneously at desktop, tablet, and mobile viewports. Switch to the Overwatch tab (left sidebar) to see all pages side by side.

• Backdraft auto-discovers all HTML and component files in your project.
• Each page renders at three breakpoints as live tiles.
• Tiles refresh automatically when you save changes.
• Zoom and pan across the tile board to review your full site.

Import Code

Open any folder containing HTML/CSS or React/Tailwind files. Backdraft parses the code and renders it on the canvas. Your file structure appears in the left sidebar for quick navigation.

Supported file types: .html, .css, .tsx, .jsx, .ts, .js.

Figma Import

Import Figma designs directly into Backdraft as editable HTML/CSS. The import wizard walks you through four steps:

• Step 1 — Enter your Figma Personal Access Token.
• Step 2 — Paste the Figma file URL.
• Step 3 — Choose a destination folder on disk.
• Step 4 — Import with optional AI polish for responsive layouts.

Webflow Import

Import any published Webflow site into Backdraft. Enter the site URL and Backdraft crawls the pages, downloads assets, rewrites URLs to local paths, and generates a clean project you can edit.

GitHub

Push your project to GitHub directly from Backdraft. Authenticate with a Personal Access Token, then:

• Push to an existing repository or create a new one.
• AI-generated commit messages in conventional style.
• View diffs before committing.
• Branch management and worktree support.

Netlify

Deploy to Netlify in two clicks. Authenticate with a token, select a site (or create new), configure build settings, and publish. Environment variable management is built in.

CLI Agent Integrations

Backdraft is the first visual editor with native CLI agent integration. Run any of these agents directly from the chat panel:

• Claude Code (Anthropic) — Full agentic coding with tool use.
• Codex (OpenAI) — AI-powered code generation and editing.
• Gemini CLI (Google) — Multimodal AI coding assistant.
• OpenCode (OpenRouter) — Open-source CLI agent.

Agent output streams in real time. File changes sync to the canvas immediately — see AI edits render live as they're written.

Annotations

Press N to enter annotation mode. Click any element on the canvas to pin a note. Type your instruction, tag it with a category (Style, Content, Layout, or Behavior), and move on.

Accumulate as many annotations as you need, then send them all to the AI agent in a single batch. The agent processes each annotation and makes the corresponding edits.

History & Snapshots

File History

Backdraft saves up to 40 versions per file. Open the History dropdown in the toolbar to browse previous versions with timestamps. Click any version to preview it, or restore to overwrite the current file.

Project Snapshots

Save up to 80 full-project snapshots. A snapshot captures the state of every file in your workspace. Restore any snapshot to roll back your entire project.

Undo / Redo

500 levels of undo powered by byte-level CST diffs. Undo tracks changes across file switches — you won't lose history when navigating between files.

Settings

Open Settings from the gear icon at the bottom of the ToolRail. Available sections:

• General — Theme preference, restart onboarding tour.
• AI Assistant — Provider, model, token limits, system prompt.
• Code Editor — Font size, word wrap, minimap, theme.
• GitHub — Personal Access Token, connected account.
• Netlify — Token, connected account, site list.
• License (desktop) — Plan, key, trial status, deactivate.

Supported Formats

HTML / CSS

Full visual editing with CSS variable support, external stylesheet resolution, @import following, and SVG inline rendering.

React / Tailwind

JSX/TSX parsing with component import resolution, className merging, children slot support, and Tailwind v3 & v4 compatibility (including the v4 CSS-first @theme syntax).

Vanilla TypeScript

TypeScript and JavaScript files with import resolution and dynamic script execution in the preview.

SwiftUI (Beta)

Early support for SwiftUI with native preview via Xcode simulator. Code-first editing workflow.