Introduction
What is Storyblok?
Storyblok is an enterprise-level Headless Content Management System with the Visual Editor. The Visual Editor allows the editorial team to manage and organize the content visually and intuitively. The editorial team can assemble the content by dragging and dropping reusable components, preview the content in real-time, and manage images (and assets) without worrying about duplicating formats and resolutions. For better collaboration across the teams, you can create and manage custom workflows and use the powerful discussions tool to create and review activities with your team.
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 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.
The headless approach, again, allows the decoupling of the content management lifecycle and the design/development lifecycle, drastically reducing the dependencies among each other.
Storyblok enables you to use your content not only on a single website but also on platforms such as iOS or Android, as well as any other platform of choice (IoT, smartwatch, AR/VR) through APIs (Application Programming Interfaces). This approach allows you to create content for multiple channels (multichannel), which is revolutionary compared to most monolithic CMSs. Allowing the user to access the content with various devices at different times creates a rich experience for the user interacting with the brand. This Omni-Channel approach let the brands communicate with the user in multiple ways, in different moments, and in other contexts and situations.
)
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 .
- Reuse your content, using presets, referenced stories, and shared components, you can assemble your content quickly, effectively, consistently, and coherently.
- 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.
)
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 Blocks. 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 Blocks, which can consist of other Blocks or fields. This way you can separate your page (or other content) into multiple meaningful blocks, which are stored as stories.
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.
Blocks
Blocks are nestable components and can be used only inside of another component (Content Type or Block). 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, Blocks as the branches and subbranches and Field Types as the leaves. Some examples of Blocks are “Hero area”, “Contact Section”, “Newsletter Section”, “Featured Articles Section”, “Article Teaser”, “Product Teaser” and “Call to action”.
A detailed explaination of Content Types and Blocks 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.
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.
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.