macOS
Nodebook
AI chat on an infinite canvas. Branch a conversation instead of losing it.
Web
Backdraft
Import your codebase, edit it on a visual canvas, and every change writes back to your real source.
Web
Import your codebase, edit it on a visual canvas, and every change writes back to your real source.
Requirements
Links
What it does
A layer between raw code and the canvas translates both ways, across a growing library of frameworks.
Two years of refined prompts pull structure, color, type, and components out of any mockup.
Every page in the project rendered at once, at desktop, tablet, and mobile.
Gemini for the first pass, Claude Code and Codex for the long edit. The right model for each phase.
Overview
Backdraft imports your codebase and lets you edit it on a spatial canvas. Move a component, resize an element, change a color, and the edit writes back to your real source, with your formatting and naming intact. It isn't a generator that owns the output. It works on the code you already wrote.
Open an HTML and CSS site, a React and Tailwind app, or a Vue project. The layer tree mirrors your DOM, the canvas renders the page, and the code panel stays in sync with both.
How it works
Between your raw code and the canvas sits an adapter system. It reads every file, works out how each framework expresses layout, and renders it the way a browser would. When you edit visually, it reverses the process and writes clean code back to the same files you would open in your editor.
An AI agent handles the parts that eat a designer's afternoon: pulling a design system out of a screenshot, sourcing images, scaffolding pages. It runs on whichever model fits the phase. Gemini for the first creative pass, Claude Code and Codex for sustained editing.
