Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

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.

Section titled Creating a Space 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.

hint:

Storyblok also supports various Single Sign-on (SSO) providers.


Once you click on adding a new space, you get a couple of options to choose from. You can mainly choose from creating a blank space {1}, a demo {2}, or contact for an enterprise once {3}.

For this purpose, we can choose to create a blank space from the pre-selected tab that says Select Plan {1}.

Creating a new space in Storyblok
1
2
3

Creating a new space in Storyblok

Once you continue with any of the plans, you will be taken to the next step where you need to add the space details {1}.

There are two fields, one for the space name {2} and the other to select the server location {3}. After this, you can click on Create a Space {4} button to continue.

1
2
3
4

Adding Space Details

Depending upon the plan you choose, you might need to complete further steps of adding some more information required.

Hint:

If you choose a paid plan, you will get 14 days of free trial for the plan you choose. After 14 days, you will be automatically subscribed to the plan.

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
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
1

The content section of a Storyblok space

Section titled Exploring the preconfigured Component Schema 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
1

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
1
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
1

The Feature blok, nested in the Grid blok

Learn:

To learn more about stories, story types, bloks and fields, visit our guide on Structures of Content.


Section titled Requesting Data from Storyblok's APIs 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
1

Accessing the Draft JSON of the Home story


Hint:

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.

Section titled Let’s talk about Code 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.

Section titled Configuring the Visual Editor 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
1
2
3
4

Setting the default environment for the Visual Editor preview

Section titled Experimenting with Content 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.

Section titled Ultimate Tutorial Series 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!