Installation

Choose @page-sections/svelte for a Svelte website, or @page-sections/core for framework-independent data and calculations.

Run this in an existing application:

npm install @page-sections/svelte

The peer dependency is svelte: ^5.56.4. The matching Core version and markdown-it are installed as package dependencies; no SvelteKit or Tailwind peer is required. Both packages are ESM and declare Node >=22.12.0. The repository uses Node 24/npm 11 for development.

In plain Svelte, put the Quick Start component in App.svelte and use your existing Svelte-aware bundler. In SvelteKit, use it in src/routes/+page.svelte; shared navigation can live in your application layout. No library-specific routing configuration is needed.

The package exports Svelte source components for your build tool to compile. It is not a prebuilt browser script. Only @page-sections/svelte and @page-sections/svelte/styles.css are public entry points.

PageShell, ContentPage, Navigation, Section and Breadcrumbs import the shared stylesheet. ContentGrid imports the generated grid rules only. Low-level Card, Image, ButtonGroup, MainMenu, SectionNavigation, ContentBlock, SectionSurfaceGroup, ContentPanel, Actions, RichTextContent and InlineTextContent do not independently load the full theme defaults.

Import the full stylesheet once in your application entry/layout when using low-level components independently:

import '@page-sections/svelte/styles.css';

The stylesheet declares theme defaults on :root and component-scoped utility classes. Override variables on a local ancestor or through PageShell; see Themes and Styling.

npm install @page-sections/core

Core has no runtime dependencies. Declare it directly if application code imports its runtime exports. Svelte consumers can import the shared types from either package:

import type { PageData, CardItem } from '@page-sections/svelte';
import { resolveContentGrid } from '@page-sections/core';
const cards: CardItem[] = [];
const page: PageData = { title: 'Library', sections: [] };
console.log(page.title, cards, resolveContentGrid(840));

Svelte examples include their imports and data. Media URLs such as /images/garden.jpg and /media/tour.mp4 are application assets: supply those files in Vite's public/ or SvelteKit's static/, or replace the URLs. Example links refer to application routes that you provide. These examples demonstrate component usage, not a bundled CMS or router.

SSR and prerendering belong to the application. A client-only Vite app still requires JavaScript to show content. The demo demonstrates SvelteKit prerendering with adapter-static; see SSR and Progressive Enhancement.