A visual editor for your React code.
Import your React and Tailwind project. Edit components on a spatial canvas. Every change writes back to your JSX — preserving hooks, logic, and types.
React
Tailwind CSS
TypeScript
Not a page builder. A code editor with a canvas.
Backdraft works with your real source files — not an abstraction layer on top of them.
Your actual files
Backdraft opens your .jsx and .tsx files directly. No import wizard, no code generation. Your file is the source of truth, and the canvas is a live view of it.
Component resolution
Import a <Header> component? Backdraft follows the import, parses the component file, and renders it inline — with merged classNames, forwarded children, and resolved props. Up to 5 levels deep, including barrel file re-exports.
Tailwind v3 + v4
Backdraft detects your Tailwind version automatically. Custom configs (tailwind.config.ts) are loaded and applied. Tailwind v4's @theme, @custom-variant, and @utility directives are fully supported.
components
See your components rendered — with their real props.
Most visual editors treat components as black boxes. Backdraft resolves them: it follows your import statements, reads the component source, parses the JSX, and inlines the result into the canvas tree.
This means you see what your users see — not a placeholder. And you can click into any part of a resolved component to inspect or edit it.
className merging — parent and component classes are combined correctly
Children forwarding — {children} and {props.children} slots are rendered in place
Style merging — inline styles from parent and component are composited
Barrel file resolution — export { Button } from './Button' is followed automatically
Depth limit — 5 levels of nesting, with cycle detection
tailwind
Tailwind v3 and v4. Custom configs. Dark mode.
Backdraft detects your Tailwind version and applies the right rendering pipeline automatically. Your custom config, your theme tokens, your utility classes — all of it works on the canvas.
Tailwind v3 via CDN with custom tailwind.config injection
Tailwind v4 via @tailwindcss/browser@4 CDN — auto-detected
@theme, @custom-variant, @utility directives
oklch() color functions
Dark mode toggle in canvas (sets class="dark" on <html>)
Responsive breakpoint preview — all breakpoints visible at once
Template literal className support
Shorthand consolidation (e.g., px-4 py-4 → p-4)
jsx
Your JSX is not static. Neither is the canvas.
Backdraft handles real-world React patterns:
Ternary expressions
condition ? <A /> : <B /> renders the consequent by default
.map() iterations
All items are rendered, not just the first
Logical AND
isVisible && <Component /> renders the component
Object.entries().map()
Dynamic key-value rendering works
These are not approximations — Backdraft evaluates the JSX structure and renders every branch that can be statically determined.
properties
50+ CSS properties. Edit them visually.
Select any element on the canvas and edit its styles through an intuitive property panel. Every change writes the corresponding Tailwind class or CSS property back to your source file.
Layout
display, flexbox, grid, gap, alignment
Spacing
margin, padding (box model overlay)
Size
width, height, min/max, aspect-ratio
Typography
font, size, weight, line-height, color
Border
width, radius, color, style
Background
color, gradient, image
Effects
opacity, box-shadow, transform
Position
static, relative, absolute, fixed, sticky, z-index
ai agent
An AI agent that understands your components.
Tell the agent "make the hero section responsive" and it will:
Read your component files to understand the structure
Edit the JSX and Tailwind classes across multiple files
Take a screenshot at each breakpoint
Compare the result to your reference mockup
Iterate if something does not match
The agent works across files — it can update a parent page and a child component in the same conversation. And because it uses your actual source files (not a generated copy), every edit is immediately visible on the canvas.
agent capabilities
Explore more capabilities
Backdraft is more than a React editor. Explore how it handles bidirectional sync, Tailwind editing, AI-powered coding, and code imports.
Bidirectional Code-Design
Edit code or canvas — changes sync both directions. CST-preserving, deterministic.
Tailwind Visual Builder
Visual controls for every Tailwind utility. Custom configs and v4 support built in.
AI Code Editor
An agentic loop that reads, edits, screenshots, and iterates on your code.
Import Code Editor
Open existing HTML, React, or Tailwind projects directly. No conversion step.
Open your React project in Backdraft.
See your components on a canvas. Edit them visually. Ship the same JSX.