Build a website
Start from a Starter and build with Benchy Desktop, or with your own agent and the Benchy Websites plugin.
Start from a Starter
A Website Starter is a ready-made site in plain HTML and CSS, with no build step and nothing to install. Every one is a real page with real-sounding words, so you change it line by line rather than starting from an empty file.
| Starter | What you get |
|---|---|
| Print shop | One page of prints for sale, with prices, lead times and how to order |
| Portfolio | Your work as a grid of projects, each with its own page |
| Link page | One column of links, for a bio or a business card QR code |
| Event page | A date, a place, a schedule and a sign-up form |
- In Benchy Desktop: choose New, then Website, and pick one.
- In Studio: choose Use starter on a Starter in the workspace’s library or in the Community on World. Benchy makes a new project from it, which opens in Desktop or downloads as a folder for any other agent.
Each Website Starter lists what it needs: the Benchy Websites plugin and a connection to your workspace. The project is yours from then on; changes to the Starter never reach it.
The Website section of BENCHY.md
The project’s BENCHY.md names its website, so every agent and tool publishes the same folder to the same address:
## Website
- Name: olive-prints
- Output: site/
- Build: npm run buildNameis the address, hereolive-prints.benchy.site.Outputis the folder that gets published, relative to the project. For a Starter it is the folder holdingindex.html; for a framework it is the build folder.Buildis only a note for people and agents. Benchy never runs it: you, or your own agent in a terminal, run the build, and Benchy publishes what it produced.
Benchy writes the section when you first choose an address, and benchy site deploy, Desktop’s Publish and the plugin all read it.
Build with Benchy Desktop
Desktop turns on website mode for a website project: a folder with an index.html at the top or one folder down, or a package.json that uses a web framework such as Vite, Astro or Next.js. In website mode, Benchy, Claude Code and Codex can read and change the project’s own files, and nothing else on your Mac.
- Say what you want. “Add an About page with our opening hours” is enough.
- Approve the edits. Each file change asks first. The card also offers Allow edits in this project for this chat. In a folder you opened yourself, the first edit asks once: Let agents edit files in this folder? Choose Keep this folder read-only to say no; the project’s menu changes the answer later.
- Undo anything. Every change shows as a row in the chat with the file and the lines changed, and Undo puts the file back exactly as it was.
- Watch it in the page viewer, then publish with Publish in the project’s header. See Publish from Desktop.
Agents can never change package.json, lockfiles, hidden files such as .env, node_modules/, Made by Benchy/ or the project’s top-level config files. That is how Desktop keeps its rule that no agent gets a shell: an agent can’t write the command it would then ask to run.
The page viewer
The page viewer shows your site beside the chat. It shows local pages, this project’s published pages on benchy.site, and reference pages an agent opens; it is not a general browser.
- Its title is always the address of the page, such as
localhost:5173. Back and Reload are its buttons; its menu holds the widths (Full, 768 and 390), Open in browser and Clear preview data. - For a plain site, Benchy serves the folder with
index.htmlitself. A server you already run on this Mac is offered in the viewer when it is empty. - Agents use the page too: they read it, click and type in it, take a screenshot and read its console. On this project’s own pages they need no approval; any other site asks once per chat. The header reads “Codex is using this page” while one does, and typing into a password field takes the page back.
- An agent never uses a printer’s web page. Printer controls are yours alone.
Dev servers
A project with a package.json can run its own dev, start, preview or serve script. Press Start in the page viewer, which shows the script’s exact text first. An agent can ask to start one too; it asks every time and shows the same text.
- Benchy never installs packages. If
node_modulesis missing, the viewer says so and names the command to run in Terminal. - Each server gets one port on this Mac. It can’t reach the internet or your local network, can’t read anything outside the project, and is stopped at once if it opens to the network. A font or API it fetches at start-up fails, and its log says why.
- A server stops when you press Stop, quit Desktop, or leave the project for 10 minutes. Settings, then Data, lists the ones running.
Build with your own agent
The Benchy Websites plugin teaches Claude Code, Codex and Cursor to start, edit and publish a website, and connects them to your workspace. On the plugin’s page, choose Install in Claude Code, or the same for Codex or Cursor. The first time the agent reaches Benchy it asks you to sign in and choose a workspace.
| Skill | What it does |
|---|---|
start-website | Proposes addresses, checks them, reserves the one you pick and writes BENCHY.md |
edit-website | Keeps edits inside what a website can serve, within the limits |
publish-website | Publishes a preview, waits for you to say go live, then checks what is live |
The plugin never publishes on its own, never runs a build for you, and adds no server code. Benchy Desktop registers the same connection with every agent it finds on your Mac, so those agents can publish without the plugin; the plugin adds the skills.
Framework builds
Any tool that writes static files works. Run the build yourself, or have your terminal agent run it, then publish the output folder.
| Tool | Output folder | Note |
|---|---|---|
| Vite | dist/ | Works as it is |
| Astro | dist/ | The default static output |
| Next.js | out/ | Set output: "export" in next.config |
| SvelteKit | build/ | Use adapter-static |
| Eleventy | _site/ | Works as it is |
A single-page app that routes in the browser needs one line in benchy.site.json so its deep links load. See App routing.
Use ← and → to move between pages.