> ## Documentation Index
> Fetch the complete documentation index at: https://andcze.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://andcze.mintlify.site/en/site/templates.md)**
>
> Pick a ready-made open-source (MIT) template and change the logo, colors and text.

> **[AI editor](https://andcze.mintlify.site/en/site/ai-editor.md)**
>
> Describe a change in words. The AI edits the files and builds a preview; you publish.

> **[Custom code](https://andcze.mintlify.site/en/site/custom-code.md)**
>
> 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](https://andcze.mintlify.site/en/site/cli.md) and keep developing it on your machine.

## How it works

```mermaid theme={null}
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#fbf0ee','primaryBorderColor':'#d0423a','primaryTextColor':'#121212','lineColor':'#8b8b85','fontFamily':'Bricolage Grotesque, sans-serif'}}}%%
flowchart TB
  A[Project files] -->|commit| B[Revision]
  B -->|build| C[Static files]
  C -->|deploy| D[Preview]
  D -->|Publish| E[Production: your domain]
```

| 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](https://andcze.mintlify.site/en/site/build-hosting.md).

## The `itemshop.site.json` file

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

```json itemshop.site.json theme={null}
{
  "$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). |

> [!TIP]
>
> 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](https://andcze.mintlify.site/en/site/migration.md).

## 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](https://andcze.mintlify.site/en/developers/storefront-api.md) through `@itemshop/sdk`. Payment is always handled by the ItemShop checkout: the site creates an order and redirects the player to the gateway.

```tsx theme={null}
import { createStorefront } from "@itemshop/sdk";

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

> **[Templates](https://andcze.mintlify.site/en/site/templates.md)**
>
> The gallery and what you can change without code.

> **[Limits](https://andcze.mintlify.site/en/site/limits.md)**
>
> Sizes, build time, AI limits.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.