The Key concept

The key concepts behind Storyblok are highly inspired by the BEM methodology. The editor of one content entry can create a flat or nested tree of components (defined by developers) and input content in an easy and fast responding interface in fields also predefined by you as a developer.

Root Components = Content Types

Storyblok allows you to create content types that define the structure of your content at the root level. If you create a new project you will have one content type that’s called “page”. For things like news articles, blog posts or products you can define new content types that have a different structure than that of a simple page. Here an example of a a news article:

{
  "component":"article",
  "title": "Your title",
  "text": "#Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum.\n ## Morbi gravida\n metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet. Curabitur a felis at sapien ullamcorper fermentum. Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.",
  "image": "//a.storyblok.com/f/..."
}

Nested Components

One big difference of Storyblok compared to other CMS out there is the possibility to nest components as deep as you want them to be nested. So what is the advantage of this? Here an example:

{
  "component": "grid",
  "columns": [{
      "component": "column",
      "width": "1-4",
      "content": [{
        "component": "markdown",
        "text": "Nest components using an intuitive editor"
      }]
    },
    {
      "component": "column",
      "width": "1-2",
      "content": [{
        "component": "image",
        "src": "//a.storyblok.com/f/..."
      }]
    }
  ]
}

A structure like this allows your editor to change the layout of pages and reuse components you’ve already created. You can create astoundingly flexible sets for your customers and reuse them in different places of your website.

How would the current page look like?

You can directly have a look at the JSON which we use to render this page. All that you will have to do is to open the link below.

https://api.storyblok.com/v1/cdn/stories/docs/the-key-concept?token=miQeEopSce7bklQFVbBozQtt

You can replace docs/the-key-concept in the URL with any other slug you can find on www.storyblok.com.

Documentation