Understanding the UI

Section titled Overview Screen Overview Screen

The first screen you see after logging in to Storyblok is the overview screen of all the spaces you have access to. As you can see in the image below, the screen is divided into two main sections.

• Sidebar {1} - on the left-hand side
• Main dashboard {2} - on the right-hand side.

Section titled Sidebar Sidebar

Functionalities of the Sidebar:

Section titled Main Dashboard Main Dashboard

This area is fully focused on displaying the spaces you have access to along with creating a new space.

Click on the + Add Space {1} and choose from the following options:

• New Space
• Example Space - A demo space with sample project integration.

You can even search {2} and sort {3} your spaces.

Create a list of your favourite spaces by clicking on the star {4} next to the space name. The three dots {5} next to the star give the following options:

• View - To enter the space.
• Settings - For space settings.
• Duplicate - To duplicate the space.

Section titled Space Space

The UI of the space is the part of the application where the majority of the users will spend most of their time.

Section titled Dashboard Dashboard

The space dashboard is the first section you see after entering your space. There are multiple variations of the screen according to your role. The three different variations of the dashboard are:

• Editor Dashboard (Regular Dashboard)
• Admin Dashboard
• Owner Dashboard

Section titled Editor (Regular) Dashboard Editor (Regular) Dashboard

Section titled Admin Dashboard Admin Dashboard

Along with the Editor Dashboard, the admin will see Space Actions {1}, Plan Details {2} , Team Activities {3} and API Requests {4}.

As a space admin or owner, you can view detailed traffic usage analysis in the dashboard. It includes standard metrics for the last 30 days, 90 days, 6 months, and 1 year, along with tabs for asset traffic and API request traffic.

Section titled Owner Dashboard Owner Dashboard

The owner will see the same dashboard that an admin does, along with the functionality to see and update the subscription {1}

Section titled Content Content

The “Content Area” is an overview of all your stories in the space. Here, you can create the hierarchical or flat structure of your content. By creating different folders for Stories you create a hierarchical structure, which you can use in different use cases.

To open the Story, click on the row in the table representing the Story. It opens the Editor in Visual or Form-only form (depending on the settings of the Story). You can navigate through the hierarchical folder structure by clicking on the folder as you would do in a regular operating system.

Section titled Block Library Block Library

In the Block Library, you get an overview of all the blocks (Nested, Content-Type and Universal) that are in the space. You can create folders to group the blocks for a better overview.

Section titled Assets Assets

In the assets section, you can upload and manage your assets.

Section titled Datasources Datasources

Datasource is a collection of key-value pairs. Create a new collection by clicking “New” button on the top right corner.

Section titled Apps Apps

App Directory shows all apps that can be installed in the space. You can install or find out more about each App by clicking on its name, which opens a details page of the App.

Section titled Settings Settings

The settings section of each space can differ according to your role and plan of the space.

The space setting is divided into a few different tabs representing different areas of the settings. You can perform general actions of your space in this area and have a look at configuring your space to get a more detailed view of the functionalities.

Section titled Editor Editor

Storyblok offers two editor modes for each Story. You can always choose between the two and you can set-up the default mode to each folder in the content tree. These two modes/versions are:

• Visual Editor
• Form Only Editor

Open your Story in the Editor by clicking on the Story row in the content section.

Section titled Visual Editor Visual Editor

The visual editor is the key feature of Storyblok and it requires a configuration to work with your project. Follow this guide to find out how to properly configure the Visual Editor of your space.

The Visual Editor consists of the following parts:

Section titled Action Bar Action Bar

The action bar on the top is divided into two sections, one with a dark background and the other one with a white background.

Section titled Action Dropdown Options Action Dropdown Options

Section titled Entry Configuration Detail Entry Configuration Detail

Section titled The Visual Editor Preview The Visual Editor Preview

Section titled Content Area Detail Content Area Detail

Section titled Form Only Editor Form Only Editor

There are numerous use cases for Form Only Editor. Use it for Stories which don’t have any own frontend representation layer or use it if you want to focus on creating content instead of getting disrupted by the visuals.

You can switch between the Visual and Form Only Editor from the Entry Configuration on the Action Bar.

There is an option to switch between the Edit modes {1}

Section titled Visualize unpublished relations Visualize unpublished relations

Now, you can visualize unpublished relations between stories. When a story contains links to other stories that are not yet published, it can impact the display of the live website. To prevent unexpected behavior, we highlight these unpublished relations when you click on the publish button.