Component Schema & Field 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.
Name | Short Description |
---|---|
Text | a basic single-line text field |
Textarea | a multi-line text area without formatting options |
Image | a single image upload input and access to the asset manager |
Date/Time | a date and time picker |
Boolean | a checkbox - true/false |
Link | internal and external links, eMail, and anchors |
File | a single file upload input and access to the asset manager |
Multi-Asset | a multi asset upload input, including description for each and access to the asset manager |
Single-Option | a dropdown of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages. |
Multi-Option | a multi select option of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages. |
Number | a number text field without formatting |
Blocks | a field to allowed nesting of Bloks |
Markdown | a multi-line field with formatting options resulting in Markdown format |
Richtext | a multi-line field with formatting options that results in a JSON format |
Group | allows you to group fields in a section (no input possibility) |
Plugin | extend the Visual Editor Content area with your own Custom Field Type |
General configuration options
All field types except the Blocks are translatable and all field types contain general configuration options - Required, Description, Display name.
Configuration Options | Type | Description |
---|---|---|
Translatable | Boolean | If true, it enables translation of field in the case of the Field Level Translations. |
Required | Boolean | If true, it forbids save of the story, if the field is empty. |
Description | String | Text is shown under the field in the Storyblok Editor. |
Display name | String | It overrides the default name of the field. |
Renaming | String | It allows you to change the field 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.
Configuration Option | Type | Description |
---|---|---|
Maximum characters | Number | Defines a maximal number of allowed characters in the field. |
Regex Validation | Regex | You can use the regex to validate the value of the field. Eg. to validate if the value is a valid email string. |
Default Value | String | Defines the default value of the field. |
Enables RTL | Boolean | If true, the field value will be shown from right to left in Storyblok Editor. |
Sample JSON produced by Text Field:
"content": {
"field_name": "Value of the field"
}
Text Field can be transformed into the Textarea Field directly in the Storyblok Editor without losing the value.
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.
Configuration Option | Type | Description |
---|---|---|
Maximum characters | Number | Defines a maximal number of allowed characters in the field. |
Regex Validation | Regex | You can use the regex to validate the value of the field. Eg. to validate if the value is a valid email string. |
Default Value | String | Defines the default value of the field. |
Enables RTL | Boolean | If true, the field value will be shown from right to left in Storyblok Editor. |
Sample JSON produced by TextArea Field:
"content": {
"field_name": "Value of the field"
}
Image
Image Field will be in future deprecated in the favour of the Assets Field.
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.
Configuration Option | Type | Description |
---|---|---|
Force Crop | Boolean | It toggles the preset crop options of the image. Read how to crop image section following this table for more information. |
Prepend https to url | Boolean | If true, the URL of the image will be prepend with "https://". |
Default assets folder | Select | It is an asset folder where the new images will be added to. |
Default Value | String | DEPRECATED - have currently no effect. |
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.
Sample JSON produced by Text Field:
"content": {
"field_name": "//a.storyblok.com/f/81002/200x200/df0881e1b2/unnamed.jpg"
}
Storyblok offers also Image Service with which you can adjust format, size and effects applied to your images. Read more in the Image Service documentation.
Date/Time
Configuration Option | Type | Description |
---|---|---|
Disable time selection | Boolean | It toggles the preset crop options of the image. Read how to crop image section following this table for more information. |
Default Value | String | DEPRECATED - have currently no effect. |
Sample JSON produced by Date/Time Field:
"content":"[object Object]"
Boolean
Boolean is one of the Basic Field Types. It indicates a checkbox, which can hold two values, either True or False.
By default, the value of Boolean Field Type is 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.
Sample JSON produced by Boolean Field:
"content":false
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.
Configuration Option | Type | Description |
---|---|---|
Restrict to content types | Boolean | If true, you can choose content types from the whitelist |
Enable email field | Boolean | If true, you will be able to add an email field |
Enable asset selection | Boolean | If true, you can add asset from Asset manager or Upload new from your local machine |
Enable anchor field on internal link | Boolean | If true, you will be able to set an anchor for internal links |
The Link(s) Object
You can access a draft or published version
of your links by providing the version parameter and the correct token type (eg. preview for draft, public for published).
Property | Description |
---|---|
id | Numeric id of the referenced content entry |
slug | The full_slug of the content entry |
name | Given name of the content entry |
is_folder | Is this content entry a folder (true/false) |
parent_id | Parent folder numeric id |
published | Is this story published (true/false) |
position | The numeric position value of the content entry |
uuid | The uuid of the content entry |
Multiple uuid | One key per Story, where the key is the uuid of the story |
is_startpage | IS this story a startpage (true/false) |
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.
Query Parameter | Description |
---|---|
token (required) | Your public or preview token |
starts_with | Filter by full_slug . Can be used to retrieve all links form a specific folder. Examples: starts_with=de/beitraege , starts_with=en/posts |
version | Default: published . Possible values: draft , published |
paginated | Set this to 1 if you want to retrieve the paginated results. With the parameters per_page and page , you can define the page size and page number |
cv | Read more about cache version at Cache invalidation |
This API endpoint is not paged by default. Activate it using paginated=1
.
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.

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.
If you’re referencing to linking to other entries, using the link field we will update the referenced entry right away. We’ve also introduced something called “Resolve Links” which allows your developer to access linked entries without additional query.
Sample JSON produced by Link Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
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.
Asset Type | MIME Types |
---|---|
image | image/x—png, image/png, image/gif, image/jpeg, image/svg+xml, image/webp |
video | video/*, application/mp4, application/x—mpegurl, application/vnd.apple.mpegurl, audio/webm |
audio | audio/* |
text | application/msword, text/plain, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document |
The Asset Object
Property | Description |
---|---|
filename | Full path of the asset, including the file name |
file | File Object |
short_filename | The file name of the asset |
You can now choose “Default Asset Folder” for the field type file
which was previously only available for the type image
.
Configuration Option | Type | Description |
---|---|---|
Prepend https to url | Boolean | If true, it will prepend file url with https |
Default asset folder | Dropdown | You can choose an asset folder where the assets should be assigned to |
Default value | String | Defines the default value of the field |
Sample JSON produced by File Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
Multi-Asset
A multi-asset upload input, including a description for each and access to the asset manager.
Field Type | Description |
---|---|
multiasset | Multi-Assets; an upload field for multiple files |
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.
Asset Type | MIME Types |
---|---|
image | image/x—png, image/png, image/gif, image/jpeg, image/svg+xml, image/webp |
video | video/*, application/mp4, application/x—mpegurl, application/vnd.apple.mpegurl, audio/webm |
audio | audio/* |
text | application/msword, text/plain, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document |
Multi-Asset fields can be reordered via drag controls.
You can allow multiple image uploads in one field using the multi-asset field type.
Configuration Option | Type | Description |
---|---|---|
Default asset folder | Dropdown | You can choose an asset folder where the assets should be assigned to |

Sample JSON produced by Multi-Asset Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
Single-Option
Single-Option is a dropdown of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages.
You can find an example of single-option as an external JSON here.
Field Type | Description |
---|---|
option | Single-Option; a single dropdown |
SOURCE TYPE
There are several source types in the Single-Option Field which are as below:

Self
Configuration Option | Type | Description |
---|---|---|
Hide empty option | Boolean | If true, it will hide the empty option |
Options | String | Add name/value as options |
Default Value | String | Defines the default value of the field |
Sample JSON produced by Single-Option Self Source Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
Stories
Configuration Option | Type | Description |
---|---|---|
Use UID instead of ID | Boolean | Recommended to be checked (true), as UID is required for automatic link resolving |
Path to folder of stories | String | In case you have a multi-language folder structure you can add the {0} placeholder and the path will be adapted dynamically. Examples: {0}/categories/, {0}/{1}/categories/ |
Restrict to content type | Dropdown | You can choose content types from the whitelist |
Default value | String | Defines the default value of the field |
Sample JSON produced by Single-Option Stories Source Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
Languages
Configuration Option | Type | Description |
---|---|---|
Hide empty options | Boolean | If true, it will hide the empty option |
Default value | String | If true, it will hide the empty option |
Sample JSON produced by Single-Option Languages Source Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
Datasources
Configuration Option | Type | Description |
---|---|---|
Hide empty option | Boolean | If true, it will hide the empty option |
Internal datasource | Dropdown | Select an internal database from the dropdown |
Default value | String | Defines the default value of the field |
Sample JSON produced by Single-Option Datasource Source Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
External JSON
Configuration Option | Type | Description |
---|---|---|
Hide empty option | Boolean | If true, it will hide the empty option |
URL | String | Add URL to the external JSON |
Default value | String | Defines the default value of the field |
Sample JSON produced by Single-Option External JSON Source Field:
"content":{
"id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}
Multi-Option
A multi-select option of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages.
You can find an example of a multi-option as an external JSON here.
Field Type | Description |
---|---|
options | Multi-Options; a list of checkboxes |
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:
Configuration Option | Type | Description |
---|---|---|
Minimum & Maximum | Number | Defines minimum & maximum numbers for the particular source. |
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", ... ]
Sample JSON produced by Multi-Option Field:
"content":["value1","value2", ... ]
Number
A number text field without formatting.
Configuration Option | Type | Description |
---|---|---|
Default value | String | Defines the default value of the field |
You can convert string to JSON function
Sample JSON produced by Number Field:
"content":"number_value"
Markdown
Write markdown with a text area and additional formatting options.
Configuration Option | Type | Description |
---|---|---|
Rich-text as default | Boolean | Enable rich markdown view by default (true/false); Only for type: markdown |
Allow empty paragraphs | Boolean | Enables the allotment of empty paragraphs. |
Customize toolbar | Boolean | Enables a list of options from the toolbar, like Bold, Italic, Code-block, H1, H2, H3, H4, H5, Unordered list, Ordered list, Quote, Link, Image, Help, Enlarge |
Maximum characters | Number | Set the max length of the input string; Only for type: text, textarea, markdown |
Enable RTL (Right to left) | Boolean | Enable global RTL for this field |
Default value | String | Defines the default value of the field |
Check out the npm module that lets you convert Markdown and HTML into Storyblok’s Richtext field format.
There is also an example of how to use it with our migration CLI to transform fields.
Sample JSON produced by _Markdown Field (for bold & italic):
"content":"**Bold**\n\n*Italic*"
Toggle Rich-text
You can toggle to Rich-text view by clicking on the 👁 (eye) icon and toggle back to Markdown by clicking on it back.

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".
Configuration Option | Type | Description |
---|---|---|
Customize toolbar | Boolean | Enables a list of options from the toolbar, like Bold, Italic, Code-block, H1, H2, H3, H4, H5, Unordered list, Ordered list, Quote, Link, Image, Help, Enlarge |
CSS class options (label/value) | String | Add name/value as options |
Allow only specific components to be inserted | Boolean | If enables, get two options to select from: - Component(s) - Group(s) Get a dropdown for Component and Component group whitelist |

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, Undo, Redo
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
Read more at the documentation of the Richtext field.
Sample JSON produced by Richtext Field (for bold & italic):
"content":{
"type":"doc",
"content":[
{
"type":"paragraph",
"content":[
{
"text":"Bold",
"type":"text",
"marks":[
{
"type":"bold"
}]
}]
},
{
"type":"paragraph",
"content":[
{
"text":"Italic",
"type":"text",
"marks":[
{
"type":"italic"
}]
}]
}]
}
Some resources to check
- Rich Text Renderer for React
- Rich Text Renderer for VueJS/NuxtJS
You can also have a look at Rich Text Renderer for React and Rich Text Renderer for VueJS/NuxtJS
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>
Sample JSON produced by Table Field:
"content":{
"tbody":[
{
"_uid":"a3fc5b10-d309-41af-89a0-d5131d93ce4f",
"body":[
{
"_uid":"ede4bb0f-a25c-4046-9d52-0e71f6a6bb14",
"value":"",
"component":"_table_col"
},
{
"_uid":"05527061-fb62-4127-9219-0667f707470e",
"value":"",
"component":"_table_col"
},
{
"_uid":"fbd202c7-ebd9-423c-95ab-4489478073d3",
"value":"",
"component":"_table_col"
}],
"component":"_table_row"
}],
"thead":[
{
"_uid":"e35c2247-d319-4f6e-8fff-b4c52b66cc92",
"value":"Heading 1",
"component":"_table_head"
},
{
"_uid":"e3142f21-ea52-4ac3-bef6-616f327e71d6",
"value":"Heading 2",
"component":"_table_head"
},
{
"_uid":"051e9c71-9839-4cdd-b4b6-43d663111b27",
"value":"Heading 3",
"component":"_table_head"
}],
"fieldtype":"table"
}
Blocks
Blocks is a field to interleave other components in your current one, a field to allow nesting of Bloks.
Configuration Option | Type | Description |
---|---|---|
Allow only specific components to be inserted | Boolean | If enables, get two options to select from: - Component(s) - Group(s) Get a dropdown for Component and Component group whitelist |
Allowed maximum | Number | Defines the maximal number of allowed characters in the field |
This type of component lives only within a Story and other Bloks, like 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
+ }
]
},
...
}
Type | Examples |
---|---|
Content Types | Post, Authors, Product, Page, Team Members, FAQ article, |
Bloks | Hero, Grid, Section, Newsletter Section, Chapter, Full Width Image, Slider |
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?”.
Sample JSON produced by Block Field (added Button block):
"content":[
{
"_uid":"f96a9549-9687-4351-849b-89ac8c55a3c2",
"link":"",
"text":"",
"style":[],
"component":"button",
"is_inline":false,
"paragraph_style":[]
}]
Group
Group field allows you to group fields in a section (no input possibility).
Property | Description |
---|---|
group_id | Alternates group id (uuid string) |
Configuration option | Description |
---|---|
Section items | This is the list of all the fields of components you are in and which will be included in the group and which can be collapsed in the content editor |
Component Groups
A component group can be used to group components together. Each component can have only one component group.
The Component Object
Property | Description |
---|---|
component_group_uuid | The component group uuid of the component |
The Component Group Object
Property | Description |
---|---|
id | Numericc Unique ID |
name | Name of the group |
uuid | Uuid of the group |
Retrieve one Component Group
Returns a single, fully loaded component group object by providing a specific numeric id.
Retrieve multiple Component Groups
Returns an array of component group objects. The response of this endpoint is not paginated and you will retrieve all component groups.
Create a Component Group
Property | Description |
---|---|
component_group | Your full component group object |
component_group[name] | The component group name is required |
Delete a Component Group
Delete any component group using its numeric id.
Check out Component Groups and Grouping fields in tabs
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.
Read the plugins documentation to learn how to create your own custom field type.
Datasources
It is available in the Basic and higher plans.
A data source is a collection of key-value pairs. A collection like this can define the strict options in your application/website or it can be used to define the buttons/labels in your application, that is not context-specific. You can access datasources directly through the Delivery API or use them in the Storyblok UI as the source of data in the single-option or multi-options field.

Filled example of datasource
A good sample from the world of tech writers is the type of article. You can define multiple types (“review”, “first try”, “tutorial”, … ) as datasource values and then use them to define your articles. Similar to tags.
Learn more about the single-option and multi-options fields.
The structure of datasource and datasource entry
Each datasource consists of one or more datasource entries and it is represented as a single JSON file. The datasource entry object consists of the following properties.
Property | Description |
---|---|
id | Unique identifier in the context of datasource. |
name | The key of the datasource key/value pair. |
value | The value of the datasource key/value pair. |
dimension_value | The given value in the requested dimension. |
Datasource is defined by the following properties.
Property | Decription |
---|---|
name | Name of the dimension used in Storyblok UI. |
id/slug | Identifier used to access the datasource content with Delivery API. |
dimensions | Definition of dimension used in datasource entries. |

Opened settings of the datasources with defined dimension
To learn more about datasource objects, datasource entry objects, and how to request them, you should check the Delivery API documentation.
Datasource dimensions - internalisation
Each datasource may contain multiple dimensions. This dimension can be used to translate the values from key-values pairs. In general, the dimension can be used also for different purposes as defining different values for different situations.
You can define the dimension in the Settings of the datasource by defining its name and identifier. The name will be used in Storyblok UI and an identifier is used in the API request to get the dimension value.
To preview and edit the values in one of the dimensions, you need to enter the UI of the datasources. Click on the label with the name of the dimension under the search and you will see a new field under each default value of the datasource entry.

screenshot of datasource with active dimension
Datasource entry actions
By default, the datasource entries are saved automatically. If you want to change this behaviour, uncheck the Autosave option in the header of the datasource detail. Additional actions of the datasource entry can be found on the right-hand side of the datasource entry fields.
Icon | Desription |
---|---|
Arrow | Drag & Drop the datasource entry to reorder the entries. The same order will be send by the API and shown in Storyblok UI. |
Floppy Disk | Saves the changes. |
Trash | Removes the datasource entry. |
Dot | Represent the state of the datasource entry. - Green - entry is saved - Gray - entry has unsaved changes |
Import and export of the datasource
Datasource entries can be imported to and exported from Storyblok as the CSV file type. You can find this functionality in the Settings of the datasource. You may export/import the datasource entries per dimension.
Datasource in the Stories
One of the main use cases for datasources is to use them as the source in the Single-Option field or the Multi-Options field. This way you may use the same group of data in multiple places through your application/website. It is a highly recommended development strategy as it creates a single source of truth for your data, which allows you to edit data only in one place in future instead of updating all occurrences of those data.
You can set the datasource as a source of the Single-Option field or Multi-Options field by selecting the Datasource option in the source dropdown and choosing one of the internal datasources. See the example of the following image.

how to select datasource as source for single-options field type
How to request datasource entries with Delivery API
Datasource entries can be requested from the Delivery API using the URL like this https://api.storyblok.com/v1/cdn/datasource_entries?datasource=:slug&token=:token
Sample response from a request can be found here.
// 20200626123726
// https://api.storyblok.com/v1/cdn/datasource_entries?datasource=labels&token=ask9soUkv02QqbZgmZdeDAtt
{
"datasource_entries": [
{
"id": 22237,
"name": "cancel",
"value": "Abbrechen",
"dimension_value": null
},
{
"id": 22238,
"name": "read_more",
"value": "Mehr erfahren",
"dimension_value": null
},
{
"id": 37116,
"name": "hello_email",
"value": "hello@storyblok.com",
"dimension_value": null
}
]
}
You can create and manage the datasources through our Management API. Check the datasources chapter and datasource entries chapter there.
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.
You are able to define presets to both types of components - Content Types and Bloks.
Example use case
Let's say we have a teaser component with three different design variants.
Teaser with background image
Teaser with background colour and text
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.

Shown list of defined presets for a component/story from example use case
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.

Showing where the Define Preset button is
Each component can have one preset set as default.
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.
Option | Description |
---|---|
Name | Input field where you can change the name of preset. |
Screenshot upload | You can upload a preview image of the preset. |
Fill preset with current content | Override data of the preset with current values from the content editor. |
Delete | Permanently deletes the preset from the list of presets. |
We recommend uploading a preview image to preset. This makes the work of the content creator much easier.
Presets can be also managed using the Management API. Read more about it in the MAPI Docs.