← Back to Editor

Dev Editor — Setup Guide

Connect the visual editor to your localhost project in seconds.

How It Works

Dev Editor is a visual design tool that sits alongside your localhost dev server. It gives you a Webflow-style interface for inspecting elements, editing CSS, and repositioning components — all without touching your source files directly.

When you click Connect, the editor loads your page through a built-in reverse proxy. The proxy fetches your HTML, strips client-side scripts (to prevent routing conflicts), and injects a lightweight inspector script. This inspector communicates with the editor via postMessage — reporting element metadata when you hover or click, and applying style previews in real time.

Every change you make is tracked as a changelog entry with original and new values. When you're done, export the changelog and paste it into Claude Code (or use the built-in Send to Claude Code feature) to have the changes applied to your actual source files.

If automatic injection fails (e.g., non-standard HTML responses), a banner will prompt you to add the script tag manually. The framework guides below show exactly where to place it.

Use Cases

Visual Style Tweaking

Select any element on your page, then adjust colors, spacing, typography, borders, and layout from the right panel. Changes preview instantly in the iframe.

Responsive Design Testing

Switch between Mobile (375px), Tablet (768px), and Desktop (1280px) breakpoints in the top bar. Make per-breakpoint style adjustments and export them all at once.

Layout Debugging

Use the left panel DOM tree (Layers) to navigate the page structure. Click any node to highlight it in the preview. Inspect flexbox and grid properties, then adjust layout in the right panel.

Drag-and-Drop Repositioning

Toggle Free Position mode to drag elements to new positions, or Reorder mode to rearrange siblings within flex and grid containers.

Change Tracking & Export

Every style edit is tracked with original and new values. Review all changes in the Changes tab, undo individual edits, or export a structured changelog.

Claude Code Integration

Click Copy Changelog to get a formatted log you can paste into Claude Code, which reads it and applies the CSS changes to your actual source files. Or use Send to Claude Code for direct CLI integration.

Multi-Page Editing

Navigate between pages using the PageSelector dropdown without leaving the editor. Changes are persisted per-page and included in a combined changelog export.

Quick Start

  1. 1
    Open the Dev Editor

    Go to dev-editor-flow.vercel.app

    Running locally? Start with bun dev (defaults to http://localhost:4000).

  2. 2
    Start your target project

    Run your project's dev server as usual (e.g., npm run dev on port 3000).

  3. 3
    Connect

    Open the Dev Editor in your browser, select your project's port from the dropdown, and click Connect. The inspector activates automatically.

Framework Guides

If the automatic connection doesn't detect the inspector within 5 seconds, add the script tag manually to your project. Select your framework below for the exact file and placement.

Note:The snippets below use the hosted URL. If running Dev Editor locally, replace https://dev-editor-flow.vercel.app with http://localhost:4000 (or your custom port).

App Router

Add to app/layout.tsx

tsx
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://dev-editor-flow.vercel.app/dev-editor-inspector.js"></script>
      </body>
    </html>
  );
}

Pages Router

Add to pages/_document.tsx

tsx
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script src="https://dev-editor-flow.vercel.app/dev-editor-inspector.js"></script>
      </body>
    </Html>
  );
}

Troubleshooting

Inspector script not detected

If the banner appears after 5 seconds, the automatic proxy injection didn't work for your setup. Add the script tag manually using the framework guides above. Make sure your Dev Editor is running on the port shown in the script URL.

CORS or Cross-Origin errors

The Dev Editor proxy runs on a different port than your project. If your project sets strict CORS headers, the proxy may be blocked. The automatic method handles this by serving everything from the same origin. For the manual method, ensure your dev server allows requests from localhost:4000.

COEP / COOP headers blocking the iframe

Some frameworks set Cross-Origin-Embedder-Policy or Cross-Origin-Opener-Policy headers that prevent loading in an iframe. Check your server config or middleware and relax these headers in development.

Infinite iframe reload

This happens when the target page's client-side router detects the proxy URL and redirects. The Dev Editor's proxy strips <script> tags to prevent this. If you still see reloads, check that no inline scripts or meta-refresh tags are causing navigation.

Styles look different in the editor

The proxy serves SSR HTML with CSS intact but strips JavaScript. If your styles depend on client-side JS (e.g., CSS-in-JS runtime injection), some styles may be missing. Use the manual script method with your full dev server if CSS-in-JS is critical.

FAQ