1. Update a Component

Update a Component

The PUT method sends the component object with updated values to our backend. An update on the component will not take over already inserted values, make sure also to update your stories that contain this component.

/spaces/:space_id/components/:component_id

Path Parameters

  • :space_id

    required number

    Numeric id of a space

  • :component_id

    required number

    The numeric id of the component

Request Body Properties

  • component

    The Component Object

    component object.

    • name

      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/4123" \ 
  -X PUT \
  -H "Authorization: YOUR_OAUTH_TOKEN" \
  -H "Content-Type: application/json" \
  -d "{\t\"component\": {\"id\":4123,\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.put('/spaces/606/components/4123', {
	"component": {
        "id":4123,
		"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" =>  [
        "id" => 4123,
		"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->put('/spaces/606/components/4123', $payload)->getBody();
Request
require 'storyblok'
client = Storyblok::Client.new(oauth_token: 'YOUR_OAUTH_TOKEN')

payload = {
	"component" =>  {
        "id" => 4123,
		"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.put('/spaces/606/components/4123', payload)
Request
HttpResponse<String> response = Unirest.put("https://mapi.storyblok.com/v1/spaces/606/components/4123")
  .header("Content-Type", "application/json")
  .header("Authorization", "YOUR_OAUTH_TOKEN")
  .body("{\t\"component\": {\"id\":4123,\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/4123");
var request = new RestRequest(Method.PUT);

request.AddHeader("Content-Type", "application/json");
request.AddHeader("Authorization", "YOUR_OAUTH_TOKEN");
request.AddParameter("application/json", "{\t\"component\": {\"id\":4123,\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\": {\"id\":4123,\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/4123")! as URL, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 10.0)
request.method = "PUT"
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/4123"

querystring = {}

payload = "{\t\"component\": {\"id\":4123,\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("PUT", url, data=payload, headers=headers, params=querystring)

print(response.text)

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