Canvas examples - Sleekplan

Two minimal but realistic implementations show the full Canvas lifecycle. Both verify the X-Secret header, handle the initial render, react to button clicks, and return confirmation state.

Minimal endpoint

Node.js (Express)
PHP

import express from 'express';

const app = express();
app.use(express.json());

const SECRET = process.env.SLEEKPLAN_CANVAS_SECRET;

app.post('/sleekplan/canvas', (req, res) => {
  if (req.get('X-Secret') !== SECRET) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  const { submit, ['button-action-create']: createClicked } = req.body;

  if (!submit) {
    return res.json([
      { type: 'text', text: 'Search or create item', style: 'paragraph' },
      { type: 'input', id: 'input-action-search', label: 'Search...', submit: true },
      { type: 'button', id: 'button-action-create', label: 'Create new item', style: 'blue', action: { type: 'submit' } }
    ]);
  }

  if (createClicked) {
    // ...create item in your system, then confirm:
    return res.json([
      { type: 'link', title: 'Linked with:', text: 'Item #123', href: 'https://example.com/items/123' },
      { type: 'button', id: 'button-action-unlink', label: 'Unlink item', style: 'blue', action: { type: 'submit' } }
    ]);
  }

  return res.json([{ type: 'text', text: 'No action', style: 'paragraph' }]);
});

app.listen(3000, () => console.log('Canvas listening on :3000'));

<?php
$secret = getenv('SLEEKPLAN_CANVAS_SECRET');
$input = json_decode(file_get_contents('php://input'), true);

if (($_SERVER['HTTP_X_SECRET'] ?? '') !== $secret) {
  http_response_code(401);
  echo json_encode(['error' => 'Unauthorized']);
  exit;
}

$submit = $input['submit'] ?? false;
$createClicked = $input['button-action-create'] ?? false;

if (!$submit) {
  echo json_encode([
    ['type' => 'text', 'text' => 'Search or create item', 'style' => 'paragraph'],
    ['type' => 'input', 'id' => 'input-action-search', 'label' => 'Search...', 'submit' => true],
    ['type' => 'button', 'id' => 'button-action-create', 'label' => 'Create new item', 'style' => 'blue', 'action' => ['type' => 'submit']]
  ]);
  exit;
}

if ($createClicked) {
  echo json_encode([
    ['type' => 'link', 'title' => 'Linked with:', 'text' => 'Item #123', 'href' => 'https://example.com/items/123'],
    ['type' => 'button', 'id' => 'button-action-unlink', 'label' => 'Unlink item', 'style' => 'blue', 'action' => ['type' => 'submit']]
  ]);
  exit;
}

echo json_encode([
  ['type' => 'text', 'text' => 'No action', 'style' => 'paragraph']
]);

Tips and gotchas

Always reject missing or wrong X-Secret early.

Treat the header check as the first thing your handler does. Any request that fails it should receive a 401 and nothing else.

Return arrays, not single objects.

Sleekplan accepts a single object, but arrays make intent obvious and are easier to extend when you need to render multiple components.

Use stable component IDs.

The id is the field name in subsequent payloads — renaming it mid-flow drops state and breaks your handler’s ability to detect which button was clicked.

Show section errors with {"error": "..."} as the first array element.

See Inline errors for the exact shape Sleekplan expects when you need to surface a validation message.

Build links back to Sleekplan with feedback_id.

Pattern: https://app.sleekplan.com/feedback/{feedback_id}. The feedback_id is included in every Canvas payload so you can store it alongside your linked item.

Need extra help? Share your endpoint URL and a sample payload with support@sleekplan.com.

​Minimal endpoint

​Tips and gotchas

Minimal endpoint

Tips and gotchas