Site as code

Your shop’s site is a project of TSX, CSS and HTML files — versioned, built and published by ItemShop.

In ItemShop 3.0, the site the player sees is a project with code — like a site made in a site generator, only wired to your shop. You don’t have to program: you start from a template and change it by talking to the AI. If you do program, you have full control over every file.

Three ways to get a site

Template

Pick a ready-made open-source (MIT) template and change the logo, colors and text.

AI editor

Describe a change in words. The AI edits the files and builds a preview; you publish.

Custom code

Upload a zip or a folder, or use itemshop deploy from the terminal.

You can combine them: pick a template, refine it with the AI, then pull the project through the CLI and keep developing it on your machine.

How it works

Concept	What it is
Site	Your shop’s site project. One shop has one site.
Draft	Work-in-progress changes — this is where the AI editor and the file editor work. Not visible to players.
Revision	An immutable snapshot of all files taken when a draft is committed. Author: you, the AI, an upload or the CLI.
Build	Turning a revision into static files (HTML, CSS, JS) in an isolated environment.
Deployment	A published build: a preview (private address) or production (your domain).

More about building, preview addresses and rolling back: Build and hosting.

The itemshop.site.json file

The project root holds a manifest that tells ItemShop how to build the site:

itemshop.site.json

{
  "$schema": "https://itemshop.pl/schema/site.json",
  "name": "bento",
  "framework": "vite-react",
  "build": { "command": "npm run build", "output": "dist" },
  "template": { "id": "bento", "version": "1.0.0" }
}

Field	Meaning
framework	vite-react (TSX + CSS, the default for templates and the AI) or static (plain HTML/CSS/JS, no build).
build.command	The build command. Skipped for static.
build.output	The directory with the finished files after the build.
template	Which template and version the project came from (informational).

No manifest, but there’s an index.html in the root? ItemShop treats the project as static — a plain HTML page works right away.

Existing shops

A shop built with the block configurator keeps working unchanged until you publish your first code site: until then players are served by the existing shop page. The first production publish of the new site switches the same address (and your domain) to the code project. See Migrating from the configurator.

Where the site gets its data

The site runs entirely in the browser — it has no server of its own. It fetches products, prices, payment methods and widgets from the public Storefront API through @itemshop/sdk. Payment is always handled by the ItemShop checkout: the site creates an order and redirects the player to the gateway.

import { createStorefront } from "@itemshop/sdk";

const sf = createStorefront(); // shopId and API address from window.__ITEMSHOP__
const { products } = await sf.products.list();

Templates

The gallery and what you can change without code.

Limits

Sizes, build time, AI limits.