Getting started

#Install

In Claude Code:

/plugin marketplace add Fresh-Context/zest
/plugin install artifact-editor@zest

Restart Claude Code. The plugin adds two skills, /artifact-editor:edit and /artifact-editor:run, and puts a zest command on the PATH that Claude Code's shell uses. To type zest in your own terminal too, ask Claude Code to run zest link once (see Command line). Until you do, Zest writes each command it shows you as node "<plugin>/bin/zest" …, which runs anywhere.

From a terminal instead:

claude plugin marketplace add Fresh-Context/zest
claude plugin install artifact-editor@zest

#Updating

Zest checks once a day for a newer release. When one is out, Claude Code says so in one line when it starts, the Z in the editor's toolbar gets a dot, and About Zest (click the Z) shows what to run:

claude plugin marketplace update zest
claude plugin update artifact-editor@zest

Then restart Claude Code. To skip this, turn on auto-update for the zest marketplace in /plugin > Marketplaces (third-party marketplaces start with it off). zest update checks from a terminal; ZEST_UPDATE_CHECK=0 turns the check off. Releases are listed, with what changed, on the releases page.

Needs: Node 18 or newer. A Chromium-family browser (Chrome, Edge, Brave, Chromium) so your agent can screenshot its work. Any browser works for editing.

#Try the demo

/artifact-editor:edit

With no file to open, Claude offers the demo. It copies a short welcome page into ./zest-demo/ and opens it. The page teaches Zest by being edited: rewrite its headline, swap its picture, leave a note, then hand the note over.

From a terminal: zest demo.

#The daily loop

1. Open. /artifact-editor:edit page.html, or ask Claude in your own words ("let me edit the proposal"). Claude runs zest open page.html, which opens your browser on the page: through the Zest service when it runs (no new server), or a small server of its own on 127.0.0.1.
2. Edit. Press E. Click words to rewrite them; Enter saves, Esc puts them back. Click a picture for Replace image, Alt text and Frame.
3. Note. Press N. Click the part of the page you mean and say what should change.
4. Hand over. Open Changes (or press C), copy the prompt, paste it into Claude Code.
5. Read the answers. The page shows that your agent is working, reloads when it finishes, and puts each answer under its note.

#Pages your app serves

A page your app serves on this machine (Next.js, Vite, any dev server) can be edited where it runs, with its motion and scroll, and no server of Zest's own: forward /__zest to the Zest service in development and press Edit here on the Zest Edit button. See Editing in place.

#Keys for Generate

Optional. See Images and Configuration. The quickest way: in the picker's Generate tab, paste a key once.

#Stopping

A server of Zest's own stops by itself two hours after the last tab closes (the Zest service keeps running, and puts each folder away after two idle hours). To stop it now: zest stop page.html, zest stop --all, or More > Setup > Stop Zest.

#Keyboard

Keys do nothing while you type in a field, so a page's own forms still work.

Suggest a change to this page