Type-Safe Schemas with @storyblok/schema
- User Experience
- Developer Experience
Define fields, blocks, and datasources as type-safe TypeScript objects and keep your code and content model in sync automatically. We give you a schema-driven way to manage content models: @storyblok/schema. Paired with the Storyblok CLI, it lets you define fields, blocks, and datasources directly in code using defineField(), defineBlock(), and defineDatasource(), then push those definitions to your space with schema push. Until now, content models lived in the UI and Management API, and code only consumed them via storyblok types generate. That's an inverted flow: types are generated for code instead of from code, an accidental change in the block library can break the frontend without warning, and versioning the structures your code depends on requires workarounds. @storyblok/schema flips this around, where your repo becomes the single source of truth, and both your space and your frontend types stay in sync with it. Highlights: Bootstrap from an existing space: storyblok schema init generates schema objects for all your current components, similar to types generate.Type-safe definitions: defineField(), defineBlock(), and defineDatasource() catch mistakes at compile time.Push straight from your terminal: storyblok schema push (with a --dry-run option) applies your schema files to the space.Framework-ready types: the BlockContent<TBlock, TBlocks> utility type extracts exactly the props a Vue or React component needs from a schema object.Version-controlled content models: schemas are plain TypeScript files, so diffs, PRs, and rollbacks work the way they do for the rest of your code. Give it a try and tell us what works and what's missing! [@storyblok/schema package] [Learn More]