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

Storyblok now on AWS Marketplace: Read more

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

Storyblok Product Demo

Storyblok is the first headless CMS that works for both developers & business users. Storyblok offers a unique combination of visual editing tools and highly customizable content blocks for marketers on top of a modern headless architecture that gives developers the flexibility to build fast and reliable digital platforms.

Welcome to the Storyblok

Start your Storyblok product demo with a quick welcome to this tour. We'll guide you through the Storyblok interface and show you all the menu items in a demo Space.

Space Overview

In the Storyblok interface, you can see all your Spaces on the left side. Each Space is an individual repository of content and has its own configurations, components, assets, roles, and environments.


All content related to the same project should be managed within the same Space. Storyblok allows you to create and manage multiple Spaces inside one account.

Dashboard

The Dashboard is the first section you see after entering a Space. It offers you an array of information and data related to that specific Space. Dashboard is the perfect place to quickly catch up with all the important changes within the Space.

Based on the user's role, it can take 3 different shapes:

  1. Owner Dashboard
  2. Admin Dashboard
  3. Editor Dashboard

Each of these variations are tailored to show the relevant information based on the role.

Block Library

This area is a central place for developers to manage all the Components and Content Types within the Space.

Developers can click on each components and define the content structure. Adding and cutomizing new fields can be done quickly all from here.

Taking advantage of a component-based approach to content creation will help your editors create seamless user journeys and achieve better personalization.

Asset Manager

Organize all assets intuitively with the new digital asset manager. Edit images, tag content and add all relevant information in one central hub.

Based on your preference, you can structure your assets in different folders and sub-folders. You can also limit access to specific assets by assigning different roles.

You can also have "required asset fields" which requires users to fill out specific fields (such as title, copyright information, etc.) for each asset. This makes asset management considerably easier in the long term.

Your developers can use our free Image Service to fully optimize all the images uploaded to Storyblok. Make projects faster by transforming, optimizing, and caching every image with Storyblok’s Image service and global Content Delivery System (CDN).


Datasources

A datasource is a collection of key-value pairs (KVP). KVPs can be used for single choice or multiple choice options and can be implemented for multi-language labels, categories, and more.

Datasources area contains all the datasource entries and allows you to create and manage them all in one place.


Tags

This is where you can find an overview of all the tags used in every piece of content belonging to this Space. This includes a jump-link for each tag which redirects you to the appropriate content.

You can use tags in different situations and as a solution to different issues, such as using them to streamline content translation to different languages.

You can create tags inside the Content area.

Apps Directory

Th App Store contains a large directory of additional functionalities which can be installed on a Space. These include a wide range of practical tools, from SEO and Pipelines to S3 Backups and Advanced Paths.

The availability of the apps depends on your subscription plan.

Space Settings

This is where you can configure a Space, set up integration with other tools such as Slack, or use webhooks.

Keep in mind that the Account Settings and the Space Settings are two different things. The options in the Account Settings apply to a user regardless of the Space, and the options in the Space Settings apply to all users within a single Space (as long as different role permissions are not applied).


Settings: Team Management

Located within the Space Settings, the Users tab allows you to add collaborators and assign different roles to them.

You can create custom roles which in turn lets you set detailed permission rules for each role, including restrictions based on language, content folders, assets, actions, and more.

The Enterprise Plan allows you to create an unlimited number of roles without any extra costs.


Settings: Workflows

Incorporating Workflows in your content pipeline not only increases your content production rate, but also adds a layer of extra security in terms of quality control and oversight.

You can define custom workflows based on your specific needs, and use them in conjunction with user roles.

In addition to full customization, you can also trigger external tools based on the workflow webhooks.

Content Area

The Content area is where your editors would spend most of their time in. This is where all your content entries (Stories) are listed together.

Based on your preferences, you can either use a flat approach to your content structure, or incorporate folders and sub-folders for a more hierarchical approach. In either case, finding and managing entries is going to be extremely simple with Storyblok's extensive search options.


Visual Editor

The Visual Editor is what makes Storyblok stand out among other headless systems. This incredible capability allows marketers and all other business users to independently create and manage content.

By taking advantage of nested components and the Visual Editor, marketers can create customized new content without having to rely on large rigid templates. Most importantly, this combination allows marketers to independently change the order (and the content) of individual components, and re-arrange them in any way they see fit to create new content.

Visual Editor: Content Browser

Now you can view all of your content listed directly in the visual editor.

You can easily navigate between folders and pages allowing you to copy blocks from one area to another.


Visual Editor: Commenting and Collaboration

Create content collaboratively directly in your CMS. No need to ask for feedback in slack threads or via email.

Visual Editor: Workflows

Custom workflows give anyone on the team the ability to review changes or take action. Use the standard workflow to cycle through ‘draft’, ‘review’, and ‘publish’ states or create your own custom workflow.

Incorporating Workflows in your content pipeline not only increases your content production rate, but also adds a layer of extra security in terms of quality control and oversight.

In addition to full customization, you can also trigger external tools based on the workflow webhooks.

Visual Editor: Additional Features

The entry configuration window allows you to quickly change the configuration of your story and save it.  

The Block library is a quick access to all the blocks that belong to this space. You can also edit existing blocks, or create completely new ones from here.

Preview your site to see what it will look like when it goes live!

Internationalization

Storyblok offers 3 options for internationalization:

  1. Folder level translations
  2. Field level translation
  3. Setting up multiple Spaces

Folder level translation: In combination with our Dimensions app, this allows you to create language-specific folders on the base-level of your content structure (individual folders for English, German, Japanese, etc.). This approach is best suited for situations where individual locales are completely separated from each other.

Field level translation: This approach allows you to control translations at a field level in your content types and nested components. Field level translations should be set up in the Space Settings.

Setting up multiple Spaces: With this approach, you can define languages for each of the markets you are working on by creating separate Spaces within Storyblok.

Thank you!

adidas logoHappy Socks logoPanini logodeliveroo logoDecathlon logoPizza Hut logoPayone logo
Storyblok is unique

Storyblok helps you build better digital experiences

With Storyblok you reduce maintenance time and make content management more efficient. No need to be locked into a traditional CMS for each platform.

Visual Editor

It’s the simplest, yet most powerful editing experience editors & marketers will get.

Bloks icon

Component approach

Nestable content blocks make content management easy even within complex layouts

Workflow icon

Content workflows

Define multiple workflows for your content and deploy only approved changes.

Internationalization

Define your own content localization strategy to serve multiple countries and languages.

API icon

API

Access your data with powerful APIs: Delivery, Management, and GraphQL.

App-Store icon

App-Store

Extend Storyblok with apps from our App Store, or even build your own apps

Great results from amazing customers

How Fundbox solved their content management issues

Read how Fundbox made the switch to Storyblok to provide the greatest content experience for the team and solving their content management issues.

“The Visual Editor was the actual winner for us. Having a live preview gives our editors a powerful editing experience.”

Alex Volkov
Alex Volkov
Marketing Solutions Architect at Fundbox

Choose a better way to
manage your content