Storyblok Blank Space Blueprint: React

Integrate React with Storyblok as a headless CMS.

This blueprint is ideal for kickstarting new Storyblok and React 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 React 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/react 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 the Storyblok access token:

VITE_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. 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 React 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 React, check our dedicated developer tutorials.
• To learn more about React, check the official documentation.

Support

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