https://github.com/storyblok/blueprint-core-svelte
Storyblok core space blueprint for Svelte
https://github.com/storyblok/blueprint-core-svelte
blueprint port-5173 storyblok
Last synced: 3 months ago
JSON representation
Storyblok core space blueprint for Svelte
- Host: GitHub
- URL: https://github.com/storyblok/blueprint-core-svelte
- Owner: storyblok
- Created: 2025-04-10T22:11:36.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-07-10T11:19:13.000Z (3 months ago)
- Last Synced: 2025-07-10T18:49:57.068Z (3 months ago)
- Topics: blueprint, port-5173, storyblok
- Language: JavaScript
- Homepage:
- Size: 50.8 KB
- Stars: 1
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Storyblok Core Space Blueprint: Svelte
Integrate [Svelte](http://svelte.dev/) with [Storyblok](http://www.storyblok.com) 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](https://storyblok.com/docs/guides/svelte) 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](https://storyblok.com/docs/packages/storyblok-svelte) for further information.
---
[](https://codespaces.new/storyblok/blueprint-blank-svelte)
[](https://app.storyblok.com/#/signup)
[](https://storyblok.com/join-discord)
## Get Started
**No Storyblok account yet? [Sign up now](https://app.storyblok.com/#/signup?utm_source=docs) 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
```sh
npm install
```
### Authentication
In the root of the project, create a `.env` file to store your Storyblok access tokens:
```sh
STORYBLOK_DELIVERY_API_TOKEN=
```
> [!IMPORTANT]
> Copy your space's preview access token from **Settings** > **Access Tokens**.
> Learn more about Storyblok [access tokens](https://www.storyblok.com/docs/concepts/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:
```sh
npm run dev
```
> [!IMPORTANT]
> To connect the Storyblok Visual Editor, the local project must run over HTTPS. Learn more in the [Visual Editor concept](https://www.storyblok.com/docs/concepts/visual-editor#local-development-via-https). See the [Visual Preview part of the Svelte guide](https://storyblok.com/docs/guides/svelte/visual-preview) 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](https://www.storyblok.com/docs).
- To learn more about the integration between Storyblok and Svelte, check our [dedicated developer tutorials](https://www.storyblok.com/tutorials?technologies=svelte).
- - To learn more about Svelte, check the [official documentation](https://svelte.dev/docs).
### Support
- Have questions, need help, want to chat with other users? [Join our Discord community](https://storyblok.com/join-discord).
- Visit the Storyblok [Help Center](https://support.storyblok.com/hc/en-us).