Svelte / SvelteKit

ACMS works with Svelte and SvelteKit using the same framework-agnostic client. This guide covers setup, Svelte stores for reactivity, and SvelteKit-specific patterns.

Installation

npm install @useacms/client @useacms/cli

Basic Usage

Import acms and use it in your Svelte components:

<script>
  import { acms } from '@useacms/client';
</script>

<section class="hero">
  <h1>{acms.hero.title}</h1>
  <p>{acms.hero.subtitle}</p>
  <a href={acms.hero.ctaLink}>{acms.hero.ctaText}</a>
</section>

Fields are automatically registered when the component renders during development.

Reactive Updates with Svelte Store

Create a Svelte store for reactive content updates:

stores/acms.ts

import { writable } from 'svelte/store';
import { acms, subscribe } from '@useacms/client';

function createAcmsStore() {
  const { subscribe: storeSubscribe, set } = writable(acms);

  subscribe(() => {
    // Trigger Svelte reactivity on content changes
    set(acms);
  });

  return { subscribe: storeSubscribe };
}

export const content = createAcmsStore();

Use the store in your components:

<script>
  import { content } from '@/stores/acms';
</script>

<section>
  <h1>{$content.hero.title}</h1>
  <p>{$content.hero.subtitle}</p>
</section>

SvelteKit Integration

In Pages

src/routes/+page.svelte

<script>
  import { acms } from '@useacms/client';
</script>

<main>
  <h1>{acms.home.title}</h1>
  <p>{acms.home.description}</p>
</main>

In Layouts

src/routes/+layout.svelte

<script>
  import { acms } from '@useacms/client';
</script>

<header>
  <nav>
    <span>{acms.site.name}</span>
  </nav>
</header>

<slot />

<footer>
  <p>{acms.footer.copyright}</p>
</footer>

Load Functions

Use acms in SvelteKit load functions for server-side content:

src/routes/+page.ts

import { acms } from '@useacms/client';

export function load() {
  return {
    title: acms.home.title,
    description: acms.home.description,
  };
}

Configuration

Create acms.config.ts in your project root:

import { defineConfig } from '@useacms/client';
import { localFile, cloudflareKV } from '@useacms/cli/adapters';

export default defineConfig({
  dev: localFile({ path: './acms.json' }),
  production: cloudflareKV({
    accountId: process.env.CF_ACCOUNT_ID,
    namespaceId: process.env.CF_KV_NAMESPACE_ID,
    apiToken: process.env.CF_API_TOKEN,
  }),
  strategy: 'build-time',
});

Development Setup

# Terminal 1
acms dev

# Terminal 2
npm run dev    # SvelteKit dev server

Working with Arrays

<script>
  import { acms } from '@useacms/client';
</script>

<ul>
  {#each acms.features as feature, index}
    <li>{feature}</li>
  {/each}
</ul>

Conditional Rendering

<script>
  import { acms } from '@useacms/client';
</script>

{#if acms.banner.visible}
  <div class="banner">
    <p>{acms.banner.message}</p>
  </div>
{/if}

Next Steps

• Learn about TypeScript support
• Set up the Dashboard for visual editing
• Configure a Storage Adapter for production