Getting Started
In the guide below, we show you how to create a space, explain the prepared data structure, and hook up the Visual Editor with an example project from CodeSandbox and Stackblitz.
Create a Space
The first step on your Storyblok journey is either signing up for Storyblok, or (if you already have an account) logging in. Once you are logged in, you can create a new space.
There are three options when creating a new space:
New space: create a space from scratch.
Example space: create a new space that comes with an example site and content.
Use a blueprint: Choose a template from our library.
For our purpose, select “New space” {1} and choose a name for your project {2}. After you have created a new space it opens automatically and you can see the tips on how to continue from here.
From here, we can move over to the Content Tab, where we can manage our content. It is possible to search and sort stories and create new content or folder structures.
Prepared data structure
Let’s take a look at the story we have already prepared for you: “Home”. Once you click on the story, the Visual Editor opens. On the left, you see a visual representation of your front end. On the right, is the corresponding schema and page structure. We will focus on the structural part on the right for now and explore how to configure the live preview later in this guide.
On the right-hand side of the screen is the editing area. The initial story “Home” is an instance of the content type “page” {1}. A content type defines which components can be used within the story. As you can see the prepared story contains two Bloks of type “Teaser” and “Grid”. The “Teaser” consists only of a text field to hold the headline.
The “Grid” Blok {1} contains three Bloks of type “Feature” {2} . The “Feature” consists of only a text field for the name.
To learn more about stories, content types, bloks and fields, visit our guide on Structures of Content.
API requests
Storyblok is built as a headless CMS around a Content Delivery API. The API can be reached at the URL https://api.storyblok.com/.
To see what the API will return for the story called “Home”, click the “Draft json” button {1} in the visual editor. A new window will open and you will see the returned JSON data structure.
Use a browser plugin to format the JSON output. For example, the JSON Formatter works great with all Chrome-based browsers.
The returned JSON represents the story and the draft version is viewable only using a preview token. This mechanism is used to allow you to preview your content before publishing. Click the “Publish” button {2} to make the story available to the public. The publish indicator next to the dropdown should have switched to green. If you now click the “Published json” button {3} you will see a very similar JSON structure with the published content.
Beside the traditional REST API you can also use Storyblok with GraphQL API .
Let’s talk about code
You need to have a GitHub account to fork the CodeSandbox or Stackblitz project and link it to a newly created space. Follow the steps above to create a new space.
Pick your favourite framework and get started: All you have to do is configure a bridge between your Storyblok space and the project.
First, open the CodeSandbox or Stackblitz with the button below and fork your preferred project. Next, you need to bridge the project with your Storyblok space using the access token by following these steps.
Don’t worry if the technology of your choice is not listed among the demos. Check out our list of resources to find more of the 5-minute-tutorials.
Next.js Example
- Go to the StackBlitz Demo and fork the project by clicking the fork button in the top right corner.
- Obtain a preview token from your Storyblok space. You can find it in the Settings area of your newly created space under the tab API-Keys.
- Replace the value of accessToken in the pages/_app.js file with the preview token you obtained in the previous step.
- Save your changes and let StackBlitz recompile the Next.js project.
Nuxt 2 Example
- Go to the StackBlitz and fork the project by clicking the fork button in the top right corner.
- Obtain preview token from your Storyblok space. You can find it in the settings area of your newly created space under the tab API-Keys.
- Replace the value of accessToken in the nuxt.config.js file with the preview token you obtained in previous step.
- Save your changes and let StackBlitz recompile the Nuxt.js project.
Nuxt 3 Example
- Go to the StackBlitz and fork the project by clicking the fork button in the top right corner.
- Obtain preview token from your Storyblok space. You can find it in the settings area of your newly created space under the tab API-Keys.
- Replace the value of accessToken in the nuxt.config.js file with the preview token you obtained in previous step.
- Save your changes and let StackBlitz recompile the Nuxt.js project.
Gatsby.js Example
- Go to the CodeSandbox and fork the project by clicking the fork button in the top right corner.
- Obtain preview token from your Storyblok space. You can find it in the settings area of your newly created space under the tab API-Keys.
- Replace the value of accessToken in the gatsby-source-plugin in the gatsby-config.js file with the preview token you obtained in the previous step.
- Save your changes and let the CodeSandbox recompile the Gatsby.js project.
- Restart the CodeSandbox server from the “Server Control Panel”. This is necessary to load the updated gatsby-config.js file.
CodeSandbox example above is temporarily working in progress. Please use our boilerplate GitHub repository from here.
SvelteKit Example
- Go to the StackBlitz Demo and fork the project by clicking the fork button in the top right corner.
- Obtain a preview token from your Storyblok space. You can find it in the Settings area of your newly created space under the tab API-Keys.
- Replace the value of accessToken in the routes/__layout.svelte file with the preview token you obtained in the previous step.
- Save your changes and let StackBlitz recompile the SvelteKit project.
React Example
- Go to the StackBlitz Demo and fork the project by clicking the fork button in the top right corner.
- Obtain a preview token from your Storyblok space. You can find it in the Settings area of your newly created space under the tab API-Keys.
- Replace the value of accessToken in the index.js file with the preview token you obtained in the previous step.
- Save your changes and let StackBlitz recompile the React project.
Vue Example
- Go to the StackBlitz Demo and fork the project by clicking the fork button in the top right corner.
- Obtain a preview token from your Storyblok space. You can find it in the Settings area of your newly created space under the tab API-Keys.
- Replace the value of accessToken in the src/main.js file with the preview token you obtained in the previous step.
- Save your changes and let StackBlitz recompile the Vue project.
Setup of the Visual Editor Preview
To connect the Visual Editor Preview in Storyblok with your project, you need to copy the URL from the embedded CodeSandbox / Stackblitz browser window (URL similar to http://.sse.codesandbox.io) and add it into the field Location {1} (default environment) in the Settings {2} area of your space, under the tab Configurations. Save your changes by clicking the button in the top right-hand corner of the Storyblok app.
Play with Content
Now, you can open your “Home” story and play with the content shown on the right-hand side. We encourage you to create, edit, move, and delete the content to experience how the Visual Editor Preview works. Try also to hover over the preview area and click on different outlined HTML elements to open the corresponding content on the right-hand side.
If you want to see your content changes in the CodeSandbox embedded window outside of the Visual Editor, you have to save your content changes in Storyblok and reload the embedded window in the CodeSandbox.