A small local editor for HTML design files. You open a folder, click elements in the browser, adjust text, typography, layout, color, and export images. Files are edited in place on disk.
htmlshop ships two pieces together:
npx htmlshop, a local Node server and browser editor for folders of.htmldesigns.- A reusable AI-tool skill/rule that tells Codex, Claude Code, Cursor, and similar IDEs how to generate fixed-size HTML designs and launch the editor.
Everything runs locally. There are no accounts, telemetry, or remote htmlshop services.
Paste this into the terminal inside Cursor, Codex, Claude Code, Windsurf, or another AI coding IDE:
npx --yes htmlshop@latest install && npx --yes htmlshop@latest initThat installs the global Codex/Claude Code skill and adds the project rule that Cursor-style IDEs can read from .cursor/rules/htmlshop.mdc.
To launch the editor after setup:
npx --yes htmlshop@latestInstall for Codex and Claude Code:
npx htmlshop installInstall only one global skill:
npx htmlshop install codex
npx htmlshop install claudeResolved install locations:
- Codex:
${CODEX_HOME:-~/.codex}/skills/htmlshop/SKILL.md - Claude Code:
${CLAUDE_CONFIG_DIR:-~/.claude}/skills/htmlshop/SKILL.md
For Cursor, run this at the root of each project where you want htmlshop available:
npx htmlshop initThat writes .cursor/rules/htmlshop.mdc. Windsurf, Aider, Continue, and other AI IDEs can use the same skills/htmlshop/SKILL.md content as project rules or context.
Uninstall global skills:
npx htmlshop uninstall
npx htmlshop uninstall codex
npx htmlshop uninstall claudeOpen the default projects folder, created on first run:
npx htmlshopOpen a specific folder:
npx htmlshop ~/path/to/designsUseful options:
npx htmlshop ~/path/to/designs --port 5200
npx htmlshop ~/path/to/designs --host 127.0.0.1
npx htmlshop ~/path/to/designs --no-open
npx htmlshop doctorThe default URL is http://127.0.0.1:5178. If that port is busy and you did not explicitly set a port, htmlshop tries the next available port and prints the final URL.
On first run, if the default projects folder has no visible designs, htmlshop seeds a bundled welcome.html demo so the gallery is immediately editable.
After installing the skill, ask your AI coding tool for a design:
/htmlshop make a 1080x1080 Instagram post titled "Truth isn't loud"
using my design-system.md
The assistant should:
- Read a referenced design system if one exists.
- Write one or more self-contained
.htmlfiles under~/htmlshop/projects/. - Launch
npx htmlshop <project-folder>in the background. - Give you the local editor URL.
Projects convention:
- Loose
.htmlfiles in~/htmlshop/projects/are standalone designs. - Subfolders are carousels or multi-slide projects.
- Uploaded images are saved under
<root>/assets/.
Gallery:
- Shows standalone designs and carousel folders.
- Creates new designs and new carousels.
- Renames, moves, duplicates, and deletes designs with local modals.
- Shows the active root folder in the header.
- Opens folders with multiple designs as a side-by-side carousel editor.
Editor:
- Click an element to select it.
- Drag or resize elements with transform handles.
- Static/relative layouts freeze into absolute positions on first transform so siblings do not reflow.
- Layers panel with editor-only hide/show toggles.
- Properties panel for text, typography, layout, background, borders, effects, and blending.
- Undo/redo per open design.
- Zoom controls and fit-to-screen.
- Add artboards and images.
- Rename or delete artboards from the Layers sidebar.
- Export PNG/JPG at 1x, 2x, or 3x for the active design or all slides.
Shortcuts:
| Action | Shortcut |
|---|---|
| Undo / Redo | Cmd+Z / Cmd+Shift+Z |
| Zoom in / out / 100% | Cmd+Plus / Cmd+Minus / Cmd+0 |
| Delete selected | Delete |
| Duplicate selected | Cmd+D |
| Deselect | Esc |
htmlshop works best with single-file fixed canvases:
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
width: 1080px;
height: 1080px;
position: relative;
overflow: hidden;
}
.headline {
position: absolute;
left: 120px;
top: 240px;
}
</style>
</head>
<body>
<h1 class="headline">Hello</h1>
</body>
</html>Inline CSS is preferred. External JavaScript is not needed. Google Fonts are supported, but local/system fonts keep the workflow fully offline after the editor loads.
See PRIVACY.md. Short version: htmlshop serves files from your machine to your browser on 127.0.0.1, edits files on disk, and does not send usage data anywhere. The editor UI currently loads DM Sans from Google Fonts.
npm install
npm run check
node bin/htmlshop.js --no-opennpm run check performs syntax checks, runs a local smoke test against a temporary folder, runs npm audit --omit=dev, and verifies package contents with npm pack --dry-run.
Manual release checklist:
- Empty first-run gallery.
- New design and new carousel creation.
- Open single design and multi-slide carousel.
- Select, drag, resize, duplicate, delete, undo, redo.
- Rename and move conflict handling.
- Upload image and save.
- Export PNG and JPG at 1x/2x with correct dimensions.
htmlshop install,install codex,install claude,init,doctor, and--no-open.
MIT
