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.

Create a space

After you sign up for Storyblok (https://app.storyblok.com/#!/signup), or if you already have registered for an account, you need to create a new space.

Image of dashboard - create a new space

There are four options to choose from when creating a new space:

  • Create a new space: create a space with sample content
  • Duplicate a space: duplicate a space you already have access to
  • Play with a demo: create a new space that comes with an example site and content
  • Join a space: request access to an existing space

Select „Create a 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 content area.

Image of content area in created space

The content area of the Storyblok UI allows you to manage your content. It is possible to search and sort stories and to create new content or folder structure.

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. For now, we are going to use the right part of the screen. The left part of the screen is used to preview your frontend. The preview of the Visual Editor will be configured and used later in this guide.

Image of Visual Editor showing page structure. Annotation: 1) page component

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.

Image of Visual Editor showing Grid component The „Grid“ Blok contains three Bloks of type „Feature“. The „Feature“ consists of only a text field for the name.

Visual Editor showing feature component. Annotations: 1) text field, 2) save button

The name can be edited in the text field {1}. To save your changes click the save button {2}.

learn:

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 api.storyblok.com.

Image of visual editor with publish dropdown. Annotation: 1) Published json, 2) Draft json, 3) Publish

To see what the API will return for the story called „Home“, click the „Draft json“ button {2} in the visual editor. A new window will open and you will see the returned JSON data structure.

hint:

Use a browser plugin to format the JSON output. For example JSON Formatter - Chrome Web Store 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 {3} 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 {1} you will see a very similar JSON structure with the published content.

learn:

To learn more about the returned data visit Accessing your Data and Structures of Content. Storyblok also offers GraphQL API - read more about it here.

Let’s talk about code

required:

You need to have a GitHub account to fork the CodeSandbox project and a newly created space. Follow the steps above to create a new space.

This demo is built using Nuxt.js and all you have to do is configure a bridge between your Storyblok space and the Nuxt.js project.

First, open the CodeSandbox with the button below and fork the project. Next, you need to bridge the Nuxt.js project with Storyblok space using the access token by following these steps.

Codesandbox button

  1. Go to the CodeSandbox and fork the project by clicking the fork button in the top right corner.
  2. 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.
  3. Replace the value of accessToken in the nuxt.config.js file with the preview token you obtained in previous step.
  4. Save your changes and let the CodeSandbox recompile the Nuxt.js project.
  5. Restart the CodeSandbox server from the “Server Control Panel”. This is necessary to load the updated nuxt.conf.js file.

Now, your CodeSandbox project is connected to your newly created Storyblok space.

Setup of the Visual Editor Preview

To connect the Visual Editor Preview in Storyblok with your Nuxt.js project you need to copy the URL from the embedded CodeSandbox browser window (URL similar to http://.sse.codesandbox.io {1}) and add it into the field Location (default environment) in the Settings area of your space under the tab General {2}. Save your changes by clicking the button in top right-hand corner of Storyblok UI.

Image showing the URL (1) from CodeSandbox and where to add it (2) in Storyblok

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.