Backdraft ドキュメント

双方向コード・デザインエディター。ビジュアルに編集し、実際のコードをデプロイ。

概要

Backdraft は実際のソースコードで動作するビジュアルエディターです。既存のプロジェクト（HTML/CSS または React/Tailwind）をインポートし、空間キャンバス上で編集します。すべてのビジュアル変更はルーティング、ステート、API コール、ビジネスロジックに触れることなくソースファイルに書き戻されます。

macOS デスクトップアプリおよび app.backdraftai.com の Web アプリとして動作します。

インストール

デスクトップ（macOS）

最新の .dmg を backdraftai.com からダウンロードしてください。DMG を開き、Backdraft をアプリケーションフォルダにドラッグします。macOS 13 以降、Apple Silicon が必要です。

アプリは起動時に自動的にアップデートを確認し、新しいバージョンが利用可能な場合にお知らせします。

Web

app.backdraftai.com でサインインしてください。Web 版にはすべての編集機能が含まれます。インポート/エクスポートはブラウザベースのファイル処理を使用します。

最初のプロジェクト

Backdraft を起動すると、ウェルカム画面で3つの方法から開始できます：

• ファイルを開く — .html、.css、.tsx、.jsx ファイルを選択。
• フォルダを開く — プロジェクトディレクトリを読み込み。Backdraft がサポート対象のファイルをすべて検出し、ファイルツリーを構築します。
• テンプレートから開始 — ギャラリーからスタータープロジェクトを選択。

ファイルが読み込まれると、キャンバス上にライブレンダリングされます。要素をクリックして選択し、右側のプロパティパネルでスタイルをビジュアルに編集できます。

ツールバー

ツールバーはエディターの上部に配置され、ファイル操作、履歴、AI ツールへのアクセスを提供します。

• Open — Open a file or folder from disk.
• Recent — Quick access to recently opened files and folders.
• Diff — View a side-by-side comparison of original vs. current source.
• History — Browse file versions and project snapshots. Restore any previous state.
• Undo / Redo — Up to 500 levels of undo, powered by byte-level diffs.
• AI toggle — Opens the AI chat panel.
• Publish — Push to GitHub or deploy to Netlify.

キャンバス

キャンバスは iframe 内のソースコードのライブレンダリングです。表示されるものはすべて本物の HTML/CSS であり、シミュレーションではありません。

ナビゲーション

• Pan — Hold Space and drag, or use the Pan tool (H).
• Zoom — Cmd+scroll or use the zoom controls in the bottom-right bar.
• Reset — Click the zoom percentage to reset to 100%.

選択

• Click any element to select it.
• Drag to marquee-select multiple elements.
• Cmd+A to select all.
• Escape to deselect.
• Use breadcrumbs above the canvas to navigate to parent elements.

編集

• Move — Drag selected elements. Snapping guides appear automatically.
• Resize — Drag corner or edge handles.
• Nudge — Arrow keys move 1px; Shift+Arrow moves 10px.
• Delete — Backspace or Delete.
• Duplicate — Cmd+D.
• Copy / Paste — Cmd+C / Cmd+V.

キャンバスコントロール

右下のフローティングバーに追加ツールがあります：

• Box Model — Toggle a DevTools-style overlay showing margin, padding, content, and gap.
• Measurement — Hold Alt and hover to see distance lines between elements.
• Theme — Toggle light/dark preview for Tailwind projects.
• Hidden Elements — Reveal elements with display:none or opacity:0.
• Interactive States — Preview hover, focus, and active states.
• Screenshot — Capture the current canvas view as PNG.

レイヤー

レイヤーパネル（左サイドバー、最初のタブ）は DOM ツリーを折りたたみ可能な階層として表示します。レイヤーをクリックしてキャンバス上で選択します。レイヤーをドラッグして兄弟要素の並べ替えや新しいコンテナへの移動が可能です。

上部の検索バーで名前、タイプ、テキスト内容から要素を検索できます。

プロパティ

プロパティパネル（右サイドバー）で CSS をビジュアルに編集できます。キャンバス上で要素を選択するとプロパティが表示されます。変更はソースコードに直接書き込まれます。

利用可能なプロパティ

• Layout — Display, flex direction, justify, align, gap, padding, margin, position, z-index, overflow, width, height.
• Typography — Font family, size, weight, line height, letter spacing, text align, transform, decoration.
• Style — Background color, text color, opacity, box shadow, filters (blur, brightness, contrast).
• Border — Color, width, radius (per-corner), style (solid/dashed/dotted).
• Grid — Template columns/rows, grid placement.
• Transform — Rotate, scale, translate, skew.

Each property updates your source in real time. For Tailwind projects, changes are applied as utility classes. For vanilla CSS, they're written as inline or stylesheet rules.

コードエディター

コードワークスペース（上部タブ）に切り替えて、シンタックスハイライト、オートコンプリート、IntelliSense を備えた Monaco エディターでソースファイルを直接編集します。変更はキャンバスにリアルタイムで同期されます。

選択 & 作成ツール

ToolRail（左端）から選択ツールと作成ツールに素早くアクセスできます：

• V Select — Default pointer for clicking and dragging elements.
• H Pan — Drag to pan the canvas (also Space+drag).
• R Frame — Create a new container/div element.
• P Text — Create a new text/paragraph element.
• J Image — Create a new image element.
• N Annotate — Toggle annotation mode to pin notes on elements.

キーボードショートカット

AI エージェント — 編集モード

AI パネル（ツールバーのトグルまたはチャットアイコン）を開いて、内蔵エージェントと対話します。編集モードでは、エージェントが自然言語の指示に基づいて現在のプロジェクトファイルを修正します。

• Select an element on the canvas, then describe what you want changed.
• The agent reads your files, makes targeted edits, and verifies results with screenshots.
• Multi-file editing is supported — the agent can modify HTML, CSS, and JS files in a single pass.

AI エージェント — 生成モード

生成モードに切り替えて、プロンプトからまったく新しいマルチファイルプロジェクトを作成します。構築したいものを説明するだけで、エージェントが HTML ページ、スタイルシート、スクリプト、アセットを含む完全なファイル構造を構築します。

生成されたプロジェクトはディスクに保存され、キャンバス上ですぐに編集可能です。

エージェントツール

AI エージェントはタスクを遂行するためのツールセットにアクセスできます：

• read_file / search_file — Read and search project files.
• replace / insert_after — Make precise code edits.
• create_file — Create new files in the project.
• web_search / web_fetch — Search the web and fetch content.
• image_search — Find stock photos from Unsplash.
• google_fonts — Discover and apply fonts.
• animation_kit — Search curated animation snippets.
• preview_screenshot — Capture the canvas at any viewport size.
• visual_compare — Compare current render against a reference mockup.

LLM プロバイダー

Backdraft は3つの LLM プロバイダーに対応しています。設定 → AI で構成してください：

• Ollama — Run models locally. Auto-discovers available models.
• LM Studio — Local inference with the LM Studio v1 API.
• OpenRouter — Cloud-hosted models via API key. Access to GPT-4, Claude, Gemini, and more.

No vendor lock-in — switch providers or models at any time.

フォントライブラリ

Press F to open the Font Library. Browse the full Google Fonts catalog with live preview, category filters, and one-click CSS injection.

• Search by font name.
• Filter by category (serif, sans-serif, display, handwriting, monospace).
• Click "Copy CSS" to copy the @import statement.
• Click "Apply" to inject the font into your stylesheet and bind it to a CSS variable.

アニメーションライブラリ

Press A to open the Animation Library. Browse curated animation snippets organized by library:

• GSAP — ScrollTrigger, timeline, stagger effects.
• Animate.css — Entrance, exit, and attention animations.
• AOS — Scroll-triggered reveal animations.
• Pure CSS — Keyframe animations with no dependencies.

Each snippet includes the animation code and required CDN tags. Copy both with one click.

画像検索

Search Unsplash directly from the editor. Find high-resolution stock photos and insert them into your project. The AI agent can also search for images via the image_search tool during editing sessions.

ブレークポイント

Backdraft supports standard responsive breakpoints for previewing your project at different screen sizes:

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

Switch breakpoints from the canvas toolbar dropdown. Visual property edits can target specific breakpoints for responsive design.

Overwatch

Overwatch renders your entire project simultaneously at desktop, tablet, and mobile viewports. Switch to the Overwatch tab (left sidebar) to see all pages side by side.

• Backdraft auto-discovers all HTML and component files in your project.
• Each page renders at three breakpoints as live tiles.
• Tiles refresh automatically when you save changes.
• Zoom and pan across the tile board to review your full site.

コードインポート

Open any folder containing HTML/CSS or React/Tailwind files. Backdraft parses the code and renders it on the canvas. Your file structure appears in the left sidebar for quick navigation.

Supported file types: .html, .css, .tsx, .jsx, .ts, .js.

Figma インポート

Import Figma designs directly into Backdraft as editable HTML/CSS. The import wizard walks you through four steps:

• Step 1 — Enter your Figma Personal Access Token.
• Step 2 — Paste the Figma file URL.
• Step 3 — Choose a destination folder on disk.
• Step 4 — Import with optional AI polish for responsive layouts.

Webflow インポート

Import any published Webflow site into Backdraft. Enter the site URL and Backdraft crawls the pages, downloads assets, rewrites URLs to local paths, and generates a clean project you can edit.

GitHub

Push your project to GitHub directly from Backdraft. Authenticate with a Personal Access Token, then:

• Push to an existing repository or create a new one.
• AI-generated commit messages in conventional style.
• View diffs before committing.
• Branch management and worktree support.

Netlify

Deploy to Netlify in two clicks. Authenticate with a token, select a site (or create new), configure build settings, and publish. Environment variable management is built in.

CLI エージェント統合

Backdraft is the first visual editor with native CLI agent integration. Run any of these agents directly from the chat panel:

• Claude Code (Anthropic) — Full agentic coding with tool use.
• Codex (OpenAI) — AI-powered code generation and editing.
• Gemini CLI (Google) — Multimodal AI coding assistant.
• OpenCode (OpenRouter) — Open-source CLI agent.

Agent output streams in real time. File changes sync to the canvas immediately — see AI edits render live as they're written.

アノテーション

Press N to enter annotation mode. Click any element on the canvas to pin a note. Type your instruction, tag it with a category (Style, Content, Layout, or Behavior), and move on.

Accumulate as many annotations as you need, then send them all to the AI agent in a single batch. The agent processes each annotation and makes the corresponding edits.

履歴 & スナップショット

ファイル履歴

Backdraft saves up to 40 versions per file. Open the History dropdown in the toolbar to browse previous versions with timestamps. Click any version to preview it, or restore to overwrite the current file.

プロジェクトスナップショット

Save up to 80 full-project snapshots. A snapshot captures the state of every file in your workspace. Restore any snapshot to roll back your entire project.

Undo / Redo

500 levels of undo powered by byte-level CST diffs. Undo tracks changes across file switches — you won't lose history when navigating between files.

設定

Open Settings from the gear icon at the bottom of the ToolRail. Available sections:

• General — Theme preference, restart onboarding tour.
• AI Assistant — Provider, model, token limits, system prompt.
• Code Editor — Font size, word wrap, minimap, theme.
• GitHub — Personal Access Token, connected account.
• Netlify — Token, connected account, site list.
• License (desktop) — Plan, key, trial status, deactivate.

対応フォーマット

HTML / CSS

Full visual editing with CSS variable support, external stylesheet resolution, @import following, and SVG inline rendering.

React / Tailwind

JSX/TSX parsing with component import resolution, className merging, children slot support, and Tailwind v3 & v4 compatibility (including the v4 CSS-first @theme syntax).

Vanilla TypeScript

TypeScript and JavaScript files with import resolution and dynamic script execution in the preview.

SwiftUI (Beta)

Early support for SwiftUI with native preview via Xcode simulator. Code-first editing workflow.