Get Started: How to Create a KitBook

Warning: This is alpha software and not ready. Watch the updating [Roadmap] for clues on when that will be.

Install the kitbook package: npm i -D kitbook@alpha or pnpm add -D kitbook@alpha
Add the kitbook() Vite plugin before your sveltekit() plugin:

vite.config.js
js
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite';
import { kitbook } from 'kitbook/plugins/vite';
export default defineConfig({
	plugins: [
		kitbook(),
		sveltekit(),
	],
});

Add the necessary MDSvex imports and configuration into your svelte.config.js:

svelte.config.js
js
import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex, MDSVEX_EXTENSIONS, KITBOOK_MDSVEX_CONFIG } from 'kitbook/plugins/vite';
const config = {
  extensions: ['.svelte', ...MDSVEX_EXTENSIONS],
	preprocess: [
    mdsvex(KITBOOK_MDSVEX_CONFIG),
    vitePreprocess(),
  ],
	// ...
};
export default config;

Place your app inside of a (group) folder named anything and add a kitbook folder to src/routes:

txt
src/routes/
│ (app)/
│ ├ dashboard/
│ ├ item/
│ └ +layout.svelte <-- initialize app only items, like db connections (refers to all layout files like +layout.ts)
│ kitbook/
└ +layout.svelte <-- initialize everything both your app and Kitbook need, like i18n

Run your dev server as normal (npm run dev, pnpm dev, etc…)
Kitbook will automatically copy its routing files to src/routes/kitbook. Please edit the settings found in src/routes/kitbook/+layout.svelte for your app, but don’t touch the other files as they will be overridden in future updates as needed.

At this point you can navigate to the /kitbook route and see all your Svelte components, including +page.svelte and +layout.svelte files as they are also just plain Svelte components with a very important data prop.

Next you could…

Edit page on GitHub