The Key concept

The key concepts behind Storyblok are inspired by the BEM methodology. One way this manifests itself is through the relationship between developer and editor. For example, the editor of one content entry can create a flat or nested tree of components defined by developers and input content through fields which are also pre-defined by developers.

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’s an example of 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 major difference between Storyblok and other CMS is the possibility to nest components as deep as you want them to be nested. What’s the advantage of this? Here’s 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 layouts for your customers and reuse them in different places of your website to minimize duplicated work and improve productivity.

What would this page look like?

Want to see how all this code looks to the customer? You can see it for yourself by checking out the JSON which we use to render the page. Go ahead and 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