Skip to main content

Documentation Index

Fetch the complete documentation index at: https://sleekplan.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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

Renders a block of text. Use "header" for a prominent heading or "paragraph" for body copy.
​
type
string
required
Must be "text".
​
text
string
required
The string to display.
​
style
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.
Renders a horizontal rule to visually separate sections of the canvas.
​
type
string
required
Must be "divider".
{ "type": "divider" }
No interaction.
Renders a clickable button. When clicked, Sleekplan posts { [id]: true } back to your endpoint.
​
type
string
required
Must be "button".
​
id
string
required
Unique identifier for this component. Used as the key in the interaction payload.
​
label
string
required
Text displayed on the button.
​
style
string
required
Visual style of the button. Use "blue" for a primary action button.
​
action
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 }.
Renders a single-line text input. Submitted value is posted as { [id]: <value> }.
​
type
string
required
Must be "input".
​
id
string
required
Unique identifier. Used as the key in the interaction payload.
​
label
string
required
Placeholder text shown inside the input field.
​
title
string
Optional label rendered above the input field.
​
submit
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>" }.
Renders a multi-line text area. Follows the same interaction model as input.
​
type
string
required
Must be "textarea".
​
id
string
required
Unique identifier. Used as the key in the interaction payload.
​
label
string
required
Placeholder text shown inside the textarea.
​
title
string
Optional label rendered above the textarea.
​
submit
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 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.
​
type
string
required
Must be "list".
​
id
string
required
Unique identifier for the list. Used as the key in the interaction payload.
​
title
string
required
Heading displayed above the list.
​
items
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" } }
]
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" } }
]