Extending the kit

The component kit lives in src/lib/components/kit/. These are the components an author can use inside a Markdown page, like <Callout> or <Steps>. Adding one is three steps.

Create the component

Add a Svelte component under src/lib/components/kit/. It receives its attributes as props and its inner Markdown as a children snippet.

<script lang="ts">	let { title, children } = $props();</script><aside class="note">	<strong>{title}</strong>	{@render children()}</aside>

Export it

Export it from src/lib/index.ts, the kit’s public surface.

export { default as Note } from './components/kit/Note.svelte';

Register the tag

Map the tag name to the component in src/lib/markdown/registry.ts. This is what lets the renderer find it.

import { Note } from '$lib';export const registry = { Note /* ...the rest */ };

After a pnpm build:engine, an author can write <Note title="Heads up">...</Note> in any page.

How components receive content

A component gets two things. Its attributes arrive as props, parsed into real values by the attribute grammar, so cols={2} is the number two and open is true. Its inner Markdown arrives as a children snippet, already rendered, so a component can wrap arbitrary content without knowing what it is.

Lowercase tag names are treated as plain HTML elements, capitalized names as kit components. So <br> stays an element and <Note> is resolved from the registry.

Beyond components

The generation endpoints in src/routes/ (search, sitemap, feeds, OpenGraph images) read from the same content-store. If you add a new output, model it as an endpoint that the build crawler can fetch, and add it to the manifest so the crawler writes it.