Guide

A visual editor for Codex

Codex is built for delegation — hand off a task, go and do something else, collect the result. That is genuinely the best thing about it, and on interface work it is also the problem: what comes back is a branch, and a branch is not something you can look at.

Last revised on 25 August 2026.

The short answer

Codex has no visual editor, and the way it is designed makes one harder to miss. It works in a terminal or a cloud sandbox and returns changed files — it has no rendered view of the interface those files produce.

Clodex supplies the missing half. It runs Codex against your real project on your own machine, renders that project in a live preview, and puts design tools on the preview — so you review the interface rather than the diff, and fix what is wrong by selecting it.

Your edits are ordinary code in your ordinary files, so the next Codex task runs against them like any other commit. Nothing is exported and nothing is proprietary.

The delegation blind spot

The Codex workflow is a good one. You specify a task properly, hand it off, and stop thinking about it. Later there is a branch waiting. For a migration, a test suite, a refactor with a clear definition of done, this is close to ideal — the work happened while you were not watching, and not watching was the point.

Then you point it at a settings page, and the same shape stops working. The task completes. The tests pass. The diff is clean and does exactly what you asked. And the page is subtly wrong in a way that nothing in that report could have told you — the spacing above the section header is now inconsistent with every other page, the new control sits too close to the one beside it, the empty state reads as a bug.

None of that is a defect Codex could have caught. It did what was specified. The specification simply could not contain the part that mattered, because the part that mattered is visual and the whole exchange was textual from end to end.

Delegation assumes you can evaluate the result when it arrives. On interface work you cannot, and so the loop that made Codex valuable quietly stops closing.

Why the diff is the wrong review surface

The instinct is to read the diff harder. It does not help much, because a diff answers a different question than the one you have.

A diff tells you what changed in the source. What you need to know is what changed on the screen, and the relationship between those two is exactly the thing that is difficult — which is, after all, why the agent was doing it. Twelve changed declarations across four files might be invisible or might have moved everything four pixels; you cannot tell by reading them, and you would not have delegated the work if you could.

So the real review happens later, in a browser, after a checkout and a build — at which point you are looking at the right artefact but have lost the connection back to the source, and the fix becomes another task, another handoff, another wait.

The shorter path is to make the rendered result the thing you receive in the first place, and to make it directly editable.

What you can edit directly

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

Move and resize
Drag an element into place or pull its handles to a new size. It lands as layout code, not as an absolute-positioned patch over your stylesheet.
Spacing
Adjust padding and margins and watch the surrounding layout respond — the exact class of problem a task report cannot surface and a diff cannot show you.
Colour and typography
Recolour a surface, a border or 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 second task to fix a label.
Z‑index and layering
Push an element in front of or behind its neighbours directly, instead of inferring 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 receives the target as a selection instead of your description of it.
Generate an image
Produce real images on any model without leaving the app or breaking the loop to go and find a placeholder.

The review loop

The change is not that Codex works differently. It is that the gap between the work finishing and you being able to judge it collapses to nothing.

Codex runs the task
Specify it the way you already do. It reads AGENTS.md from your repository exactly as it would in a terminal, on your own ChatGPT plan or OpenAI key.
You receive a page, not a diff
The result renders live beside the conversation. The first thing you see is the interface, in the state the change left it in.
You fix what is wrong, directly
Select the element and correct it by hand. The inconsistent spacing takes a second and costs no tokens, no follow-up task and no wait.
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 design document to reconcile and nothing to export.
The next task starts from there
Codex runs against the files as they now are. Your corrections are part of the repository, not notes attached to it.

Running Codex and Claude Code together

Most people who use both seriously keep both, because they fail in different places — and the practical cost of that is usually two terminals and a lot of alt-tabbing. They are separate programs editing the same files on disk, each reading its own instructions file: AGENTS.md for Codex, CLAUDE.md for Claude Code.

Clodex runs them side by side against one project and one preview, which is the specific problem it was built for. If you are still deciding between them, the comparison covers where each one runs, how you configure it and what it actually costs. The Claude Code guide covers the same design tools from the other agent's side.

What it does not do

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

Boundaries
  • It does not replace Codex. There is no Clodex model. The agent does the building; the visual layer sits on top of it.
  • It does not come with a ChatGPT subscription. You bring your own plan or OpenAI API key. Clodex does not resell tokens or meter your agent usage, which also means it cannot give you any.
  • It does not change how Codex works. Your AGENTS.md, your repository conventions and your task style are untouched. Clodex adds a rendered view around the agent, not a layer between it and your project.
  • It is a desktop application. Windows 10, Windows 11 and macOS. Files and credentials stay on your machine, which is the point, but there is nothing to open in a browser tab.
  • 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 ChatGPT subscription or an OpenAI API key first — Codex is what does the building, and Clodex cannot do anything without it. OpenAI's AGENTS.md guide covers how Codex reads project instructions and how they layer.

After that, download Clodex, open a project folder you already have, and give it a task. The preview appears beside the conversation and the design tools are on it from the first render.

Common questions

Does Codex have a visual editor?

No. Codex works in a terminal or a cloud sandbox and returns changed files or a pull request. It has no rendered view of the interface those files produce, so it cannot offer a visual editor — that has to come from the environment you run it in.

Clodex is a desktop app that runs Codex against your real project, renders the result in a live preview, and puts design tools on that preview.

How do I review a Codex frontend change visually?

Reading the diff tells you what changed in the source, not what changed on the screen — and for interface work the screen is the thing you care about. The usual workaround is a checkout and a local build, which answers the question but loses the connection back to the source.

In Clodex the result renders as a live page beside the conversation, so you review the interface itself and fix anything wrong by hand on the spot rather than opening a follow-up task.

Can I use Codex and Claude Code on the same project?

Yes. They are separate programs editing the same files on disk, and each reads its own instructions file — AGENTS.md for Codex, CLAUDE.md for Claude Code. Nothing stops you running both against one repository.

What they do not do on their own is share a screen, which in practice means two terminals and a lot of alt-tabbing. Clodex runs both side by side against one project and one live preview.

Do I need a ChatGPT subscription to use Codex in Clodex?

Yes — a ChatGPT subscription or an OpenAI API key. Clodex runs on the plan you already pay for and adds no meter on top of your Codex usage, which also means it cannot supply that access for you.

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

Does Clodex change how Codex reads AGENTS.md?

No. Codex runs as it normally does and reads AGENTS.md from your repository exactly as it would in a terminal, including files layered in subdirectories.

Clodex adds a rendered view and design tools around the agent. It does not sit between Codex and your project instructions.

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, and the name collision is unfortunate given how much vocabulary the two share.

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.

Sources and further reading
  • AGENTS.md guide — OpenAI's specification for Codex project instructions and how they layer.
  • Visual editor for Claude Code — the same design tools, and the different problem they solve for a local terminal agent.
  • Claude Code vs Codex — where each agent runs, what it costs, and which to pick.
  • Clodex FAQ — pricing, what is metered, and what you need before it works.