Introduction

What is Storyblok?

Storyblok is the only Headless Content Management System with a Visual Editor. It provides developers with all the flexibility they need to build reliable and fast websites, while giving content creators with no coding skills the ability to edit content independently of the developer.

What is a headless CMS?

A headless CMS is a back-end only content management system (CMS) consisting of structured content storage, an administration interface for content creators, and an API that allows different systems to consume the content.

learn:

Learn more about the headless approach and the advantages in our article Headless CMS explained in 5 minutes.

Thanks to the headless approach you gain the freedom of having your content be consumed by different platforms across the digital world. Compared to a traditional CMS, a headless CMS itself does not differentiate between presentation layers or prefer a built-in over your favorite technology.

Storyblok empowers you to use your content not only on a single website but also on other platforms such as iOS or Android, as well as any other platform of choice (IoT, smartwatch, AR/VR) through APIs (Application Programming Interfaces). This is a revolutionary approach compared to most of the monolithic CMSs out there.

Headless overview

Storyblok provides the infrastructure to create and manage content using the Storyblok UI or the Management API. It is not tied to one specific presentation layer, such as a website. Its headless nature allows the content to be served in a presentation agnostic way. It provides REST and GraphQL APIs to deliver content to any channel you would like to serve. Mobile apps, e-commerce stores, showrooms, static and dynamic websites, or any other digital platform can benefit from a headless approach to content delivery.

How does it work?

Developers can now focus on providing more value for your customers instead of maintaining the monolithic backend infrastructure. By integrating with the Storyblok API, your content is decoupled from the presentation layer, which means you can choose any frontend technology you like. The management of the content can be as easy as these four steps:

  • Define your Models: Define the schema of your content. This includes creating a content type, components and adding the correct fields such as text, date, image or even custom field types .
  • Create your content: Once the required content types and components are ready, any user can add content by filling up your fields in Storyblok editor .
  • Test your content: Using the Visual Editor your content editors can preview the content of the website live at the moment of editing.
  • Use your content: Once the content is saved and published, it can be loaded on your website, mobile app, or any other channel using our Content Delivery API (REST or GraphQL). The very same content can then be reused multiple times for any platform.

how it works in 4 steps

Key Concepts

The key concepts behind Storyblok are inspired by the BEM and Atomic Design methodologies. BEM (Block Element Modifier) and Atomic design are methodologies that leverage reusable components (fundamental building blocks) and shared code to shape the way front-ends are developed.

This concept manifests itself through the relationship between designers, developers and the people who edit the content. They are now able to design, implement and edit components independently.

Components

Storyblok’s components are divided into two categories - Content Types and Bloks. The video below offers a great explanation of the relationship between the components in Storyblok. The content of each page is stored as a Story, which is defined by one content type. The content types are built directly from fields, or Bloks, which can consist of other Bloks or fields. This way you can separate your page (or other content) into multiple meaningful blocks, which are stored as stories.

hint:

Thus, our name was created, Storyblok!

Content Types

In Storyblok, a “Content Type” defines the type and structure of a story. Some examples of content types are “Page”, “Article Page”, “Product”, “Blog Post”, “FAQ Entry” and other root level entries.

Bloks

Bloks are nestable components and can be used only inside of another component (Content Type or Blok). They can not be used to create a Story. Thanks to this setup you can create a nested structure of components that are like the parts of a tree. With Content Types as the roots, Bloks as the branches and subbranches and Field Types as the leaves. Some examples of Bloks are “Hero area”, “Contact Section”, “Newsletter Section”, “Featured Articles Section”, “Article Teaser”, “Product Teaser” and “Call to action”.

learn:

A detailed explaination of Content Types and Bloks can be found in Structures of Content

A structure like this allows your editor (person) to change the layout of pages and reuse components you’ve already created. You can create flexible layouts for your customers and reuse them in different places in your project to minimize work and improve productivity.

hint:

Would you like to see what the content behind the current page looks like? You can see the JSON we use to render this page by opening this API request link. To inspect the structure of other pages you can replace docs/the-key-concept in the URL with any other slug you can find on www.storyblok.com .

Requirements & Installation

Storyblok has no external dependencies. If your system is able to send GET requests, you’re ready to go.

Installation

Since Storyblok is a SaaS CMS there is no installation process. All you have to do is sign up, log in, and create something awesome. However, if you want to enable our visual editor on your website built with Storyblok components, you will have to add the Storyblok JavaScript Bridge.

Updates

As already mentioned, Storyblok is a SaaS (Software as a Service) product. That means we do the heavy lifting for you when it comes to updates and infrastructure. Updates are installed automatically and you won’t have to worry about uptime or broken updates as is often the case with legacy or on-premise systems.

One of the main concerns when it comes to automated updates is backwards compatibility. Storyblok makes sure that an update doesn’t break your setup by versioning the API. If the API changes in a way that will influence existing projects, a new version number will be published along with upgrade instructions.

After all, stability is one of our core values. To find out more about new features check out our Public Roadmap. and our changelog.

Storyblok UI Requirements

Storyblok UI requires a modern web browser. We support the last two versions of all “evergreen” browsers. The term “evergreen” refers to the release strategy of frequently updating in the background. The major browsers which are covered with this are:

Although most of Storyblok’s features will work in other or older browsers as well, we do not test for bugs or unwanted behavior on these platforms, and can’t give any support.

Embeddability

Storyblok uses an iFrame bridge which allows you to click in your page and jump to a specific component in the template. To use this embedding feature, your page needs to allow for app.storyblok.com.

hint:

If you encounter a problem with the Visual Editor make sure that all URL parameters are passed on correctly and not cut off by a redirect. Also check if the headers (X-Frame-Options and Content-Security-Policy) allow loading the page within an iFrame.

Finally, it’s always possible to use Storyblok without the visual editor.