# GS Loom Playground

## Test without uploading to a server

GS Loom Playground loads themes from a folder on your computer using the shared GrowSite renderer. It requires no API or database. It does not import the theme into the production catalog or publish changes to customer websites.

## Start the preview

From the GrowSite repository root, after installing dependencies with `npm ci`, run:

```bash
npm run loom:playground
```

Then [open GS Loom Playground](http://127.0.0.1:5180/__loom). This link points to your own computer and works while the process above is running. Opening the documentation does not start the process. Stop it with Ctrl+C in the terminal.

By default, GrowSite Skeleton, Paylio and Victorie Vending are available. Choose a theme, page and preview width: available space, desktop at 1440 px, tablet at 768 px or phone at 390 px. The restart button lets you replay entrance animations.

## Open your own theme

Pass an extracted GS Loom package directory containing `loom.json`:

```bash
npm run loom:playground -- "/absolute/path/to/my-theme"
```

You can pass multiple directories separated by spaces; each theme must have a unique key. Providing directories replaces the default three-theme list. To open the documentation example, run:

```bash
npm run loom:playground -- dev-site/examples/launch-theme
```

Edit HTML, schemas, dictionaries and assets in the directory shown in Playground. Saving files automatically refreshes the preview. Compilation errors appear in the preview. There is no need to import the theme or rebuild the theme registry.

## Demo data and plugins

Playground uses the theme's demo values and defaults. Section themes offer a locale selector and scenarios for standard data, long text and an empty blog. The plugins switch lets you compare the page with demo integrations enabled or disabled. Forms simulate a successful response: they do not send email or store submissions.

The locale selector uses the theme's dictionaries and fallback behavior. It does not automatically translate demo content or user text. Document themes, such as Victorie Vending, display their original demo content; locale and scenario selectors are hidden for these themes.

## Preview scope

Check layout, responsive behavior, backgrounds, typography, animations and form appearance. External assets, such as fonts, may still require an internet connection. Custom JavaScript modules requiring separate application integration are not automatically registered by passing a directory.

Verify data persistence, actual form delivery, permissions and plugins backed by the API later in the application environment. Continue with [your first theme](/en/quickstart/) and [package releases](/en/release/).

## Change the port

The server listens only on `127.0.0.1`. If port 5180 is occupied, stop the previous process or select another port:

```bash
LOOM_PLAYGROUND_PORT=5181 npm run loom:playground
```

Then open `http://127.0.0.1:5181/__loom` instead of the default link.