Cursor Canvas

Cursor Canvas отрисовывает файл .canvas.tsx из Cursor в браузере и публикует многоразовый короткий URL вида /cursor-canvas/cv_xxxx.

Используйте, когда агент создал canvas, который нужно показать коллегам, прикрепить к тикету или проверить вне IDE.

Что делает

1. Вставьте или загрузите canvas, который импортирует только из cursor/canvas.
2. Смотрите превью через собственный React-рендерер сайта (inline SVG, SSR).
3. Создайте короткую ссылку. Любой, у кого есть URL, может снова открыть отрисованную страницу.

Это не runtime Cursor IDE. Вёрстка близка; кнопки Agent открывают Cursor через deeplink cursor://, если ОС это разрешает.

Живое превью

Фрагмент ниже — настоящий canvas. Тот же рендерер работает в инструменте.

import { H1, Stack, Text } from "cursor/canvas";

export default function Hello() {
  return (
    <Stack gap={12}>
      <H1>Hello, Canvas</H1>
      <Text tone="secondary">
        Live preview rendered in the browser from cursor/canvas.
      </Text>
    </Stack>
  );
}

Ключевые возможности

• Живое превью: компиляция и отрисовка в браузере по мере вставки
• Загрузка: перетащите .canvas.tsx, .tsx, .ts, .jsx или .txt
• Короткие ссылки: многоразовые страницы с счётчиком просмотров
• История: этот браузер может показать и снова открыть созданные им ссылки
• Тема: превью следует светлому / тёмному режиму сайта
• Песочница: разрешены только импорты cursor/canvas и React

Сценарии

• Поделиться дашбордом агента, не отправляя исходный файл
• Проверить вёрстку canvas перед коммитом в репозиторий
• Объяснять публичные примитивы cursor/canvas на живых примерах

Дальше

• Базовое использование
• Примеры
• Безопасность