sdocs

A lightweight documentation tool for Svelte 5 components.

npm install -D sdocs

Get started Documentation

One small file per component

Drop a .sdoc file next to a component and it appears in an interactive explorer: live preview, controls generated from args, and a prop table extracted from the component itself. No stories API to learn — a doc file is a Svelte file, with snippets for every state you want to show.

<script lang="ts">
	import Button from './Button.svelte';
</script>

[SHOWCASE title="@components/Button" description="A flexible button."]

	[component component={Button} args={{ label: 'Click me' }}]
		<Button {...args} />
	[/COMPONENT]

	[example title="Sizes"]
		<Button label="Small" size="sm" />
		<Button label="Large" size="lg" />
	[/EXAMPLE]

[/SHOWCASE]

The three faces of sdocs

Explorer

The interactive component browser built from your .sdoc files — live previews, prop controls, theming, and search.

Explore the docs

CLI

npx sdocs run starts the Explorer in any project with zero install, and sdocs build ships it as a static site.

Command reference

VS Code Extension

Full Svelte IntelliSense in .sdoc files, plus a Projects view that runs and shows your docs inside the editor.

Extension guide

This site is built with sdocs itself — the Demo section showcases the site's own components, every guide you're reading is a [DOC] entity, and this landing page is a [PAGE].