A [LAYOUT] block is a full-page sketch — a composition of components on a
clean, isolated stage: a login form, a dashboard shell, a card grid.
<script lang="ts">
import Card from './Card.svelte';
import Input from './Input.svelte';
import Button from './Button.svelte';
</script>
[LAYOUT title="Patterns / Login Form" padding="48px"]
<Card padding="24px">
<Input label="Email" type="email" />
<Input label="Password" type="password" />
<Button label="Sign in" />
</Card>
[/LAYOUT]Attributes
| Attribute | Required | Meaning |
|---|---|---|
title | yes | Sidebar path, /-separated |
slug | no | Overrides the URL segment (default: slugified title segment) |
hide | no | A bare flag: routable, but never listed in a sidebar |
maxWidth | no | Stage width (default 100%; narrower stages center) |
padding | no | Space around the sketch inside the frame (default 0px) |
background | no | Stage background — a CSS color or a var() from the project's css |
minHeight | no | Minimum stage height — any CSS length (e.g. 100vh for a full page) |
Presentation attributes tune the stage; the sketch itself is whatever you
put in the body — so a full-page composition can paint its canvas
(background) and claim its height (minHeight) without a wrapper
element. Global defaults live in the config's content option.
The frame fills the viewport height and scrolls when the sketch is taller,
so a 100vh composition previews just like a real browser window.
The body
The body is full Svelte — components, expressions, {#if}/{#each} blocks, local <script> state — rendered full-width in an isolated
frame: the host app's styles don't leak in, only the stylesheet from config.css applies, plus the file's own <style>.
No controls, no prop extraction — just the composition.
Linking between pages
An <a> inside any stage that points at another sdocs route — a sister
layout, a component page, a doc — navigates the app, not the iframe:
the stage forwards the click to the Explorer, so a multi-screen sketch can
wire its flows together (a login layout linking to its forgot-password
sister) without the site re-rendering inside the stage. External links, target="_blank", downloads, and same-page #anchors keep their native
behaviour. Write stage links like stage assets: base-relative
(href="components/layouts/auth/login") so they survive a sub-path deploy.
Not a SvelteKit layout
Despite the name, [LAYOUT] has nothing to do with SvelteKit's +layout.svelte. It doesn't wrap other pages — it is a page: a
standalone visual sketch that gets its own sidebar entry.
Layouts vs. the other entities
- Component doc — one component, with
controls, examples, and extracted API. Its
[EXAMPLE]blocks cover small variants of that component. - Doc — markdown prose with component islands.
- Svelte page — a docs-context page built in plain Svelte.
- Layout — many components working together at the page or feature level, on an isolated full-page stage.