> ## 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 overview

> Canvas lets your integration render interactive UI inside the Sleekplan admin — the request/response loop, available views, and the X-Secret verification model

Canvas is a custom integration surface that renders interactive UI inside the Sleekplan admin — currently in the right sidebar of a feedback post. Your server receives a JSON payload, returns a component tree, and Sleekplan renders it. When the admin interacts with your UI, Sleekplan POSTs the submitted values back to your endpoint and re-renders whatever you return.

## How it works

1. You register a Canvas provider for a specific admin view by installing the Custom Integration in Sleekplan.
2. When the view loads, Sleekplan POSTs JSON to your Canvas URL and renders the components you return.
3. When the admin clicks a button, selects a list item, or submits an input, Sleekplan POSTs the submitted fields back to your URL with `submit: true`.
4. You return an updated component tree. The UI updates immediately.

## Supported views

| View         | Where it appears                                    | Query params  |
| ------------ | --------------------------------------------------- | ------------- |
| `admin_post` | Right sidebar of a feedback post in Sleekplan Admin | `feedback_id` |

Additional views will be supported in future releases.

## Lifecycle of a request

### Initial render

When the view loads, Sleekplan sends a POST to your Canvas endpoint with the current context. No `submit` field is present — this is the signal to return your initial component tree.

```json theme={"system"}
{
  "product_id": 12345,
  "type": "admin_post",
  "feedback_id": 6789
}
```

### Submit and interaction

When the admin interacts with your UI, Sleekplan POSTs the submitted field values back to your endpoint. The payload includes `submit: true` alongside the values the admin entered or selected.

```json theme={"system"}
{
  "product_id": 12345,
  "feedback_id": 6789,
  "submit": true,
  "button-action-create": true,
  "create-item-title": "Improve SSO",
  "create-item-description": "Support IdP-initiated SAML",
  "create-item-project": "proj_abc",
  "create-item-type": "Task"
}
```

* Field names come from the `id` you assign to each component.
* Buttons post `{ [id]: true }` when clicked.
* Lists post `{ [id]: <selectedItem.id> }` when an item is selected.

## Security

### X-Secret header

Every request Sleekplan sends to your Canvas endpoint includes an `X-Secret: <token>` header. The token is set when you install the Custom Integration. Always validate this header and reject requests where it does not match.

### Outbound IP

Sleekplan's outbound calls originate from `168.119.102.99`. If your infrastructure restricts inbound traffic by IP, you may add this address to your allow-list.

### Content types

Requests use `Content-Type: application/json` and include `Accept: application/json`. Your endpoint should return `Content-Type: application/json` as well.

## Next steps

<CardGroup cols={3}>
  <Card title="Install the integration" icon="settings" href="/canvas/install">
    Register your Canvas provider and configure the X-Secret token.
  </Card>

  <Card title="Component reference" icon="layout" href="/canvas/components">
    Browse every component available for building your UI tree.
  </Card>

  <Card title="Working examples" icon="code" href="/canvas/examples">
    End-to-end examples that show common Canvas integration patterns.
  </Card>
</CardGroup>