Базовое использование

Открыть инструмент

1. Откройте Cursor Canvas.
2. Передайте исходник одним из трёх способов:
   • Вставка: поместите содержимое файла в редактор TypeScript
   • Загрузка: перетащите файл в зону или нажмите Выбрать файл
   • Загрузить пример: нажмите Загрузить пример, чтобы подставить галерею
3. Проверьте живое превью справа.
4. При желании добавьте заголовок и нажмите Создать короткую ссылку.
5. Скопируйте URL и отправьте. Любой сможет снова открыть отрисованную страницу.

Допустимые загрузки: .canvas.tsx, .tsx, .ts, .jsx, .txt. Исходник ограничен 200 000 символами.

Как выглядит корректный файл

Компилятор требует default export и импорт из cursor/canvas:

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

export default function Demo() {
  return (
    <Stack gap={16}>
      <H1>Hello</H1>
      <Text>Rendered on WorkerJob.</Text>
    </Stack>
  );
}

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>
  );
}

Обмен и история

• Короткие ссылки многоразовые; это не одноразовые сообщения.
• Тот же пользователь сессии и тот же MD5 файла повторно используют существующую ссылку.
• Опубликованные ссылки перечисляют canvas, созданные в этом браузере, чтобы загрузить или удалить их.

Дальше

• Расширенные возможности
• Примеры