Skip to main content

Live article:

  • FAQ
  • How can I utilize TypeScript in my Storyblok project?

If you would like to use TypeScript in your Storyblok project(s), the Universal JavaScript Client, the JavaScript SDK, as well as Storyblok's framework-specific SDKs for React, Vue, Nuxt, Svelte, Astro, and Gatsby, offer full TypeScript support. This results in a significantly improved developer experience, offering auto-completion, static typing, warnings, and more.

It is highly recommended to use the storyblok-generate-ts package provided by Storyblok's ambassador Dominic Garms. In combination with the Storyblok CLI, you can generate types for the components defined in the Block Library of your Storyblok space.

To get started, follow these steps:

  1. Install the Storyblok CLI: npm i -g storyblok
  2. Login using storyblok login in your terminal
  3. In your project directory, save the schema of your Storyblok components in a .json file by running storyblok pull-components --space SPACE_ID
  4. Install storyblok-generate-ts: npm i -D storyblok-generate-ts
  5. Add the following command to your package.json: "generate-sb-types": "storyblok-generate-ts source=./components.[SPACE_ID].json target=./component-types-sb"
  6. Generate the types: npm run generate-sb-types
  7. Import the type in each component, for example: import type { PageStoryblok } from '../component-types-sb'
  8. Remember to rerun the pull-components and generate-sb-types scripts after you've made changes to your component schema in your Storyblok space

Please refer to the documentation of Storyblok CLI and storyblok-generate-ts for advanced use cases, customization options, and more.