Integrate Svelte with Storyblok as a headless CMS.
This blueprint is ideal for kickstarting new Storyblok and Svelte projects. What's inside:
page
, teaser
, grid
, and feature
[!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.
No Storyblok account yet? Sign up now to experience a 14-day free trial of all features and enjoy our completely free Starter plan.
npm install
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.
To render a preview of the local project in the Visual Editor, follow these steps:
https://localhost:5173/
.home
story./
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!