Personal SvelteKit lab

Svelteground is a personal repo of guides and a component playground for SvelteKit 5.

Capture decisions, remix patterns, and keep every component ready to ship with typed data and tidy UX.

Guides stay short, tactical, and tied to real routes.
Components keep state coverage, keyboard flow, and copy in sync.
Typed load data keeps pages and content aligned.

Content + component contract

Pull guides and component references from a single load.

// src/routes/+page.ts
export const load = () => ({
  guides: latestGuides,
  playground: componentCatalog
});

// src/routes/+page.svelte
<script lang="ts">
  let { data } = $props();
</script>

SSR by defaultTyped PageDataMetadata ready

Guides

Latest notes from the Svelteground repo.

Short reads on routing, data loading, accessibility, and UI systems.

View all guides

Architecture Jan 2026

Route groups for docs and labs

Segment content and experiments without changing clean URLs.

Published 6 min

Content Jan 2026

SEO and route announcements

Titles and descriptions serve a11y and search together.

Published 5 min

UI system Jan 2026

Component catalogs with typed props

Keep variants, states, and docs in one clean contract.

In review 7 min

Playground

Component playground

Preview components in real states, capture copy, and ship Svelte 5 snippets that match your system.

Variants + states

Toggle sizes, intents, empty states, and loading modes.

Accessibility notes

Track focus order, labels, and keyboard paths.

Copy-ready snippets

Grab SvelteKit-ready code with typed props.

Open the playground Browse the guides

Principles

Rules that keep the repo tidy and shippable.

Content-led routes

Model guides and playgrounds as first-class routes.

Typed load data

Return guide and component data from `+page.ts`.

Server boundaries

Move drafts, auth, and secrets to `+page.server.ts`.

SEO + a11y by default

Set titles and descriptions for announcements and indexing.

Workflow

A loop for shipping guides and components quickly.

Step 01

Shape guide + component data

Keep it typed and minimal through `$types`.

Step 02

Render with `$props()`

Destructure once and keep markup clean.

Step 03

Publish with guardrails

Use semantic structure and metadata by default.

Metrics

Keep it scoped.

Guides in rotation 6

Components tracked 13

Playground stations 3

Adjust the numbers to fit your real project footprint.

Get started

Launch the guides and playground with confidence.

This page is the contract: clean load data, a11y-ready markup, and SEO-ready metadata for guides and components.

Read SvelteKit docs Back to top