Docs worthy of legend.
A documentation framework for Svelte. Interactive examples live inside one real, stateful app: not screenshots, not sandboxed islands. Markdown compiles to real routes, the sidebar builds itself, and a scaffolded site is minutes away.
<script lang="ts">
let stars = $state(3);
</script>
<button class="star-button" onclick={() => stars++}>
<span aria-hidden="true">★</span>
Star
<strong>{stars}</strong>
</button>
<style>
.star-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.25rem;
border-radius: 9999px;
background: var(--primary);
color: var(--primary-foreground);
font-weight: 500;
transition: transform 0.1s ease-out;
}
.star-button:active {
transform: scale(0.96);
}
</style>Real component, real state: the button above is running, not a picture of one.
Living examples, not screenshots
Drop a Svelte component straight into your markdown and it runs as part of the same app. The rendered demo and its syntax-highlighted source come from one file, imported twice, so the code you show and the code that runs can never drift.
See live examples--- title: Quick Start section: Getting Started order: 3 --- ## Register the pipeline Drop a `.md` file under src/routes/docs/ and it becomes a real route.
Markdown, hammered into routes
DocSmith leans on mdsvex, which turns markdown into real Svelte components. A file at docs/quick-start/+page.md becomes the page /docs/quick-start. No catch-all route, no content loader, no collection config to maintain.
How it worksThe sidebar builds itself
There is no navigation array to maintain. A Vite plugin reads each page's frontmatter at build time; section names the group and order sorts it. Add a page, and it appears in the sidebar automatically, in the right place.
Also on the anvil
The three proofs above are the product. These ship with them.
Shiki at build time
A generous language set and dual light/dark themes on the HAST tree, not a client highlighter.
Search, llms.txt, sitemap
A command palette, AI-readable indexes, and SEO tags from the same content scan.
Themes and dark mode
One CSS import ships the token system. Eleven presets, both schemes, first-class.
Development in progress
The library is currently in active development. Each minor release may contain breaking changes until it reaches a stable v1.0 release.
Docs, wrought to run
Install the package, wire up the pipeline in three lines, and shape your first page.