Understanding the UI

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.

Sidebar

Functionalities of the Sidebar:

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.

Space

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

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

Editor (Regular) 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.

Owner Dashboard

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

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.

Ideation Room (Beta)

Ideation Room is a collaborative environment wherein content creators can work on content ideas and share them with their team members before embedding them in stories. Content creators can benefit from Ideation Room's built-in AI assistance feature to enhance content creation and collaborate with their colleagues in real time.

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.

Assets

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

Datasources

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

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.

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.

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.

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:

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.

Action Dropdown Options

Entry Configuration Detail

The Visual Editor Preview

Content Area Detail

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}

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.