SSR and enhancement

Page Sections components can render meaningful HTML on the server. The host application must enable SSR or prerendering; importing the library into a client-only application does not provide either automatically.

What works without application JavaScript?

Feature	Initial HTML / CSS behavior	Client enhancement
Pages, sections, grids	Text, headings, backgrounds and responsive layout	Reactive updates
CardGridSection	One set of articles, images and native title links	Optional application snippets
CarouselSection	Same content model; focusable native overflow with scroll snap	Optional previous/next buttons after mount
MainMenu	Native links and details/summary disclosures	No additional menu engine
ButtonGroup	Native links; rendered buttons	Button callbacks require JavaScript
Breadcrumbs / SectionNavigation	Native links, including generated page anchors	Registration changes and keyed reorder updates
Image	Native picture, alt text and dimensions	Explicit shell mode changes can update source selection
HTML5 video	Native controls and caption tracks	Browser media behavior
YouTube	Embed element	Provider playback may require its own scripts/network

Carousel scrolling supports touch/trackpad and native arrow-key behavior when the track has focus. Links remain normal Tab stops. Buttons scroll by 85% of track width, respect RTL and avoid smooth movement when reduced motion is requested. No alternate copy of the cards is created for SSR or failure fallback.

Host responsibilities

Use SvelteKit's normal server rendering or prerendering, or supply a server-render/prerender pipeline for plain Svelte. Ensure your initial data is available at render time and use the same data for hydration. Select persisted themes in the host if you need to avoid a theme flash. Supply image dimensions, routes, media files, consent handling and appropriate text alternatives.

In SvelteKit, a page can opt into prerendering when its content is available at build time:

// src/routes/+page.ts in a SvelteKit application
export const prerender = true;

This export is a host configuration, not a Page Sections prop.

Demo reference

The SvelteKit 2 demo in apps/demo uses adapter-static and prerender = true in its root layout. The website, minimal demo and regression application all produce complete HTML and hydrate it in the browser. npm run dev:website serves the documentation at http://127.0.0.1:5174. npm run demo builds and previews the minimal consumer at http://127.0.0.1:4173. SvelteKit is an application dependency only.

Inspect page source and test with JavaScript disabled. The repository's browser tests cover 375/840/1600px widths, native carousel keyboard scrolling and a hydrated environment without WebGPU. The package has no WebGPU dependency or GPU detection behavior.

Accessibility limits

ContentPage's generated navigation comes after sections in DOM order and is moved visually with CSS. Native scrolling is not a live-region slideshow. The library does not automatically choose heading levels in arbitrary Markdown/snippets, announce slide changes, or implement application-level focus restoration. Review those decisions in your actual page composition.