Steps

A numbered walkthrough for sequential instructions.

A numbered walkthrough (a connecting line with numbered badges) for setup flows where the order matters. Each step is a <Step>; the numbers are automatic.

Install the package

Add svelte-docsmith to your SvelteKit project.

Add docsmith() in svelte.config.js and vite.config.ts.

Write a page

Drop a +page.md under src/routes/docs/ and it appears in the sidebar.

Usage

Steps and Step are plain components. They work in a markdown page and in any .svelte file, with no preprocessor required. Give each Step an optional title; leave blank lines around markdown content so it’s parsed.

			<script>
	import { Steps, Step } from 'svelte-docsmith';
</script>

<Steps>
	<Step title="First">Do this.</Step>
	<Step title="Then">Do that.</Step>
</Steps>

Markdown shortcut

Inside a markdown page only, you can skip the <Step> tags and use a plain ordered list, and mdsvex turns it into steps:

			<Steps>

1. Do this.
2. Do that.

</Steps>

API reference

Steps

Wraps its <Step> children; no other props.

Step

title string

Optional heading for the step.