Tiramisu Docs

Customization

Project Structure

Understand the key files and folders in a Tiramisu Docs project built on SvelteKit.

A Tiramisu Docs project follows a standard SvelteKit layout with a few Tiramisu-specific conventions.

File Tree

my-docs
src
docs
en
getting-started.tiramisu
guide.tiramisu
lib
tiramisu.config.ts
components
index.ts
tiramisu
MyCustomWidget.svelte
routes
docs/[...slug]
+page.svelte
+page.ts
app.css
svelte.config.js
vite.config.ts
package.json

Key Files

FilePurpose
src/lib/tiramisu.config.tsMain configuration file. Defines title, sections, sidebar, i18n, and more.
src/docs/Documentation content. Each .tiramisu file becomes a page.
src/lib/components/index.tsComponent barrel file. Re-exports all kit components. Edit to override any built-in.
src/lib/components/tiramisu/Custom components. Any Svelte component here can be used as a Tiramisu function.
src/routes/docs/[...slug]/The catch-all route that renders documentation pages.
vite.config.tsVite configuration with the tiramisuPlugin().
svelte.config.jsSvelteKit adapter configuration.
src/app.cssGlobal styles. Import the Tiramisu theme here.

The Docs Route

The src/routes/docs/[...slug]/ directory contains two files that power the documentation:

+page.ts loads the compiled Tiramisu content and metadata:

typescript 
import { loadDoc } from "@tiramisu-docs/kit";

export const load = loadDoc;

+page.svelte renders the documentation layout:

svelte 
<script>
  import { DocsLayout } from "@tiramisu-docs/kit";
  let { data } = $props();
</script>

<DocsLayout {...data}>
  <data.component />
</DocsLayout>