Guide

A visual editor for
Claude Code.

Claude Code is very good at writing the code and structurally incapable of seeing the result. Everything awkward about designing with it follows from that one gap — and closing it is less about a better prompt than about a different place to run it.

Last revised on 25 August 2026

The short answer

Claude Code has no visual editor of its own, and cannot: it is a terminal agent that reads and writes files, with no picture of the page those files produce. A visual editor has to come from the environment you run it in.

Clodex is that environment. It runs Claude Code against your real project on your own machine, renders the project in a live preview, and docks design tools onto that preview — so you select the element you want changed and change it by hand, instead of describing it in a prompt and hoping.

The edits are ordinary code in your ordinary files. Nothing is exported, nothing is proprietary, and Claude Code keeps working on the same repository it was already working on.

The gap this closes

Ask Claude Code to build a pricing section and it will do a competent job. Ask it to nudge the middle card up by eight pixels and you are suddenly doing something strange: describing a spatial change, in words, to something that cannot see space.

You know exactly what you want. You can see it. But the only channel available is prose, so you write “make the middle card slightly more prominent” and get back a change to the border colour. You clarify. It changes the shadow. You clarify again and it rewrites the whole section, including the two things you liked.

This is not a failure of the model, and a better prompt does not fix it. It is a translation loss that exists because the agent's only representation of your page is the source text, while yours is the rendered picture. Every round trip pays that cost twice — once when you convert the picture into a description, and once when the agent converts the description back.

The fix is not a smarter agent. It is giving the picture back to the person who already has it, and giving the agent back the job it is genuinely good at.

What you can edit

These are the design tools that ride on the live preview. They act on the rendered element you clicked, and each one resolves to ordinary code in the file that produced it.

Move and resize
Drag an element to a new position or pull its handles to a new size. The change lands as layout code, not as an absolute-positioned patch over the top of your stylesheet.
Spacing
Adjust padding and margins on the element you selected and watch the surrounding layout respond as you do it — the part that is genuinely hard to hold in your head from a prompt.
Colour and typography
Recolour a surface, a border or a piece of text; change the face, size, weight or leading. Applied to the real declaration rather than bolted on as an override.
Text, in place
Click the copy on the page and retype it. No hunting for which component holds the string, and no prompt round trip to fix a typo.
Z‑index and layering
Push an element in front of or behind its neighbours directly, instead of guessing at stacking contexts from the source.
Crop and feather
Reframe and soften images in place, so an asset that is nearly right does not need a trip out to another application and back.
Box it and ask
Draw a region around anything on the preview and send that region to chat. The agent gets the target as a selection rather than as your description of it — the whole problem, solved from the other end.
Generate an image
Produce real images on any model, Claude included, without leaving the app or breaking the loop to go and find a placeholder.

The round trip

The sequence matters more than any single tool, because the argument for a visual editor is that the loop closes — you are never handing work off and waiting to see what comes back.

Claude Code builds
You describe the thing you want in plain language and the agent writes it, in your project, on your machine, on your own Claude subscription. This part is unchanged — it is the part that already worked.
The preview renders it
The result appears next to the conversation as a live page rather than a diff. You are looking at the thing itself, at the moment it exists.
You edit what is wrong
Select the element and fix it by hand. The eight-pixel nudge takes about a second and costs no tokens, no round trip and no risk that the rest of the section gets rewritten around it.
The edit is written to source
Your change goes into the real file as ordinary code, with metadata recording where it came from. There is no separate design document to keep in sync and nothing to export.
Claude Code picks up from there
The next prompt runs against the files as they now are, including your edits. The agent and the design tools are working on one artefact, not two.

Changing your mind mid-run

Seeing the work live changes when you can intervene, not just how. Watching a build head somewhere you did not intend is the moment you most want to say something, and it is usually the moment you cannot — the conventional options are to let it finish and then undo it, or kill the run and start over.

Live Ask is the third option: update the running prompt, or add another alongside it, without stopping or restarting. It is a small mechanic that mostly matters because of what the preview makes visible — you can see the mistake early enough for a correction to still be cheap.

What it does not do

Worth being direct about the boundaries, because most of them are deliberate.

Boundaries
  • It does not replace Claude Code. There is no Clodex model. The agent does the building; the visual layer sits on top of it. If Claude Code is not something you want to use, this is not the tool that changes your mind.
  • It does not come with a Claude subscription. You bring your own Claude plan or Anthropic API key. Clodex does not resell tokens or meter your agent usage, which also means it cannot give you any.
  • It is a desktop application. Windows 10, Windows 11 and macOS. Your project files and credentials stay on your machine, which is the point, but it does mean there is nothing to open in a browser tab.
  • It does not generate a project for you. Clodex opens a real project you already have. If you want something built from nothing on a fixed template, a hosted app generator is a better fit for that specific job.
  • There is no free tier. Three paid plans, and Pro is free for the first three days so you can find out whether the loop actually helps before paying for it.

Getting started

You need a Claude subscription or an Anthropic API key first — Claude Code is what does the building, and Clodex cannot do anything without it. Anthropic's documentation covers installing Claude Code and what it can do on its own.

After that, download Clodex, open a project folder you already have, and start a prompt. The preview appears beside the conversation, and the design tools are on it from the first render. If you also run Codex, the same preview and the same tools work with it.

Common questions

Does Claude Code have a visual editor?

Not on its own. Claude Code is a terminal agent — it reads and writes files and has no picture of the page those files produce. A visual editor has to come from the environment you run it in.

Clodex is a desktop app that runs Claude Code against your project, renders the result in a live preview, and docks design tools onto that preview so you can edit the rendered output directly.

Can I edit what Claude Code builds without writing code?

Yes. You select the element on the live preview and change it by hand — move it, resize it, adjust padding and margins, change colour, typography or z-index, or retype the copy in place. The edit is written back into your real source files as ordinary code.

You do not have to find the selector, and you do not have to describe the change in a prompt. The source is still right there if you would rather open it.

Do my visual edits survive the next Claude Code run?

They are ordinary code in your ordinary files, so they behave exactly like an edit you typed yourself — and they are subject to the same thing any edit is: a later instruction broad enough to rewrite that area will rewrite it. Clodex records metadata about where each visual change came from.

The practical protection is the one you already use with any coding agent. Commit before you hand the project back to it, and scope the next prompt to the part you actually want changed.

Do I still need a Claude subscription?

Yes. Clodex does not resell tokens and adds no meter on top of your Claude Code usage — it runs on the Claude subscription or Anthropic API key you already have. That is required before Clodex can do anything, and it is why there is no Clodex model anywhere in the loop.

The one thing Clodex does pay for on your behalf is dictation, which is why dictation credits are the only metered thing and the only difference between the plans.

Can I change a prompt while Claude Code is still running?

Yes — that is Live Ask. Update the prompt mid-run or start another one in parallel, without stopping or restarting the agent.

It matters most in combination with the preview: you can see the run heading somewhere you did not intend while the correction is still cheap, rather than after it has finished.

Is this the same as the Clodex npm package?

No — different project, different authors, no relationship. There is an unrelated open-source package also called clodex that routes OpenAI models into the Claude Code CLI.

This page is about Clodex the desktop application at useclodex.com: a graphical app for Windows and macOS with a live preview and visual design tools. Not a CLI, not an npm package.

Stop describing the pixel.

Run Claude Code where you can see what it built — and reach in and change it.

Windows 10 and 11, 64-bit · macOS on Apple silicon or Intel · Pro free for three days

Keep reading
Sources
  • Claude Code documentation — Anthropic's own overview of what the agent does and how to install it.
  • Clodex security — where credentials live, what the agent can reach, and how to report a vulnerability.