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.

  • Navigation Bar {1} - on the left-hand side
  • Main dashboard {2} - on the right-hand side, where you can create new space

Overview screen of the Storyblok UI; 1 Navigation Bar & 2 Main Dashboard

Besides the overview of spaces, the navigation bar has some additional functionality:

Actions & Areas Description
Account Dropdown Navigation {3} Account dropdown is hidden behind the arrow next to the Storyblok logo and you can use it to get to the following actions:

- Open your account settings
- Logout from Storyblok UI
- Manage Plugins (Custom Field Types, Tools)
Create a new Space {4} Click here if you need to create a new space. The new space creation guide will open and you can perform one of the following actions:

- create a new space
- duplicate your existing space
- initialise demo space with sample project integration
- join existing space
Overview of spaces {5} Here you can find all the spaces you are participating in. It doesn’t matter what role you have in the space. You can also create a list of your favourites by clicking on the star next to the space name.

Main dashboard

This area is fully focused on creating the new space. Click the button to create a new space and choose from one of the following actions:

  • create new space
  • duplicate your existing space
  • initialise demo space with sample project integration
  • join existing 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:

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

Editor (Regular) Dashboard

Regular dashboard of the space

Area Description
Users {1} Shows the allowed number of users and the number of used seats.
Usage {2} Represents the global stats of the space - the number of all stories and assets.
Content activities {3} Represents the number of activities made in the space in the last 14 days per each day.
My Last Edits {4} Shows the latest changes of the logged user.
Recent Content Changes {5} Shows recent change from all users.

Admin Dashboard

Along with the Regular Dashboard, the admin will see Traffic {2}, Api Requests {1} and Recent Activities {4} boards.

Admin view of space dashboard

Area Description
Api Requests {1} Represents the number of API requests made in the last 14 days per each day.
Traffic {2} Represents the traffic in bytes per month. If you click on one of the bars you can see a breakdown in days of that month.
Traffic Details {3} Shows the traffic per day in bytes.
Recent Activities {4} Shows the last 4 changes made in the space. By clicking on the change you can view the details.

Owner Dashboard

Owner dashboard of the space

The owner of the space will see the same dashboard as the admin, but the usage section will be replaced with the subscription section. The subscription section shows the current plan of the space and also allows the owner to change the plan.

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 (depends on the settings of the Story). You can navigate through the hierarchical folder structure by clicking on the folder as you would do in regular operating system.

Content area of the space

Area Description
Search {1} You can search using the names of the Stories and Folders.
Filter {2} Open/close the filter options of the view.
Multiselect {3} Multiselect selects all the entries in the current folder and shows the select controls.
Folder {4} Creates new Folder
Entry {5} Creates new Story
Status indicator {6} The green status dot next to the name of the entry indicates the status:

- Green - The entry and all its content is published.
- Gray-green - The entry was already published, but there are some unpublished changes.
- Gray - The entry was never published.
Three dots {7} Toggle to open actions for the entry

Assets

In the asset area you can upload and manage your assets.

Assets section of the Storyblok space

Area / Action Description
Search {1} Search for any asset using the name
Asset Folders {2} List of all asset folders
View Toggle {3} Toggle between the list and tiles view
Sort {4} Sorting of the assets
Multiselect {5} Multi-select all shown assets and toggle for the assets control bar

Components

In the component area you get an overview of all components (Content Types and Bloks) that are in the space. You can create folders to group the components for a better overview.

View of components section of Storyblok

Area / Actions Description
New {1} Creates a new Component (Content Type / Blok)
Component Groups {2} List of component groups
Add {3} Create new component group
Multi-select {4} Select/unselect all components in view
Components menu {5} The components actions will be shown only if you select at least one component.

Datasources

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

Datasource view of the collection

Area / Action Description
Search {1} Search in keys name
Add {2} Create new key-value pair
Datasource Entry actions {3} You can change the order of the datasource entries in the collection. If the autosave is turned off, you have to save each record manually and the dot at the end of the datasource entry indicates if the record is saved.
Settings {4} It shows the advanced settings of the datasource, where you can import and export your datasource. You can also enable new dimensions (useful for translations) for the values.
You will find the delete action and API URL of the datasource data.

Apps

Screenshot of the App Directory

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.

hint:

The regular user can’t see the Settings at all - this section of the space can be accessed only by Admin and Owner of the space.

Sample view of basic settings screen 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.

hint:

Each change in settings has to be saved in the top right corner.

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:

Visual Editor of Storyblok

Area / Action Description
Action Bar {1} Offers basic Story action and is described in detail on next image/table.
The Visual Editor Preview {2} Will show preview of the frontend of you project (website or application) and enables you to jump between the components by clicking on the HTML elements.
The Visual Editor Content Area {3} Shows Bloks and Fields of the Story and allows you to edit them.

Action Bar

The action bar on the top shows the name of the entry you are working on {1} and also enables you to jump to any other entry in your space using this dropdown {1}.

Detail of action bar

Area / Actions Description
Back Button {1} Return back into the space overview.
Entries Quick Access {2} See the name of the opened entry and with a dropdown, search and jump into any other entry in your space.
Active users {3} Shows the thumbnails of the user currently editing the opened entry.
History Version Browser {4} Toggles the history browser where you can see the timeline of changes made on the entry.
New Tab Preview {5} Opens the current entry in the new tab with draft content.
Save button {5} Saves content/changes as the draft version.
Status indicator {6} Indicates the current state of the entry, you can get a tooltip by hovering on it.

- Green - The entry is published and there are no unpublished changes.
- Gray-green - The contains unpublished changes, but it was already published before.
- Gray - The entry was never published.
Publish Button {6} Saves and changes the status of the entry on the published state. This action triggers the publish webhook.
Actions Dropdown {7} Shows the advanced action, which can be strongly influenced by the installed apps.

Action Dropdown Options

Action Description
Open draft Opens the current entry in the new tab with draft content.
Open published Opens the current entry in the new tab with the last published content.
Unpublish Unpublishes the current entry and triggers an unpublish webhook.
Draft JSON Opens draft JSON of the current entry in the new tab.
Published JSON Opens the last published JSON of the current entry in the new tab.

The Visual Editor Preview

Area where the preview of website is shown

Area / Actions Description
Preview URLs dropdown {1} Switch between different environments configured in the space settings.
Responsive Mode Toggle {2} Initializes the responsive mode of the preview area. You can currently choose from 3 different responsive modes - mobile, tablet and desktop.
Form Mode Toggle {3} Minimizes website preview area and enlarges the form area to fully focus on the content editing.

The Visual Editor Content Area

Sidebar of editor, where you can edit the content.

Tabs Description
Content Tab {1} Shows the content of the Story and where you can edit the content in the Fields and Bloks.
Status Tab {2} Changes the workflow state for the current entry and attaches comments to the entry. Using the dropdown in the right corner of the tab you can also find the following information - publish date, creation date, last update date, last editor and last person who change workflow status.
Config Tab {3} Changes the name and the slug of the Story.
Tools Tab {4} Shows the special Fields from the installed apps in the space.

Content Tab Detail

Area / Actions  
Name of the component {4} Display name of the component.
Define schema {5} Opens the schema definition area of the current component.
Presets Definiton {6} Opens the preset popup, where you can define the preset for the current component.
Content Editor {7} Shows the fields defined in the component schema and enables editor to create/edit content.
Add block {8} In the case of the nested components, you can add an instance on another component into this array.

Config Tab Detail

Sample with clicked Config tab

Action Description
Define as root for folder {1} Removes the slug from the entry and makes the entry act as the root entry of the current folder. Exception: you can’t do it in the root folder of your space.
Tags {2} Sets tags to the entry.
Sort by date 3} Deprecated: use a field of type Date/Time instead.
First published date {4} Changes the first publication date to your desired date.
Real Path {5} Defines where the visual editor should be open if the location differs from the slug. Mainly used on the homepage (index page) of the space, to tell the visual editor that home represents /.
Alternative version {6} Groups the Stories, which should be alternative URLs links to the Story.
Shortcut {7} Pins the entry in the mini-browser.

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 in Config Tab of the Story.

Sample view of the Form Only Editor

hint:

You can disable the Visual Editor in the settings of the folder in the content area.