existing code

Your project already exists. Now see it on a canvas.

Most visual editors start you with a blank page. Backdraft starts with the code you have already written — your HTML, your React components, your Tailwind classes. Open a folder, and your project appears on a spatial canvas, rendered live and ready to edit. Nothing is regenerated. Nothing is lost.

HTML5HTML5 CSS3CSS3 ReactReact Tailwind CSSTailwind CSS TypeScriptTypeScript FigmaFigma WebflowWebflow
Import your project See how it works

the problem

Visual tools start from scratch. Your code does not.

You have a landing page you built last month. A React app your team has shipped for a year. A Webflow site a client handed off. A Figma prototype that was converted to HTML.

Every one of these is a real project with real code. But most visual editors cannot open them. They want you to rebuild from scratch — in their format, in their system, with their lock-in.

Backdraft takes the opposite approach. Point it at a folder on your machine and it reads what is already there. Your files become the canvas. Your code stays your code.

Your existing project

Other tools

Cannot open your files
Rebuild from scratch
Proprietary format
Export lossy code

Two sources of truth

Backdraft

Code
Canvas
Opens your files directly
Edits sync both ways
No export, no lock-in

One source of truth

code preservation

We do not rewrite your code. We patch it.

When you change a padding value on the canvas, Backdraft does not regenerate your file. Only the specific CSS declaration or JSX attribute you changed is modified.

The rest of your file — every comment, every blank line, every variable name, every event handler — stays exactly as you wrote it. Your git diffs are minimal and reviewable.

styles.css — 1 line changed
  .hero {
    display: flex;
    align-items: center;
-   padding: 2rem;
+   padding: 3rem;
    /* TODO: add responsive breakpoint */
    background: var(--bg-surface);
  }

One line changed. Comments preserved. Git history stays clean.

compatibility

If it is code, it opens.

Open a project folder, paste from Figma, or import a Webflow export. Backdraft reads what you give it and renders it on the canvas.

Category What works
HTML / CSS Static sites, multi-page projects, external stylesheets, @import chains, CSS variables, media queries, @font-face, SVG inlining
React / JSX / TSX Functional components, hooks, ternary expressions, .map() iterations, logical AND rendering, Object.entries(), template literal classNames
Tailwind CSS v3 (CDN + custom config), v4 (@theme, @utility, @custom-variant, oklch()), dark mode, responsive prefixes, arbitrary values
Component imports Named imports, default imports, barrel file re-exports, up to 5 levels of nesting, className merging, children forwarding, style merging
Asset handling Images (relative paths resolved), SVG (data URI inlining), fonts (Google Fonts @import to link tag conversion), external CDN resources
Figma Paste frames, convert to structured HTML/CSS or React/Tailwind code
Webflow Open exported folder, full project on canvas with parsed HTML and CSS
Dynamic expressions Ternary (shows consequent), .map() (all iterations), logical AND, Object.entries().map()

what comes next

Import is step one. Here is what you can do next.

Edit visually, see it in code.

Every canvas edit writes back to your source files bidirectionally.

Learn more

AI agent edits.

Describe what you want. The agent edits across files and verifies with screenshots.

Learn more

React components.

See resolved components with their real props, children, and styles.

Learn more

Tailwind visually.

Change a padding on the canvas, see p-2 → p-4 in code.

Learn more

Open your project in Backdraft.

Point it at a folder. See your code on a canvas. Start editing.

Start free trial See pricing