Content Type System & Code Generation
How SveltyCMS generates TypeScript types for collections at build time, using the consolidated content architecture.
On this page
SveltyCMS uses a build-time code generation system to create TypeScript types for your collections, providing full type safety across the entire codebase.
🎯 Overview
When you define collections in config/collections/, SveltyCMS automatically:
- ✅ Compiles TypeScript definitions to
.compiledCollections/*.js(Vite build). - ✅ Scans compiled modules via
engine.server.ts(scanCompiledCollections) with mtime caching. - ✅ Loads schemas via
loader.server.ts(loadSchemaNative()or worker pool in production). - ✅ Generates TypeScript union types via the
vite.tsplugin. - ✅ Updates
src/content/types.generated.tswith theContentTypesunion andCollectionMap. - ✅ Provides IDE autocomplete for all collection names (re-exported from
src/content/types.ts).
🔄 How It Works
1. Vite Plugin Watcher
The system uses a Vite plugin (src/content/vite.ts) that watches for changes in .compiledCollections/. It loads scanCompiledCollections from engine.server.ts (same scanner as runtime reconciliation) and injects the updated union type into src/content/types.generated.ts (between AUTOGEN markers).
2. Marker Comments for Stability
To prevent file corruption during rapid Vite reloads, the system uses Marker Comments:
/* AUTOGEN_START: ContentTypes */ and /* AUTOGEN_END: ContentTypes */.
The plugin specifically targets the content between these markers, ensuring manually added types or imports are preserved.
3. Production Optimization
In production mode, the system bypasses the Vite watcher and uses engine.server.ts for high-performance direct filesystem scanning.
📊 Benefits
1. Type Safety Everywhere
Autocomplete for collection names and validation for field types.
import type { ContentTypes } from "@src/content/types";
function getCollection(name: ContentTypes) {
return contentSystem.collections.get(name);
}
2. Refactoring Safety
When you rename a collection file, TypeScript catches all references across the app.
📁 Key Files
| File | Purpose |
|---|---|
src/content/index.ts |
Browser-safe public API facade |
src/content/index.server.ts |
Server-only entry (init, CRUD, ensureContentInitialized) |
src/content/engine.server.ts |
Scanner, reconciliation, cache, watcher |
src/content/loader.server.ts |
Schema module loading (native + worker pool) |
src/stores/content-registry.svelte.ts |
Reactive state using Svelte 5 runes |
src/content/content-utils.ts |
Navigation, metrics, pure helpers |
src/content/types.ts |
Unified interfaces; re-exports generated types |
src/content/types.generated.ts |
Autogenerated ContentTypes union (do not edit manually) |
src/content/vite.ts |
Vite plugin for build-time type generation |
🚀 Performance
- Zero Runtime Overhead: Types are stripped during compilation.
- Tree-Shakable: Server-only logic in
engine.server.ts/loader.server.tsis never sent to the client. - Incremental Updates: Only modified collections trigger an update in the types file.
- Single scanner: Vite and runtime share
scanCompiledCollections()— consistent schema discovery.