1. Create a Component

Create a Component

You can set most of the fields that are available in the component object, below we only list the properties in the example and possible required fields.

/spaces/:space_id/components/

Path Parameters

  • :space_id

    required number

    Numeric id of a space

Request Body Properties

  • component

    The Component Object

    component object.

    • name

      required string

      Technical name used for component property in entries

    • display_name

      string

      Name that will be used in the editor interface

    • 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

    • 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_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

Response Properties

  • component

    The Component Object

    component object.

    • 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

      • A single preset object

    • 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

Request
curl "https://mapi.storyblok.com/v1/spaces/606/components/" \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Authorization: YOUR_OAUTH_TOKEN" \
  -d "{\t\"component\": {\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}"
Request
// Using the Universal JavaScript Client:
// https://github.com/storyblok/storyblok-js-client
Storyblok.post('/spaces/606/components/', {
	"component": {
		"name": "banner_section",
		"display_name": null,
		"schema": {
			"headline": {
				"type": "textarea",
				"pos": 0,
				"translatable": true,
				"description": "This field is used to render an H1 title"
			}
		},
		"is_root": false,
		"is_nestable": true,
	}
})
  .then(response => {
    console.log(response)
  }).catch(error => { 
    console.log(error)
  })
Request
$client = new \Storyblok\Client('YOUR_STORYBLOK_SPACE_ACCESS_TOKEN');

$payload = [
	"component" =>  [
		"name" =>  "banner_section",
		"display_name" =>  null,
		"schema" =>  [
			"headline" =>  [
				"type" =>  "textarea",
				"pos" =>  0,
				"translatable" =>  true,
				"description" =>  "This field is used to render an H1 title"
			]
		],
		"is_root" =>  false,
		"is_nestable" =>  true,
	]
];

$client->post('/spaces/606/components/', $payload)->getBody();
Request
require 'storyblok'
client = Storyblok::Client.new(oauth_token: 'YOUR_OAUTH_TOKEN')

payload = {
	"component" =>  {
		"name" =>  "banner_section",
		"display_name" =>  null,
		"schema" =>  {
			"headline" =>  {
				"type" =>  "textarea",
				"pos" =>  0,
				"translatable" =>  true,
				"description" =>  "This field is used to render an H1 title"
			}
		},
		"is_root" =>  false,
		"is_nestable" =>  true,
	}
}

client.post('/spaces/606/components/', payload)
Request
HttpResponse<String> response = Unirest.post("https://mapi.storyblok.com/v1/spaces/606/components/")
  .header("Content-Type", "application/json")
  .header("Authorization", "YOUR_OAUTH_TOKEN")
  .body("{\t\"component\": {\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}")
  .asString();
Request
var client = new RestClient("https://mapi.storyblok.com/v1/spaces/606/components/");
var request = new RestRequest(Method.POST);

request.AddHeader("Content-Type", "application/json");
request.AddHeader("Authorization", "YOUR_OAUTH_TOKEN");
request.AddParameter("application/json", "{\t\"component\": {\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
Request
import Foundation

let headers = [
  "Content-Type": "application/json",
  "Authorization": "YOUR_OAUTH_TOKEN"
]

let postData = NSData(data: "{\t\"component\": {\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}".data(using: String.Encoding.utf8)!)
let request = NSMutableURLRequest(url: NSURL(string: "https://mapi.storyblok.com/v1/spaces/606/components/")! as URL, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 10.0)

request.method = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
Request
import requests

url = "https://mapi.storyblok.com/v1/spaces/606/components/"

querystring = {}

payload = "{\t\"component\": {\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}"
headers = {
  'Content-Type': "application/json",
  'Authorization': "YOUR_OAUTH_TOKEN"
}

response = requests.request("POST", url, data=payload, headers=headers, params=querystring)

print(response.text)

You will receive a fully loaded component object as a response.