Component/Schema Configuration

Field types

One field type is the smallest part in Storyblok terminology. It can be a single input field or even a custom field type (plugin). You can see the list of all field types in the following table with links to the detailed documentation of the field type.

Here you can learn more about all options when configuring your content types and components in Storyblok.

Config Tab

You can find the general settings in the Config tab of your component/content type.

Technical name

This is the technical name that will be included in the JSON content of your content entries under the attribute component. If you do not define a "Display name" the "Technical name" will be transformed to a human-readable name in the editor interface. For example: "feature_area" will be transformed to "Feature Area".

Be aware! Changing the technical name can take a few minutes to update all content items. Make sure your editors have saved their current work and exit the editor. If you use branches, only the "Preview" branch will have the new component name until you deploy the other branches.

Display name

The value of this field will be shown for editors as a component/content-type name. If this field is empty, the "Technical name" will be shown.

<div id="topic-preview"></div>

Preview field

The preview field allows you to select one of the fields you set up in the schema so that the value entered in this field will be shown when you see this block in the overview (e.g., in the body with nestable blocks). For example, if you set up a headline text field, you could set this as the preview. Storyblok automatically sets one of the fields as a preview

Preview template

With this option, you can define a template that gets rendered in the blocks field. The template language you can use here is based on Squirrelly 8.

If you still have templates based on Squirrely 7, you can see our old documentation here. Please update your old templates.

To render the preview, you use the following template.

<div>{{it.text}}</div>
<!-- ".image" is the field name -->
{{@image(it.image.filename)/}} 

<!-- old image field -->
{{@image(it.image)/}} 

All fields you have defined in your schema can be used with the following syntax: {{it.YOUR_FIELD_NAME}}. When using helpers like @if() or @image() the attributes are accessible via the it object.

Allowed HTML tags

• Tags: div, span, strong, ul, li, p
• Attributes: class

Styling

Preview templates can be styled using the blok ink: classes for specific text styling:

<div class="text-red">{{it.error}}</div>

Linked Stories

If you linked another story inside your schema through a single or multi-select field, you could only use the story id in the preview template, not the fields inside that linked story.

# possible
<div>{{it.linkedAuthor}}</div>

# not possible
<div>{{it.linkedAuthor.name}}</div>

Available helpers

@image

{{@image(it.image.filename)/}}

if/else

{{@if(it.your_attribute === "1")}}
Display this
{{#else}}
Display that
{{/if}}

@each

{{@each(it.somearray) => val, index}}
Display this
The current array element is {{val}}
The current index is {{index}}
{{/each}}

@foreach

{{@foreach(it.someobject) => key, val}}
This loops over each of an objects keys and values.
The value of the current child is {{val}}
The current key is {{key}}
{{/foreach}}

Preview Screenshot

This option lets you define a screenshot shown when the user inserts a new component in the blocks field. This helps the user to identify the component type better.

Block icon

Here you can set the icon that defines this block.

General configuration options

All field types except the Blocks are translatable and all field types contain general configuration options - Required, Description, Display name.

Text

The text field should be used for short one-line long strings. The most common use case is the name of the product or author.

Textarea

Textarea field should be used for one paragraph without the possibility of styling or creating multiple paragraphs. The most common sample is a short teaser text of a product or article.

Image

The image field is used to insert or select images from the assets library. It can be used to crop your images to the preferred ratio.

How to crop the image?

You can crop the image by clicking on the image thumbnail. This action will open the image overlay, where you can select the cropped area from the original image.

If you set Force Crop to true, you are able to predefine the ratio or fixed-sized of the crop area. In this case, the content editor will be forced to crop the image in the predefined size or ratio.

Date/Time

Boolean

Boolean is one of the Basic Field Types. It indicates a checkbox, which can hold two values, either True or False.

You can filter entries by boolean value. Imagine you want to allow your editors to have featured products with a boolean flag in your content schema. To filter all products to only receive the featured once you can utilize the filter_query operation to check for an exact value.

Link

Links are another representation of your content entries, eg. Stories. With the Links format, you can resolve uuids of stories. The links object returned consists of multiple keys, where each key is the uuid of one Story. In the link object, you will have access to basic information to identify, load or already display a link to that resource.

The Link(s) Object

You can access a draft or published versionof your links by providing the version parameter and the correct token type (eg. preview for draft, public for published).

Retrieve Multiple Links

Returns the links object containing all links of one space. Use the version parameter and the correct token types to receive either draft and published or only published links.

Anchor option for internal link

It is also possible to set an anchor for internal links. The option can be enabled in the schema configuration as shown below.

Dynamic Links

If you're looking for anchor links for lets say headlines it would be something to be implemented in your frontend which can take the current string of your headline and transforms it to a specific entry. One example would be Anchorjs.

File

A single file upload input and access to the asset manager.

Asset

Assets in Storyblok are all files that you upload either using an image, file or multi-assets field or in the asset manager itself. Assets uploaded to Storyblok will be hosted on our infrastructure and delivered through our CDN with the best possible performance for you. Additionally, you can use our built-in image service to optimize and resize your images. Below you can find the MIME types for each asset type.

The Asset Object

You can now choose “Default Asset Folder” for the field type file which was previously only available for the type image.

Multi-Asset

A multi-asset upload input, including a description for each and access to the asset manager.

Additionally, you can use our built-in image service to optimize and resize your images. Below you can find the MIME types for each asset type.

• Multi-Asset fields can be reordered via drag controls.
• You can allow multiple image uploads in one field using the multi-asset field type.

Single-Option

Single-Option is a dropdown of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages.

SOURCE TYPE

There are several source types in the Single-Option Field which are as below:

Self

Stories

Languages

Datasources

External JSON

Multi-Option

A multi-select option of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages. 

All the configuration options are similar to Single-Option. The only difference is that we get an additional configuration option in Multi-Option, which is as below:

The default value for multi-options

You can set a Default Value for multi-options with the following schema:

        
      [ "your_first_value", "your_second_value", "third", ... ]
    

Number

A number text field without formatting. 

Markdown

Write markdown with a text area and additional formatting options.

There is also an example of how to use it with our migration CLI to transform fields.

Richtext

A multi-line field with formatting options that results in a JSON format. Storyblok comes with a powerful Richtext editor that saves your content in a structured JSON format. You can customize the toolbar for each field individually and even let the user insert Storyblok blocks. If you have written your content in Markdown you can import it using the toolbar button "Paste from Markdown".

Features

• Customizable Toolbar: Bold, Italic, Strikethrough, Underline, Inline-code, Code-block, Paragraph, H1, H2, H3, H4, H5, H6, Unordered list, Ordered list, Quote, Horizontal rule, Link, Image, Components, Paste Markdown, Emoji, Text coloring, Undo/Redo, Subscript, Superscript, Anchor
• Clean JSON Output
• JSON to HTML converter included in SDKs
• Advanced link dialog with "New window" option and asset link function
• Advanced image dialog with alt-tag and title definition
• Component insertion with allowlist option
• Paste from Markdown import function
• Auto-height and sticky-toolbar
• Works with export and import app
• Code-language selector of code-block

Table

It is easy to use field type to manage tables.

Features

• Add, move or delete rows and columns
• Outputs structured JSON
• Allows multi-line text
• Works with translation export and import

Developer documentation

The table field type stores its information as structured JSON and you need to take care of the rendering of the HTML.

Following an example:

        
      {
  "plugin": "translateable-table",
  "thead": [
    {
      "value": "Head1"
    },
    {
      "value": "Head2"
    }
  ],
  "tbody": [
    {
      "component": "_table_row",
      "body": [
        {
          "component": "_table_col",
          "value": "one"
        },
        {
          "component": "_table_col",
          "value": "two"
        }
      ]
    }
  ]
}
    

In a template language like Liquid you could write something like the following to render the table:

        
      <table>
  <thead>
    <tr>
      {% for th in content.thead %}
        <th>{{ th.value }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for tr in content.tbody %}
      <tr>
        {% for td in tr.body %}
          <td>{{ td.value }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>
    

Blocks

Blocks is a field to interleave other components in your current one, a field to allow nesting of Bloks.

This type of component lives only within a Story and other Blocks, such as Hero, Grid, and Full-Width Image. You can’t create new Stories from this as it is only a part of one Story. To use them in one content type you will need to create a field of the type blocks that allows the nesting of components.

        
      {
    "story": {
    "uuid": "ac0d2ed0-e323-43ca-ae59-5cd7d38683cb",
    "name": "My third post",
    "slug": "my-third-post",
    "full_slug": "posts/my-third-post",
    "content": {
-      "component": "your_content_type",
+      "component": "page",
        // fields you define for your content type
+      "body": [ // also a field you defined (type blocks)
+         {
+            "component": "teaser",
+            "headline": "My headline Content",
+            // fields you define for your blok
+         }
        ]
    },
    ...
}
    

Nestable blocks

Every block in Storyblok can have child blocks. If you define a block as nestable, then the editor of the content can position that block in a nestable area.

Usually, root blocks like pages, articles and products aren’t defined as nestable, as they are designed to build the root of your content structure. Read more on “What is a root block?”.

Group

Group field allows you to group fields in a section (no input possibility).

Component Folders

A component folder can be used to group components together. Each component can have only one component folder. However, you can add multiple Component tags to assign them to blocks and richtext field-types.

Component Tags

Component tags can be used in the blocks and richtext field-types. To create Component tags, go to the Block Library, and create new Component tags from there. Component tags can restrict the type of blocks and how they can be nested.

Component tags can restrict the type of blocks and how they can be nested. To do so, Component tags should be used with the option Allow only specific components to be inserted.

The Component Object

The Component Folder Object

Retrieve one Component Folder

Returns a single, fully loaded component folder object by providing a specific numeric id.

Retrieve multiple Component Folders 

Returns an array of component folder objects. The response of this endpoint is not paginated and you will retrieve all component folders.

Create a Component Folder

Delete a Component Folder

Delete any component folder using its numeric id.

Conditional Fields

Plugins aka Custom Field Type

A custom field type is a field type (plugin) that can be created by you or your developer to fulfil special requirements, that can't be fulfilled by the default set of the field types. The common sample is the integration with 3rd party services as e-shops or image services as Cloudinary.

Presets

A preset defines the sample data of the component and each component may have defined a list of multiple presets. This feature should be used to guide your content creator in the process of creating new stories as they don't have to start always with empty components. They may choose one of the presets and tweak the data of it. Only a user with developer rights may create/edit preset.

Example use case

Let's say we have a teaser component with three different design variants. 

1. Teaser with background image
2. Teaser with background colour and text
3. Teaser with a call to action button

We could define three different components in Storyblok or we can define a component called Teaser with different options. The single-component approach can be difficult to understand for a content creator without enough experience. To make the process easier, we can define three presets for those three variants and let the content creator choose the preset in the creation process. This will add a component with pre-filled values into the Story.

How to define Preset?

Only developers can create and edit the Presets. If the developer opens the Story in the Content Editor, he/she can see the Define schema button and next to it a dropdown arrow. The Define Preset button is hidden in this dropdown. By using the Define preset button a preset overlay is open, where you can define the Name of the preset and see the existing presets plus which one is selected as the default one for the component. After filling in the name of the preset and clicking the Add preset button, the preset is created in the component.

You may always edit the preset by clicking on the name of the preset in the list of existing presets. This will open for you the following options.

• Presets can be also managed using the Management API. Read more about it in the MAPI Docs.