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

# SvelteKit

> Build a SvelteKit Site with adapter-static and deploy its static output to Liteshop.

Liteshop hosts the static files a SvelteKit build produces. This guide uses [adapter-static](https://svelte.dev/docs/kit/adapter-static) to prerender every page to HTML.

## Before you begin

* Install [Node.js](https://nodejs.org) 22 or later.
* Sign in to the [Liteshop dashboard](https://app.liteshop.me).

## Create the app

```sh theme={null}
npx sv create my-site --template minimal --types ts --add sveltekit-adapter="adapter:static" --install npm
cd my-site
```

The `sveltekit-adapter` add-on installs `@sveltejs/adapter-static` and sets it as the adapter in `vite.config.ts`.

Prerender every page by adding `src/routes/+layout.ts`:

```ts theme={null}
export const prerender = true;
```

## Add the manifest

SvelteKit copies everything in `static/` to the root of the build, so put `liteshop.json` there:

```json theme={null}
{
  "$schema": "https://docs.liteshop.me/schemas/site-v0.1.json",
  "specVersion": "0.1",
  "site": {
    "name": "My Site",
    "defaultLocale": "en",
    "supportedLocales": ["en"],
    "timezone": "Europe/Paris"
  },
  "frontend": {
    "entry": "index.html"
  },
  "capabilities": {
    "forms": [
      {
        "id": "contact",
        "name": { "en": "Contact" },
        "fields": [
          { "id": "email", "type": "email", "label": { "en": "Email" }, "required": true },
          { "id": "message", "type": "textarea", "label": { "en": "Message" }, "required": true }
        ]
      }
    ]
  }
}
```

Leave `capabilities` as `{}` if the Site has no Form. The [Site Bundle reference](https://docs.liteshop.me/reference/site-bundle.md) lists every field.

## Add the SDK

Install the Liteshop SDK:

```sh theme={null}
npm install @liteshop.ai/sdk
```

Import `liteshop` from it wherever the Site uses Forms, bookings or the catalogue. It calls the Site's own Liteshop endpoints and includes its TypeScript types.

To try Forms with `npm run dev`, add the Liteshop plugin to `vite.config.ts`:

```ts theme={null}
import adapter from "@sveltejs/adapter-static";
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { liteshop } from "@liteshop.ai/sdk/vite";

export default defineConfig({
  plugins: [sveltekit({ adapter: adapter() }), liteshop()],
});
```

Keep any other options the add-on wrote in `sveltekit({ ... })`. On the dev server, the plugin answers the SDK from `liteshop.json`: Form submissions are checked and printed in the terminal, the catalogue lists every item as available, and nothing is saved or sent to Liteshop. The plugin reads `static/liteshop.json`.

## Submit a Form

Import the SDK and pass the Form ID as a literal string. Liteshop reads `liteshop.forms.submit("contact", ...)` from your built JavaScript to check that every declared Form has a handler. Put the Form in `src/lib/Contact.svelte`:

```svelte theme={null}
<script lang="ts">
  import { liteshop } from "@liteshop.ai/sdk";

  let status = $state<"idle" | "sent" | "error">("idle");

  async function submit(event: SubmitEvent) {
    event.preventDefault();
    const form = event.currentTarget as HTMLFormElement;
    const data = new FormData(form);
    try {
      await liteshop.forms.submit("contact", {
        email: String(data.get("email")),
        message: String(data.get("message")),
      });
      form.reset();
      status = "sent";
    } catch {
      status = "error";
    }
  }
</script>

<form onsubmit={submit}>
  <label>Email <input name="email" type="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
  {#if status === "sent"}<p>Thanks, your message was sent.</p>{/if}
  {#if status === "error"}<p>Your message could not be sent. Try again.</p>{/if}
</form>
```

Use it in `src/routes/+page.svelte`:

```svelte theme={null}
<script lang="ts">
  import Contact from "#lib/Contact.svelte";
</script>

<h1>Welcome</h1>
<Contact />
```

Svelte attaches `onsubmit` with JavaScript, not as an HTML attribute, so it works under the Site's security policy. Don't add `method="post"` or an `action` to the form, and don't use SvelteKit form actions. See the [Forms reference](https://docs.liteshop.me/reference/forms.md) for field types and the anti-spam field.

## Build and package the Site

```sh theme={null}
npm run build
cd build
zip -r ../site.zip .
```

The ZIP must have `index.html` and `liteshop.json` at its root, which zipping the contents of `build` gives you.

## Upload the Site

To publish a new Site:

1. In the [Liteshop dashboard](https://app.liteshop.me), click **Website** > **Upload files**.
2. Enter the Site name and subdomain, and select `site.zip`.
3. Click **Check and publish**.

To update a Site, open **Website settings** (the gear button on the **Website** page), and upload the new ZIP file in **Upload an update**. An update's `liteshop.json` must name the live version in `baseDeployment`. If the value is missing or out of date, validation fails, and its repair message gives the exact value to set in `static/liteshop.json`. For details, see [Publish and manage a Site](https://docs.liteshop.me/develop/deploy.md).

## Routing

Liteshop serves `/about` from `about.html`, and from `about/index.html` by redirecting to `/about/`. With SvelteKit's default `trailingSlash` setting, a route such as `src/routes/about/+page.svelte` is prerendered to `about.html`, so keep that default and link to `/about` without a trailing slash.

Prerender every page, and avoid routes with parameters that the build can't discover by following links. Prerendered pages load faster and work for search engines.

## What runs on Liteshop

Liteshop hosts static output only: no server rendering, `+page.server.ts` or `+server.ts` files, form actions or remote functions. The Site's security policy blocks scripts, styles and network requests to other origins, frames, workers and `eval`. Validation warns when your build appears to use one of those features, and fails on external scripts and frames. SvelteKit's runtime mentions `fetch` and service workers, so every SvelteKit build gets those warnings; you can ignore them when your own code doesn't use either.

## Dashboard edits

Site Owners can edit catalogue items, collections, and stock in the dashboard, which publishes a new Deployment from your files without rebuilding your app. Read the catalogue in the browser with `liteshop.catalogue.list()`. Don't import `liteshop.json` or render catalogue items at build time; otherwise, dashboard edits don't appear on the Site until you rebuild and upload it again. See the [Catalogue reference](https://docs.liteshop.me/reference/catalogue.md).


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