bidirectional editing

Change the code, see it on canvas.
Change the canvas, see it in code.

Backdraft is a bidirectional code-design editor. Your source files are the design file — no translation layer, no proprietary format, no export step.

Try it free Watch demo

the concept

One source of truth. Two ways to edit it.

In a bidirectional code-design editor, the code and the visual canvas are two views of the same file. Edit a padding value in the code editor — it updates on the canvas instantly. Drag an element on the canvas — the corresponding CSS or JSX is updated in your file.

This is different from design-to-code tools (which generate code you cannot easily edit back) and different from code editors (which have no visual canvas). Bidirectional means changes flow both ways, and the source file is always the single source of truth.

the problem

Most tools force you to choose.

Design tools

Figma, Webflow, Framer

Design visually, then export code. But the exported code is generated — hard to maintain, impossible to round-trip. Change the code and the design tool does not know.

One-way output

Code editors

VS Code, WebStorm

Write code with full control. But you cannot see the result until you switch to a browser. Layout changes are trial-and-error.

No visual canvas

Bidirectional

Backdraft

Edit code or canvas — changes flow both ways. Your source file is always the truth. No export, no generated code, no lock-in.

Two-way sync

how it works

Three steps. Zero lock-in.

1

Import

Open any project folder. Backdraft parses your HTML, CSS, React, and Tailwind files and renders them on a spatial canvas.

2

Edit

Select an element on the canvas or click into the code editor. Change styles, layout, content, or structure. Changes sync bidirectionally in real time.

3

Ship

Your files are already code. Commit with Git, deploy to Netlify, open in VS Code — there is nothing to export because there was never a proprietary format.

code preservation

Your code stays yours.

Backdraft uses CST (Concrete Syntax Tree) patching — not code generation. Only the visual property you changed is modified. Comments, formatting, business logic, types, and file structure stay exactly as you wrote them. Git diffs are minimal and reviewable.

See how Backdraft preserves your code when you import an existing project — including a line-by-line diff example.

frameworks

Works with what you already use.

HTML/CSS and React/Tailwind (v3 + v4) are fully supported. Figma and Webflow import paths let you bring designs in as editable code.

All import paths →

alternatives

How bidirectional editing compares.

Feature Design-to-code tools Code editors Bidirectional (Backdraft)
Visual editing Yes No Yes
Code editing Limited / none Yes Yes
Works with existing code No (generates new) Yes Yes
Round-trip sync No No Yes
Code preservation No (regenerates) N/A Yes (CST patching)
Lock-in risk High (proprietary format) None None
Import Code Editor AI Code Editor

See bidirectional editing in action.

Import a project. Change something on the canvas. Watch it appear in your code.

Start free trial See pricing