Storyblok’s Community Plan is an excellent starting point for developers exploring the platform. It allows you to take your first steps with Storyblok, familiarize yourself with its logic, and understand its basic features—all free. However, evaluating and choosing the plan that best fits your specific needs is essential for real-world, production-level projects.
This guide will walk you through creating a Storyblok space with the Community Plan, retrieving the preview access token, and configuring the Visual Editor to work seamlessly with your local development environment.
Step 1: create a space with the Community Plan
- Sign Up or Log In to Storyblok Head to the Storyblok website and either sign up for a free account or log in.
-
Create a new space
- After logging in, navigate to your "My Space" dashboard.
- Click the "+ Add Space" button.
- Select the Community Plan (a free option for learning and start small projects).
- Give your space a name, and your new space is ready to use!
Step 2: Retrieve the Preview Access Token
- Access Tokens
- Go to Settings → Access Tokens from your Storyblok space dashboard.
- Storyblok automatically generates a default Preview Access Token for you. This token is crucial for accessing preview content that hasn’t been published yet.
- Copy the Token
- Locate the default Preview Access Token in the list.
- Use the copy icon to copy the token to your clipboard.
Why is this important?
The preview access token is required to link your Storyblok space with your local project. It ensures that you can work with unpublished content and effectively use the Visual Editor.
Step 3: Configure the Visual Editor
- Set the Visual Editor Location
- Navigate to Settings → Visual Editor → Location.
- Enter the URL of your locally running project. For example: https://localhost:5173/
- Save the configuration.
- Test the Integration
- Ensure your local development server is running on the specified URL (e.g., port 5173).
- Open the Visual Editor in Storyblok and verify that it syncs with your local project.
Ensure your local project is set up to handle Storyblok’s preview requests by incorporating the preview access token in your API calls.
Setup your local project
Once you created a new space, and got a Preview Access token, you can build your local project, for example reading this tutorial (SvelteKit project): https://dev.to/robertobutti/integrating-sveltekit-with-storyblok-using-svelte-5-384p
Wrapping Up
Following these steps, you’ve successfully created a Storyblok space using the Community Plan, retrieved the preview access token, and linked the Visual Editor to your local development environment. This setup is perfect for testing and learning.
When you're ready to move to production, consider Storyblok’s other plans to ensure your needs—such as scalability, support, and advanced features—are met.
Start building with Storyblok and experience a streamlined, dynamic content management system! If you need a quick tutorial to start easily, you can follow these instructions: https://dev.to/robertobutti/integrating-sveltekit-with-storyblok-using-svelte-5-384p
Top comments (0)