Dev Canvas Studio

06Visual CSS editor for Claude Code

Side-panel inspectorLive CSS previewClaude Code bridgeLocal-first

Edit your app visually, ship the diff to your source.

Inspect any element on your localhost app, tweak its styles in Chrome's side panel with live preview, then send the diff to Claude Code over a local bridge to update your real source. Framework-aware, Tailwind-ready, local-first, and free.

Add to Chrome See how it works

No account, no analytics — changes reach your source only through a localhost bridge you control.

(01)Features

A design surface wired straight into your codebase.

Click-to-inspect any element

A visual overlay lets you select any element on the page and read its full style picture — position, layout, type, color, borders, and shadows — without digging through DevTools.

Preview changes live

Adjust any property and watch the page update in real time before you commit. Experiment freely — nothing touches your source until you choose to send it.

A full design panel

Layout, spacing, typography, backgrounds, gradients, borders, multi-layer shadows, transforms, animations, pseudo-states, responsive preview, a WCAG contrast checker, and reusable style presets — all in the side panel.

Push diffs to Claude Code

Queue your visual edits and send them as precise style diffs to Claude Code through a local bridge (MCP). It maps the element back to its source location and updates the real file — not just the live DOM.

Framework & Tailwind aware

Detects React, Vue, Svelte, Angular, Next.js, and Nuxt, maps DOM nodes to source, and can express CSS changes as Tailwind utility classes so the diff fits how your project is actually written.

Local-first and built to fail safely

No accounts, no analytics. Settings, presets, and queued changes live in local Chrome storage, and code only changes through a localhost bridge you configure and trigger. Bridge disconnects and bad states surface as contained errors, never a crashed panel.

(02)How it works

From pixel to pull request in three steps.

  1. 1

    Open the side panel

    Pin Dev Canvas Studio and open it beside your localhost app. There is no account and nothing to sign in to.

  2. 2

    Inspect and restyle

    Click an element, then adjust layout, type, color, borders, shadows, and more — previewing every change live on the page.

  3. 3

    Send it to Claude Code

    Start the local bridge, then push your queued diffs to Claude Code. It edits the matching source files so your visual change lands as real code.

(03)Privacy

Local-first by design — your code stays yours.

  • No accounts, no analytics, and no advertising SDKs — the extension itself does not send your page data to any remote public service.
  • Settings, style presets, and queued changes are stored locally in Chrome storage on your device.
  • Source-code changes happen only through a localhost bridge that you explicitly configure and trigger — bridge transfers stay between your browser and your own machine.
  • Least-privilege in practice: inspection runs on the tab you open the panel on, and the apply-to-source step is opt-in and local-first.

(04)FAQ

Questions, answered.

What does Dev Canvas Studio do?

It's a visual UI inspector and CSS editor in Chrome's side panel. You select an element, change its styles with live preview, and optionally send those changes as diffs to Claude Code over a local bridge so it can update your actual source files.

Do I need Claude Code and a bridge to use it?

Only for the apply-to-source workflow. Inspecting elements, previewing CSS changes, generating prompts, and keeping a local history all work on their own. To turn a visual edit into a source-code change, you run the local bridge so Claude Code can apply it.

Does it work on any website or just localhost?

You can inspect and preview changes on any page. Applying changes to source is intentionally local-first — it targets your localhost project through the bridge — so the code-writing side is kept separate from remote sites.

Which frameworks does it support?

It detects React, Vue, Svelte, Angular, Next.js, and Nuxt, maps DOM elements back to source, and can output Tailwind utility classes when your project uses Tailwind.

Does it send my code or page data anywhere?

No remote service is involved by default — there are no analytics or accounts, and settings and changes are stored locally. The only data transfer is the style diffs you choose to send to a localhost bridge you control.

What happens if the bridge is offline?

The panel keeps working: you can still inspect, preview, queue changes, and generate prompts. Disconnects are surfaced clearly instead of crashing the UI — it's designed to fail safely.

Which browsers are supported?

Chrome and other Chromium browsers (Edge, Brave, Arc) on Manifest V3 with side-panel support. Firefox and Safari are not supported.

Ready to design in the browser?

Dev Canvas Studio is a free, on-device Chrome extension.

Add to Chrome