Documentação do Backdraft

Um editor bidirecional código-para-design. Edite visualmente, publique código real.

Visão Geral

O Backdraft é um editor visual que trabalha com seu código-fonte real. Importe um projeto existente — HTML/CSS ou React/Tailwind — e edite-o em um canvas espacial. Cada alteração visual é escrita de volta nos seus arquivos-fonte sem tocar em rotas, estado, chamadas de API ou lógica de negócio.

Ele funciona como app desktop macOS e como app web em app.backdraftai.com.

Instalação

Desktop (macOS)

Baixe o .dmg mais recente em backdraftai.com. Abra o DMG e arraste o Backdraft para Aplicativos. Requer macOS 13 ou superior, Apple Silicon.

O app verifica atualizações automaticamente na inicialização e avisará quando uma nova versão estiver disponível.

Web

Faça login em app.backdraftai.com. A versão web inclui todos os recursos de edição. A importação/exportação usa manuseio de arquivos baseado em navegador.

Seu Primeiro Projeto

Ao iniciar o Backdraft, a Tela de Boas-vindas oferece três formas de começar:

• Abrir um arquivo — Selecione qualquer arquivo .html, .css, .tsx ou .jsx.
• Abrir uma pasta — Carregue um diretório de projeto. O Backdraft descobre todos os arquivos suportados e constrói uma árvore de arquivos.
• Começar de um template — Escolha um projeto inicial da galeria.

Quando um arquivo é carregado, ele renderiza ao vivo no canvas. Clique em qualquer elemento para selecioná-lo, depois use o painel de Propriedades à direita para editar estilos visualmente.

Barra de Ferramentas

A barra de ferramentas fica no topo do editor e dá acesso a operações de arquivo, histórico e ferramentas de IA.

• Abrir — Abra um arquivo ou pasta do disco.
• Recentes — Acesso rápido a arquivos e pastas abertos recentemente.
• Diff — Veja uma comparação lado a lado do original vs. atual.
• Histórico — Navegue pelas versões de arquivos e snapshots do projeto. Restaure qualquer estado anterior.
• Desfazer / Refazer — Até 500 níveis de desfazer, baseados em diffs byte-level.
• Botão IA — Abre o painel de chat com IA.
• Publicar — Faça push para GitHub ou deploy no Netlify.

Canvas

O canvas é uma renderização ao vivo do seu código-fonte dentro de um iframe. Tudo que você vê é HTML/CSS real — não uma simulação.

Navegação

• Pan — Segure Space e arraste, ou use a ferramenta Pan (H).
• Zoom — Cmd+scroll ou use os controles de zoom na barra inferior direita.
• Reset — Clique na porcentagem de zoom para resetar para 100%.

Seleção

• Clique em qualquer elemento para selecioná-lo.
• Arraste para selecionar múltiplos elementos com marquee.
• Cmd+A para selecionar tudo.
• Escape para desselecionar.
• Use os breadcrumbs acima do canvas para navegar até elementos pai.

Edição

• Mover — Arraste elementos selecionados. Guias de alinhamento aparecem automaticamente.
• Redimensionar — Arraste as alças de canto ou borda.
• Nudge — Setas movem 1px; Shift+Seta move 10px.
• Excluir — Backspace ou Delete.
• Duplicar — Cmd+D.
• Copiar / Colar — Cmd+C / Cmd+V.

Controles do Canvas

A barra flutuante no canto inferior direito oferece ferramentas adicionais:

• Box Model — Ative um overlay estilo DevTools mostrando margin, padding, conteúdo e gap.
• Medição — Segure Alt e passe o mouse para ver linhas de distância entre elementos.
• Tema — Alterne pré-visualização claro/escuro para projetos Tailwind.
• Elementos Ocultos — Revele elementos com display:none ou opacity:0.
• Estados Interativos — Pré-visualize estados hover, focus e active.
• Screenshot — Capture a visualização atual do canvas como PNG.

Camadas

O painel de Camadas (barra lateral esquerda, primeira aba) mostra sua árvore DOM como hierarquia colapsável. Clique em qualquer camada para selecioná-la no canvas. Arraste camadas para reordenar irmãos ou mover elementos para novos containers.

Use a barra de busca no topo para encontrar elementos por nome, tipo ou conteúdo de texto.

Propriedades

O painel de Propriedades (barra lateral direita) permite editar CSS visualmente. Selecione um elemento no canvas para ver suas propriedades. As alterações são escritas diretamente no seu código-fonte.

Propriedades Disponíveis

• Layout — Display, flex direction, justify, align, gap, padding, margin, position, z-index, overflow, width, height.
• Tipografia — Família de fonte, tamanho, peso, altura de linha, espaçamento entre letras, alinhamento, transformação, decoração.
• Estilo — Cor de fundo, cor do texto, opacidade, box shadow, filtros (blur, brightness, contrast).
• Borda — Cor, largura, raio (por canto), estilo (solid/dashed/dotted).
• Grid — Template de colunas/linhas, posicionamento no grid.
• Transform — Rotate, scale, translate, skew.

Cada propriedade atualiza seu código-fonte em tempo real. Para projetos Tailwind, as alterações são aplicadas como classes utilitárias. Para CSS vanilla, são escritas como regras inline ou de stylesheet.

Editor de Código

Alterne para o workspace de Código (abas no topo) para editar arquivos-fonte diretamente em um editor baseado em Monaco com syntax highlighting, autocomplete e IntelliSense. As alterações sincronizam com o canvas em tempo real.

Ferramentas de Seleção e Criação

O ToolRail (borda esquerda) dá acesso rápido às ferramentas de seleção e criação:

• V Selecionar — Ponteiro padrão para clicar e arrastar elementos.
• H Pan — Arraste para mover o canvas (também Space+arrastar).
• R Frame — Crie um novo elemento container/div.
• P Texto — Crie um novo elemento de texto/parágrafo.
• J Imagem — Crie um novo elemento de imagem.
• N Anotar — Ative o modo de anotação para fixar notas em elementos.

Atalhos de Teclado

Agente de IA — Modo Edit

Abra o painel de IA (botão na barra de ferramentas ou ícone de chat) para interagir com o agente integrado. No modo Edit, o agente modifica os arquivos do seu projeto atual com base em instruções em linguagem natural.

• Selecione um elemento no canvas, depois descreva o que você quer alterar.
• O agente lê seus arquivos, faz edições direcionadas e verifica os resultados com screenshots.
• Edição multi-arquivo é suportada — o agente pode modificar arquivos HTML, CSS e JS em uma única passagem.

Agente de IA — Modo Generate

Alterne para o modo Generate para criar projetos multi-arquivo completamente novos a partir de um prompt. Descreva o que você quer construir e o agente monta toda a estrutura de arquivos — páginas HTML, stylesheets, scripts e assets.

Os projetos gerados são salvos em disco e imediatamente editáveis no canvas.

Ferramentas do Agente

O agente de IA tem acesso a um conjunto de ferramentas que usa para realizar tarefas:

• read_file / search_file — Ler e buscar em arquivos do projeto.
• replace / insert_after — Fazer edições precisas no código.
• create_file — Criar novos arquivos no projeto.
• web_search / web_fetch — Buscar na web e obter conteúdo.
• image_search — Encontrar fotos no Unsplash.
• google_fonts — Descobrir e aplicar fontes.
• animation_kit — Buscar snippets curados de animação.
• preview_screenshot — Capturar o canvas em qualquer tamanho de viewport.
• visual_compare — Comparar a renderização atual com um mockup de referência.

Provedores de LLM

O Backdraft suporta três provedores de LLM. Configure-os em Configurações → IA:

• Ollama — Execute modelos localmente. Descobre automaticamente os modelos disponíveis.
• LM Studio — Inferência local com a API v1 do LM Studio.
• OpenRouter — Modelos hospedados em nuvem via chave API. Acesso a GPT-4, Claude, Gemini e outros.

Sem lock-in de fornecedor — troque de provedor ou modelo a qualquer momento.

Biblioteca de Fontes

Pressione F para abrir a Biblioteca de Fontes. Navegue pelo catálogo completo do Google Fonts com pré-visualização ao vivo, filtros por categoria e injeção CSS com um clique.

• Busque por nome de fonte.
• Filtre por categoria (serif, sans-serif, display, handwriting, monospace).
• Clique em "Copiar CSS" para copiar o comando @import.
• Clique em "Aplicar" para injetar a fonte no seu stylesheet e vinculá-la a uma variável CSS.

Biblioteca de Animações

Pressione A para abrir a Biblioteca de Animações. Navegue por snippets curados de animação organizados por biblioteca:

• GSAP — ScrollTrigger, timeline, efeitos stagger.
• Animate.css — Animações de entrada, saída e atenção.
• AOS — Animações de revelação acionadas por scroll.
• CSS Puro — Animações keyframe sem dependências.

Cada snippet inclui o código da animação e as tags CDN necessárias. Copie ambos com um clique.

Busca de Imagens

Busque no Unsplash diretamente do editor. Encontre fotos em alta resolução e insira-as no seu projeto. O agente de IA também pode buscar imagens via ferramenta image_search durante sessões de edição.

Breakpoints

O Backdraft suporta breakpoints responsivos padrão para pré-visualizar seu projeto em diferentes tamanhos de tela:

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

Troque de breakpoint pelo dropdown da barra de ferramentas do canvas. Edições visuais de propriedades podem ser direcionadas a breakpoints específicos para design responsivo.

Overwatch

O Overwatch renderiza todo o seu projeto simultaneamente em viewports de desktop, tablet e mobile. Alterne para a aba Overwatch (barra lateral esquerda) para ver todas as páginas lado a lado.

• O Backdraft descobre automaticamente todos os arquivos HTML e de componentes no seu projeto.
• Cada página renderiza em três breakpoints como painéis ao vivo.
• Os painéis atualizam automaticamente quando você salva alterações.
• Faça zoom e navegue pelo quadro de painéis para revisar todo o seu site.

Importar Código

Abra qualquer pasta contendo arquivos HTML/CSS ou React/Tailwind. O Backdraft faz o parsing do código e renderiza no canvas. Sua estrutura de arquivos aparece na barra lateral esquerda para navegação rápida.

Tipos de arquivo suportados: .html, .css, .tsx, .jsx, .ts, .js.

Importação Figma

Importe designs do Figma diretamente para o Backdraft como HTML/CSS editável. O assistente de importação guia você por quatro etapas:

• Etapa 1 — Insira seu Token de Acesso Pessoal do Figma.
• Etapa 2 — Cole a URL do arquivo Figma.
• Etapa 3 — Escolha uma pasta de destino no disco.
• Etapa 4 — Importe com polimento opcional de IA para layouts responsivos.

Importação Webflow

Importe qualquer site Webflow publicado para o Backdraft. Insira a URL do site e o Backdraft rastreia as páginas, baixa assets, reescreve URLs para caminhos locais e gera um projeto limpo que você pode editar.

GitHub

Faça push do seu projeto para o GitHub diretamente do Backdraft. Autentique com um Token de Acesso Pessoal, depois:

• Faça push para um repositório existente ou crie um novo.
• Mensagens de commit geradas por IA no estilo convencional.
• Visualize diffs antes de fazer commit.
• Gerenciamento de branches e suporte a worktree.

Netlify

Faça deploy no Netlify em dois cliques. Autentique com um token, selecione um site (ou crie novo), configure as opções de build e publique. O gerenciamento de variáveis de ambiente está integrado.

Integrações de Agentes CLI

O Backdraft é o primeiro editor visual com integração nativa de agentes CLI. Execute qualquer um desses agentes diretamente do painel de chat:

• Claude Code (Anthropic) — Programação agêntica completa com uso de ferramentas.
• Codex (OpenAI) — Geração e edição de código com IA.
• Gemini CLI (Google) — Assistente de programação multimodal com IA.
• OpenCode (OpenRouter) — Agente CLI open-source.

A saída do agente é transmitida em tempo real. As alterações nos arquivos sincronizam com o canvas imediatamente — veja as edições da IA renderizarem ao vivo conforme são escritas.

Anotações

Pressione N para entrar no modo de anotação. Clique em qualquer elemento no canvas para fixar uma nota. Digite sua instrução, categorize (Estilo, Conteúdo, Layout ou Comportamento) e prossiga.

Acumule quantas anotações precisar, depois envie todas ao agente de IA de uma vez. O agente processa cada anotação e faz as edições correspondentes.

Histórico e Snapshots

Histórico de Arquivos

O Backdraft salva até 40 versões por arquivo. Abra o dropdown de Histórico na barra de ferramentas para navegar pelas versões anteriores com timestamps. Clique em qualquer versão para pré-visualizá-la, ou restaure para sobrescrever o arquivo atual.

Snapshots de Projeto

Salve até 80 snapshots completos do projeto. Um snapshot captura o estado de cada arquivo no seu workspace. Restaure qualquer snapshot para reverter todo o seu projeto.

Desfazer / Refazer

500 níveis de desfazer baseados em diffs byte-level no CST. O desfazer rastreia alterações entre trocas de arquivo — você não perde o histórico ao navegar entre arquivos.

Configurações

Abra Configurações pelo ícone de engrenagem na parte inferior do ToolRail. Seções disponíveis:

• Geral — Preferência de tema, reiniciar tour de integração.
• Assistente de IA — Provedor, modelo, limites de tokens, prompt de sistema.
• Editor de Código — Tamanho da fonte, quebra de linha, minimap, tema.
• GitHub — Token de Acesso Pessoal, conta conectada.
• Netlify — Token, conta conectada, lista de sites.
• Licença (desktop) — Plano, chave, status do teste, desativar.

Formatos Suportados

HTML / CSS

Edição visual completa com suporte a variáveis CSS, resolução de stylesheets externos, acompanhamento de @import e renderização inline de SVG.

React / Tailwind

Parsing de JSX/TSX com resolução de imports de componentes, merging de className, suporte a slots children e compatibilidade com Tailwind v3 & v4 (incluindo a sintaxe CSS-first @theme do v4).

Vanilla TypeScript

Arquivos TypeScript e JavaScript com resolução de imports e execução dinâmica de scripts na pré-visualização.

SwiftUI (Beta)

Suporte inicial para SwiftUI com pré-visualização nativa via simulador Xcode. Fluxo de trabalho focado em código.