Introduction
Sveltepress is a SvelteKit docs and blog site builder. Inspired by VitePress . Built on SvelteKit and UnoCSS — so you get a content toolkit and the full SvelteKit surface (SSR, adapters, server routes, hooks).
The navbar Playground opens a Feature directory of in-browser Starters. Markdown, Default Theme, and Vite plugin Entries share the Default Theme starter. Document versions ships on a Versions starter (versions init / create · versions build). Internationalization ships on a three-locale starter. Locale Playground URLs embed a same-path starter written in that language (src/routes/+page.md, config/navbar.js) — they do not add /zh/ or /bn/ routes, except the Internationalization Entry. Custom theme ships from Playground home only (there is no Guide leaf); its preview frames GlobalLayout, +layout.svelte, and PageLayout to match the layout hierarchy . Blog theme Entries (Configuration, Writing posts, Features, Customisation) share the Blog starter. Virtual modules is one Reference Entry on the Kitchen-sink starter; Open in Playground on virtual:sveltepress/site, locale, and versions all land there. Kitchen sink is the All features Entry and a Playground chrome CTA (not a site-navbar item). Blog theme and custom theme never live in that tree. Guide pages keep frozen Live code; the Blog demo stays a finished showcase.
Comparison
How does Sveltepress compare to other modern documentation solutions?
| Feature / Aspect | Sveltepress | VitePress | Astro (Starlight) | Docusaurus |
|---|---|---|---|---|
| Ecosystem | Svelte / SvelteKit | Vue 3 | Framework-agnostic | React |
| Build Engine | Vite 8 + SvelteKit 2 | Vite + Vue 3 | Vite + Astro compiler | Webpack |
| Fullstack Power | Full SvelteKit surface (SSR, API routes, hooks) | Static-focused SSG | Requires SSR adapter | Requires Node plugins |
| Reactivity | Svelte 5 Runes natively in .md | Vue 3 Composition API | Static by default (Islands) | React Hooks |
| Interactive Code | Native live components + Twoslash hover | Vue components | Requires plugins | Requires react-live |
| Doc Versioning | Content-addressed immutable deltas & diffs | Branch/dir-based | Requires plugins | Directory snapshot copies |
| Search | Pagefind (built-in) / DocSearch / Meilisearch | Pagefind / DocSearch | Pagefind | Algolia / local plugins |
AI Knowledge (llms.txt) | Built-in automatic generation | Third-party plugin | Third-party plugin | Third-party plugin |
Project structure
Exactly the same as Project structure - SvelteKit
Except for that you can use .md files for pages or layouts. For example:
src/routes/+page.mdis recognized as home pagesrc/routes/+layout.mdis used for root custom layout
Sveltepress preserves the full power of SvelteKit. You can do more than SSG. For example use +page.server.js, +layout.server.js, hooks.server.js to do some server side logic like: Authentication, DB Docking, ...
Layout hierarchy
There must be a src/routes/+layout.svelte or src/routes/+layout.md as root layout file. Otherwise the global layout provided by theme would not working!
For example if your file tree look like this
.
├─ src
│ ├─ routes
│ │ └─ +layout.(svelte|md)
│ │ ├─ foo
│ │ │ ├─ +page.(svelte|md)
│ │ │ ├─ +layout.(svelte|md)theme.globalLayout > src/routes/+layout.(svelte|md) > theme.pageLayout > src/routes/foo/+layout.(md|svelte) > src/routes/foo/+page.md
Here's a graph to help you understand
Visualizing how global themes, project layouts, and leaf pages wrap into each other
Markdown technical documentation, code blocks, or custom Svelte components render here...
Configuration
Sveltepress's config is passed to @sveltepress/vite vite plugin, all options are fully typed.
Read Vite plugins options for more details.
Building a multi-language site? See Internationalization .
Deployment
It is recommended to read Adapters - SvelteKit first.
If you use npm/yarn/pnpm create @sveltepress to create a new project.
The Adapter Static would be used as default.
But feel free to change to any adapters you want.