Canvas component reference

Canvas responses are arrays of component objects. Sleekplan also accepts a single object and wraps it in an array automatically. This page documents every supported component and how interactions post values back to your endpoint.

Response format

[
  { "type": "text", "text": "Hello", "style": "header" },
  { "type": "button", "id": "btn-1", "label": "Continue", "style": "blue", "action": { "type": "submit" } }
]

Every component has a type field; most have an id that is used as the key in interaction payloads.

Components

text

Renders a block of text. Use "header" for a prominent heading or "paragraph" for body copy.

string

required

Must be "text".

string

required

The string to display.

string

required

Controls the visual treatment. Accepted values: "header" or "paragraph".

{ "type": "text", "text": "Search or create a DevOps item", "style": "header" }

No interaction — text components do not post values.

divider

Renders a horizontal rule to visually separate sections of the canvas.

string

required

Must be "divider".

{ "type": "divider" }

No interaction.

button

Renders a clickable button. When clicked, Sleekplan posts { [id]: true } back to your endpoint.

string

required

Must be "button".

string

required

Unique identifier for this component. Used as the key in the interaction payload.

string

required

Text displayed on the button.

string

required

Visual style of the button. Use "blue" for a primary action button.

object

required

Defines what happens when the button is clicked. Contains:

type — "submit" to post back to your Canvas endpoint, or "link" to navigate to a URL.
href — Required when type is "link". The URL to open.

{
  "type": "button",
  "id": "button-action-create",
  "label": "Create new item",
  "style": "blue",
  "action": { "type": "submit" }
}

Interaction: clicking the button posts { "button-action-create": true }.

input

Renders a single-line text input. Submitted value is posted as { [id]: <value> }.

string

required

Must be "input".

string

required

Unique identifier. Used as the key in the interaction payload.

string

required

Placeholder text shown inside the input field.

string

Optional label rendered above the input field.

boolean

When true, pressing Enter or the submit arrow submits the form immediately.

{
  "type": "input",
  "id": "input-action-search",
  "label": "Search...",
  "title": "Search items",
  "submit": true
}

Interaction: submitting the input posts { "input-action-search": "<entered value>" }.

textarea

Renders a multi-line text area. Follows the same interaction model as input.

string

required

Must be "textarea".

string

required

Unique identifier. Used as the key in the interaction payload.

string

required

Placeholder text shown inside the textarea.

string

Optional label rendered above the textarea.

boolean

When true, pressing Enter or the submit arrow submits the form immediately.

{
  "type": "textarea",
  "id": "create-item-description",
  "label": "Describe the issue...",
  "title": "Description"
}

Interaction: submitting the textarea posts { "create-item-description": "<entered value>" }.

Renders a select dropdown populated with a list of options. When the admin picks an option, its id is posted back.

string

required

Must be "dropdown".

string

required

Unique identifier. Used as the key in the interaction payload.

string

required

Label displayed above the dropdown.

array

required

Array of option objects, each with:

id — value posted when this option is selected.
text — label displayed in the dropdown.

{
  "type": "dropdown",
  "id": "create-item-project",
  "title": "Project",
  "options": [
    { "id": "proj_abc", "text": "Project Alpha" },
    { "id": "proj_def", "text": "Project Beta" }
  ]
}

Interaction: selecting an option posts { "create-item-project": "proj_abc" }.

link

Renders a hyperlink, optionally with a label above it. No interaction is posted.

string

required

Must be "link".

string

required

The visible link text.

string

required

The URL the link points to.

string

Optional label rendered above the link.

{
  "type": "link",
  "title": "Linked with:",
  "text": "DevOps #42",
  "href": "https://devops.example.com/items/42"
}

No interaction — link components do not post values.

list

Renders a labeled list of items. Each item is either a selectable "option" or a "link". When the admin selects an option item, the item’s id is posted under the list’s id.

string

required

Must be "list".

string

required

Unique identifier for the list. Used as the key in the interaction payload.

string

required

Heading displayed above the list.

array

required

Array of item objects. Each item is one of:

{ "type": "option", "id": <value>, "text": <string> } — a selectable row. When clicked, posts { [list.id]: <item.id> }. The id can be a nested object (for example { "item_id": 42, "project_id": "p1" }), and the whole object is posted back.
{ "type": "link", "href": <string>, "text": <string> } — a row that opens a URL. No interaction is posted.

{
  "type": "list",
  "id": "link-item-list",
  "title": "Items",
  "items": [
    { "type": "option", "id": { "item_id": 42, "project_id": "p1" }, "text": "Item #42 - Task" },
    { "type": "option", "id": { "item_id": 43, "project_id": "p2" }, "text": "Item #43 - Bug" }
  ]
}

Interaction: selecting the first option posts { "link-item-list": { "item_id": 42, "project_id": "p1" } }.

Conditional visibility

Any component accepts an optional condition object. When present, Sleekplan shows the component only when the value of the field identified by condition.value matches the string in condition.key.

{
  "type": "dropdown",
  "id": "create-item-type",
  "title": "Item Type",
  "condition": { "value": "create-item-project", "key": "proj_abc" },
  "options": [
    { "id": "Task", "text": "Task" },
    { "id": "Bug", "text": "Bug" }
  ]
}

In the example above, the dropdown is only visible when the create-item-project field currently holds the value "proj_abc".

Inline errors

To display a section-level error, return the first element with an error key instead of a type key.

[{ "error": "Could not connect to DevOps. Check your credentials and try again." }]

Sleekplan renders the message inline at the top of the canvas panel.

End-to-end flow

The following sequence shows how a complete link-creation flow might look across three round trips.

Initial render

The view loads and your server returns a search input and a create button.

[
  { "type": "text", "text": "Search or create DevOps item", "style": "paragraph" },
  { "type": "input", "id": "input-action-search", "label": "Search...", "submit": true, "placeholder": "leave blank to skip" },
  { "type": "button", "id": "button-action-create", "label": "Create new item", "style": "blue", "action": { "type": "submit" } }
]

After search submitted

The admin typed a query and submitted. Your server returns a list of matching items alongside the create button.

[
  {
    "type": "list",
    "id": "link-item-list",
    "title": "Items",
    "items": [
      { "type": "option", "id": { "item_id": 42, "project_id": "p1" }, "text": "Item #42 - Task" },
      { "type": "option", "id": { "item_id": 43, "project_id": "p2" }, "text": "Item #43 - Bug" }
    ]
  },
  { "type": "button", "id": "button-action-create", "label": "Create new item", "style": "blue", "action": { "type": "submit" } }
]

After link selected

The admin selected an item. Your server linked it and returns a confirmation with an unlink button.

[
  { "type": "link", "title": "Linked with:", "text": "DevOps #42", "href": "https://devops.example.com/items/42" },
  { "type": "button", "id": "button-action-unlink", "label": "Unlink item", "style": "blue", "action": { "type": "submit" } }
]

Get started

Build

Canvas component reference

Response format

Components

Conditional visibility

Inline errors

End-to-end flow

Initial render

After search submitted

After link selected

​Response format

​Components

​Conditional visibility

​Inline errors

​End-to-end flow

​Initial render

​After search submitted

​After link selected

Response format

Components

Conditional visibility

Inline errors

End-to-end flow

Initial render

After search submitted

After link selected