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.
https://mapi.storyblok.com/v1/spaces/:space_id/components/
Path Parameters
-
:space_id
required numberNumeric ID of a space
Request Body Properties
-
component
The Component Objectcomponent object.
-
name
required stringTechnical name used for component property in entries
-
display_name
stringName that will be used in the editor interface
-
schema
objectKey value pairs of component fields.
-
image
string or nullURL to the preview image, if uploaded
-
preview_field
stringThe field that is for preview in the interface (Preview Field)
-
is_root
booleanTrue if the component can be used as a Content Type
-
preview_tmpl
stringYour component preview template. You can learn how to design your preview template here.
-
is_nestable
booleanTrue if the component is nestable (insertable) in block field types
-
component_group_uuid
stringThe component folder ID of the component
-
color
stringThe color of the icon selected for the component
-
icon
stringIcon selected for the component
-
internal_tag_ids
string[]List of ids of the tags assigned to the component
-
content_type_asset_preview
stringAsset preview field (Preview Card) for a content type component
-
Response Properties
-
component
The Component Objectcomponent object.
-
id
numberThe numeric ID
-
name
stringTechnical name used for component property in entries
-
display_name
stringName that will be used in the editor interface
-
created_at
stringCreation date (Format:
yyyy-MM-dd'T'HH:mm:ssZ
) -
updated_at
stringLatest update date (Format:
yyyy-MM-dd'T'HH:mm:ssZ
) -
schema
objectKey value pairs of component fields.
-
image
string or nullURL to the preview image, if uploaded
-
preview_field
stringThe field that is for preview in the interface (Preview Field)
-
is_root
booleanTrue if the component can be used as a Content Type
-
preview_tmpl
stringYour component preview template. You can learn how to design your preview template here.
-
is_nestable
booleanTrue if the component is nestable (insertable) in block field types
-
all_presets
object[]An array of presets for this component
-
id
numberThe numeric ID of the preset
-
name
stringName of the preset
-
component_id
numberThe ID of the component the preset is for
-
image
string or nullLink to the preview image of the preset
-
icon
stringIcon selected for the preset
-
color
stringColor of the icon selected for the preset
-
description
stringThe description of the preset
-
-
real_name
stringDuplicated technical name or display name, used for internal tasks
-
component_group_uuid
stringThe component folder ID of the component
-
color
stringThe color of the icon selected for the component
-
icon
stringIcon selected for the component
-
internal_tags_list
object[]List of objects containing the details of tags used for the component
-
id
numberId of the tag
-
name
stringName of the tag
-
-
internal_tag_ids
string[]List of ids of the tags assigned to the component
-
content_type_asset_preview
stringAsset preview field (Preview Card) for a content type component
-
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}}"
// 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)
})
$client = new \Storyblok\ManagementClient('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)->getBody();
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)
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();
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);
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()
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.