Skip to content

Documentation

Content Type System & Code Generation

How SveltyCMS generates TypeScript types for collections at build time, using the consolidated content architecture.

6/23/2026
3 min read Edit on GitHub

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:

  1. Compiles TypeScript definitions to .compiledCollections/*.js (Vite build).
  2. Scans compiled modules via engine.server.ts (scanCompiledCollections) with mtime caching.
  3. Loads schemas via loader.server.ts (loadSchemaNative() or worker pool in production).
  4. Generates TypeScript union types via the vite.ts plugin.
  5. Updates src/content/types.generated.ts with the ContentTypes union and CollectionMap.
  6. 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.ts is 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.

Related

developertypescollectionscode-generationtypescript
Was this page helpful?