SveltyCMS is headless — you can always build public sites with Astro, Next.js, Vue, or any stack that consumes the REST/GraphQL APIs. For most teams, the recommended path is the in-repo SvelteKit frontend at routes/(site) together with Svedit for visual frontpage design.

Architecture

Quick Start

1. Use the default preset

The Setup Wizard pre-selects Website Starter. It creates:

• A pages collection with livePreview: "/{slug}?lang={lang}" and plugins: ["editable-website"]
• A published homepage (slug: home → /) with a default Svedit layout

2. Visit the public site

• Guests → http://localhost:5173/ shows the seeded homepage
• Logged-in editors → / redirects to the CMS dashboard

3. Design the frontpage

Live Preview (paid bridge — trial included on Website Starter setup):

1. Open Pages → Home → Live Preview tab (plugin auto-enabled after setup)
2. Edit hero, paragraphs, and CTA blocks inline on the live site
3. Changes sync via svelty:document:update — save in the CMS to persist

Free path: Edit Page Layout (Svedit) (content) or flat fields (heroHeading, body, …) in the form tab. The public site updates after publish — no license required.

4. Add more pages

Svedit integration

SveltyCMS ships svedit as a dependency. The site starter defines:

page-renderer.svelte detects a Svedit document in content (object with document_id + nodes) and renders via <Svedit>. Legacy { blocks: [...] } JSON and flat CMS fields still work as fallbacks.

Extend the schema with new node types (features grid, testimonials, …) and register matching Svelte components in create-site-session.ts.

Configuration

SITE_STARTER_ENABLED

Public setting (default: true). Set to false to redirect anonymous / visitors to /login while keeping CMS and APIs unchanged.

Reserved routes

Admin paths always require authentication: /api, /login, /setup, /config, /admin, language-prefixed CMS routes (/en, /de, …).

Headless alternatives

The site starter is the reference implementation for SvelteKit teams. For other frameworks:

You can run SveltyCMS headless-only and adopt Svedit in a separate SvelteKit frontend that consumes the API.

Route layout note

SvelteKit allows only one loader per URL. The former src/routes/+page.server.ts (CMS-only redirect) conflicted with the public site at /, so it was removed. Authenticated editor redirects now run inside src/routes/(site)/+page.server.ts via redirectAuthenticatedUserToCms().

Disable the site starter (SITE_STARTER_ENABLED: false) to restore headless-only behavior — guests hitting / are sent to /login instead of the public homepage.

File reference

src/routes/(site)/
├── +layout.svelte
├── +layout.server.ts
├── +page.svelte            # Homepage (slug "home")
├── +page.server.ts
└── [...slug]/              # Catch-all public pages

src/components/site/
├── page-renderer.svelte    # Svedit-first, flat-field fallback
├── svedit/                 # Svedit schema components + renderer
├── site-preview-bridge.svelte
├── site-header.svelte
└── site-footer.svelte

src/services/site/
├── svedit/                 # Schema, default doc, parsers
├── page-resolver.server.ts
├── site-config.server.ts
└── website-starter-seed.server.ts  # Shared seed blueprint (setup + testing API)

Related

• Editable Website Plugin — Premium live preview (€14.99)
• Live Preview Architecture
• Svedit — Inline Svelte editing library
• Plugin Architecture
• Getting Started