The Component Object

This is an object representing a component in a space. Some properties can be read-only, and others can be managed by the space owner using the Management API.

It is important to note that the name will be shown to the user in the content editor if the display_name is null. If display_name is a string, it will be shown to the user inside the content editor.

There is another field called real_name which is read-only and is used by Storyblok internally. If display_name is null, the real_name is set to name . If display_name is a string, the real_name field has the value of display_name .

You should use the name and display_name for any purpose.

If is_nestable and is_root properties are both set to false, the component is nestable.

Properties

id
number

The numeric ID
name
string

Technical name used for component property in entries
display_name
string

Name that will be used in the editor interface
created_at
string

Creation date (Format: yyyy-MM-dd'T'HH:mm:ssZ)
updated_at
string

Latest update date (Format: yyyy-MM-dd'T'HH:mm:ssZ)
schema
object

Key value pairs of component fields.
image
string or null

URL to the preview image, if uploaded
preview_field
string

The field that is for preview in the interface (Preview Field)
is_root
boolean

True if the component can be used as a Content Type
preview_tmpl
string

Your component preview template. You can learn how to design your preview template here.
is_nestable
boolean

True if the component is nestable (insertable) in block field types
all_presets
object[]

An array of presets for this component
- id
  number
  
  The numeric ID of the preset
- name
  string
  
  Name of the preset
- component_id
  number
  
  ID of the component the preset should be connected
- image
  string or null
  
  Link to the preview image of the preset
- icon
  string
  
  Icon selected for the preset
- color
  string
  
  Color of the icon selected for the preset
- description
  string
  
  The description of the preset
- preset
  The Preset Object
  
  A single preset object
  - id
    number
    
    Numeric ID of your preset
  - name
    string
    
    Given name of your preset
  - preset
    object
    
    fields of the component filled with content
  - component_id
    number
    
    ID of the component the preset should be connected
  - image
    string or null
    
    Screenshot or other preview image for your editor; Default: null
  - created_at
    string
    
    Creation date (Format: yyyy-MM-dd'T'HH:mm:ssZ)
  - updated_at
    string
    
    Latest update date (Format: yyyy-MM-dd'T'HH:mm:ssZ)
real_name
string

Duplicated technical name or display name, used for internal tasks
component_group_uuid
string

The component group ID of the component
color
string

The color of the icon selected for the component
icon
string

Icon selected for the component
internal_tags_list
object[]

List of objects containing the details of tags used for the component
- id
  number
  
  Id of the tag
- name
  string
  
  Name of the tag
internal_tag_ids
string[]

List of ids of the tags assigned to the component
content_type_asset_preview
string

Asset preview field (Preview Card) for a content type component

Example Object

{
	"component": {
		"name": "banner_section",
		"display_name": null,
		"created_at": "2023-03-27T10:35:25.086Z",
		"updated_at": "2023-07-04T08:30:54.235Z",
		"id": 3672886,
		"schema": {
      // definition of fields (schema) for this component
			"headline": {
				"type": "textarea",
				"pos": 0,
				"translatable": true,
				"description": "This field is used to render an H1 title"
			}
		},
		"image": "//a.storyblok.com/f/88751/x/d4284bb2e5/screenshot-2021-05-06-at-15-55-21.png",
		"preview_field": null,
		"is_root": false,
		"preview_tmpl": null,
		"is_nestable": true,
		"all_presets": [],
		"preset_id": null,
		"real_name": "banner_section",
		"component_group_uuid": "19cb297f-541a-4a23-b02e-66d08e5f6323",
		"color": "#fbce41",
		"icon": "block-image",
        "internal_tags_list": [
            {
                "id": 43211,
                "name": "test"
            },
            {
                "id": 43212,
                "name": "test2"
            }
        ],
        "internal_tag_ids": [
            "43211",
            "43212"
        ],
        "content_type_asset_preview": "hero_image"
	}
}

Prev Introduction

Next Possible Field Types