Getting Started
This guide below shows you how to create a space, explain the preconfigured component schema, and connect the Visual Editor with a starter project created with the @storyblok/create-demo CLI.
Creating 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.
Storyblok also supports various Single Sign-on (SSO) providers.
You can choose from two options when creating a new space:
- New space: create a blank space from scratch.
- Example space: create a new space that comes with an example site and content.
For our purpose, select New space {1} and choose a name for your project {2}. You can also choose whether your space should be hosted in the European Union or the United States {3}.
)
Creating a new space in Storyblok
After you have created a new space it opens automatically and you can see the tips on how to continue from here. The terminal command provided in step 2 will be used at a later point to create a starting point for your frontend {1}.
)
The Get Started section of a newly created Storyblok space
From here, you can move over to the Content section {1}, where you can manage all of the content that exists in the newly created space. It is possible to search, filter, and sort stories and create new stories or folders.
)
The content section of a Storyblok space
Exploring the preconfigured Component Schema
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 frontend. On the right, you can find 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.
The story Home is an instance of the story type Page {1}. A story type defines which components can be used within the story. As you can see, the preconfigured story contains two bloks of the types Teaser and Grid. The Teaser consists only of a text field to hold the headline.
)
The Visual Editor showing the Home story
Clicking on the Grid blok {1} reveals three nestable bloks of the blok type Feature {2}.
)
Exploring the schema of the Grid blok
The Feature blok consists of only a text field for the name {1}.
)
The Feature blok, nested in the Grid blok
To learn more about stories, story types, bloks and fields, visit our guide on Structures of Content.
Requesting Data from Storyblok's APIs
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 Home story, click the Draft JSON button {1} in the Visual Editor. A new window will open and you will see the returned JSON data structure.
)
Accessing the Draft JSON of the Home story
You can 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. Its draft version is viewable only using a preview access token. This mechanism is used to allow you to preview your content before publishing. You can use the Publish button to create a new published version that matches the latest draft version. If you now click the Published JSON button, you will see a very similar JSON structure.
Let’s talk about Code
Learn how to kickstart a new CMS project with your favorite technology on our Quickstart Page.
The fastest way to create and connect a frontend is to use the terminal command provided in step 2 of the Get Started section of your newly created space:
npx @storyblok/create-demo@latest --key your-preview-access-token
When executing this command, you can choose from a variety of popular frontend frameworks. After having completed the installation wizard, you can install the project dependencies and launch the framework's local development server.
Configuring the Visual Editor
To connect the Visual Editor Preview in Storyblok with your project, you need to go to Settings {1} > Visual Editor {2} and provide the URL of your local development server {3}. Save your changes by clicking the Save button in the top right-hand corner {4}.
)
Setting the default environment for the Visual Editor preview
Experimenting with Content
Now, you can open your Home story and experiment 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 works. You can also try hovering over the preview area and clicking on the outlined components to open the corresponding content on the right-hand side.
Ultimate Tutorial Series
The following tutorials are the ideal next step to take after having worked through this resource. The Ultimate Tutorial Series provides you with bite-sized, easy-to-follow content pieces, assisting you in developing and deploying your first Storyblok web project with the technology of your choice!