Storyblok Core Space Blueprint: Svelte

Integrate Svelte with Storyblok as a headless CMS.

This blueprint is ideal for kickstarting new Storyblok and Svelte projects. What's inside:

• Pre-configured default blocks: page, teaser, grid, and feature
• Support for the Visual Editor's live preview
• Dynamic routing to fetch and render new stories automatically
• Minimal styling

[!TIP] Follow our Svelte guide for a step-by-step walkthrough and learn more about Storyblok's range of features, including rich text rendering, custom content modeling, and internationalization. See the @storyblok/svelte package reference for further information.

Get Started

No Storyblok account yet? Sign up now to experience a 14-day free trial of all features and enjoy our completely free Starter plan.

1. Create an empty new Storyblok space
2. Create a new repository based on this template
3. Open the project on your device
4. Install dependencies

npm install

Authentication

In the root of the project, create a .env file to store your Storyblok access tokens:

STORYBLOK_DELIVERY_API_TOKEN=<REPLACE_WITH_YOUR_TOKEN>

[!IMPORTANT] Copy your space's preview access token from Settings > Access Tokens. Learn more about Storyblok access tokens.

Connect the Visual Editor

To render a preview of the local project in the Visual Editor, follow these steps:

1. In your space, navigate to Settings > Visual Editor.
2. Set the default environment to https://localhost:5173/.
3. Save.
4. Open the home story.
5. Click Config.
6. Type / in the Real path.

Run the development server:

npm run dev

[!IMPORTANT] To connect the Storyblok Visual Editor, the local project must run over HTTPS. Learn more in the Visual Editor concept. See the Visual Preview part of the Svelte guide for detailed instructions.

Back in Storyblok, open the Home story to start editing.

Happy building!

Resources

• To learn more about what you can do with Storyblok, visit our documentation and learning hub.
• To learn more about the integration between Storyblok and Svelte, check our dedicated developer tutorials.
• • To learn more about Svelte, check the official documentation.

Support

• Have questions, need help, want to chat with other users? Join our Discord community.
• Visit the Storyblok Help Center.