Skip to content
New Synced tabs and nested sidebar sections.
Svelte DocSmith
New Built with Svelte 5 + SvelteKit

Craft documentation worthy of legend.

A documentation framework for Svelte. Your interactive examples live inside one real, stateful app, not screenshots, not sandboxed islands. Markdown compiles to real routes, and the sidebar builds itself.

Start smithing
hero-demo.svelte
<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>
Live

Real component, real state: the button above is running, not a picture of one.

Show, don't tell

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
src/routes/docs/quick-start/+page.md
---
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.
…/quick-start/+page.md /docs/quick-start

No loaders, no config

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 works

Nav is derived, never written

The 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.

Getting Started

  • Introduction
  • Installation
  • Quick Start
  • Configuration

Core Concepts

  • How it works
  • Writing pages
  • Live Examples
  • Theming
  • Search
  • SEO

Everything a docs site needs, ready off the anvil

You bring the words. DocSmith brings the pipeline, the layout, and the chrome.

Shiki highlighting

A generous language set, dual light/dark themes, run on the HAST tree at build time.

First-class dark mode

Every component and code block flips with the theme. Not an afterthought.

Table of contents

The in-page TOC scans your rendered headings and tracks what you are reading.

Responsive shell

Header, collapsible sidebar, and mobile nav: the whole chrome, out of the box.

Anchors & copy buttons

Linkable headings and one-click copy on every code block, wired up for you.

Themeable

One CSS import ships the token system. Swap in a preset or override any token.

Docs, wrought to run

Install the package, wire up the pipeline in three lines, and shape your first page.

Light the forge Star on GitHub