Create a Component

https://mapi.storyblok.com/v1/spaces/:space_id/components/

You can set any property available in the component object. Below we only list the properties in the example and the possible required fields.

Path parameters

• :space_id required number

  Numeric ID of a space

Request body properties

• component The Component Object

  The component object

  Show child properties

  • name required string

    Technical name of a component. Visible in the content editor if the display_name is null.

  • display_name string

    Name displayed in the content editor

  • schema object

    Key value pairs of the component fields

  • image string | null

    URL of the component preview image (if uploaded)

  • preview_field string

    The component preview field in the UI

  • is_root boolean

    true if a component can be used as a content type block

  • preview_tmpl string

    The component preview template. Learn how to create a preview template.

  • is_nestable boolean

    true if a component is a Nestable block

  • component_group_id string

    The component folder ID

  • icon string

    Icon of the component

  • color string

    Color of the icon

  • internal_tag_ids string[]

    List of IDs of the internal tags assigned to a component

  • content_type_asset_preview string

    Asset preview field of a content type block

Response properties

• component The Component Object

  The component object

Examples

cURL

curl "https://mapi.storyblok.com/v1/spaces/606/components/" \
  -X POST \
  -H "Authorization: YOUR_OAUTH_TOKEN" \
  -H "Content-Type: application/json" \
  -d "{\"component\":{\"display_name\":null,\"is_nestable\":true,\"is_root\":false,\"name\":\"banner_section\",\"schema\":{\"headline\":{\"description\":\"This field is used to render a title\",\"pos\":0,\"translatable\":true,\"type\":\"text\"}}}}"

JS client

// Using the Universal JavaScript Client:
// https://github.com/storyblok/storyblok-js-client
Storyblok.post('spaces/606/components/', {
  "component": {
    "display_name": null,
    "is_nestable": true,
    "is_root": false,
    "name": "banner_section",
    "schema": {
      "headline": {
        "description": "This field is used to render a title",
        "pos": 0,
        "translatable": true,
        "type": "text"
      }
    }
  }
})
  .then(response => {
    console.log(response)
  }).catch(error => {
    console.log(error)
  })

PHP client

$client = new \Storyblok\ManagementClient('YOUR_OAUTH_TOKEN');

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

$client->post('spaces/606/components/', $payload)->getBody();

Java

HttpResponse<String> response = Unirest.post("https://mapi.storyblok.com/v1/spaces/606/components/")
  .header("Content-Type", "application/json")
  .header("Authorization", "YOUR_OAUTH_TOKEN")
  .body({"component":{"display_name":null,"is_nestable":true,"is_root":false,"name":"banner_section","schema":{"headline":{"description":"This field is used to render a title","pos":0,"translatable":true,"type":"text"}}}})
  .asString();

C#

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", "{\"component\":{\"display_name\":null,\"is_nestable\":true,\"is_root\":false,\"name\":\"banner_section\",\"schema\":{\"headline\":{\"description\":\"This field is used to render a title\",\"pos\":0,\"translatable\":true,\"type\":\"text\"}}}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);

Python

import requests

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

querystring = {}

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

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

print(response.text)

Ruby

require 'storyblok'
client = Storyblok::Client.new(oauth_token: 'YOUR_OAUTH_TOKEN')

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

client.post('spaces/606/components/', payload)

Swift

import Foundation

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

let postData = NSData(data: {"component":{"display_name":null,"is_nestable":true,"is_root":false,"name":"banner_section","schema":{"headline":{"description":"This field is used to render a title","pos":0,"translatable":true,"type":"text"}}}}.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()