All examples

Infinite canvas

A launch retro on the infinite canvas: sticky notes in a frame and a decision flow. Tab through shapes, move with arrows, resize with Shift, connect with K, zoom and undo.

Infinite canvas

canvas-editor · canvas/CanvasEditor

canvas whiteboard
Props
  • canvas
  • labels
  • onchange
  • readonly
  • resolveImage
  • snap
  • sync

Live example loads in an isolated same-origin preview frame.

Source (canvas-editor/CanvasEditorDemo.svelte) 
<script lang="ts">
import { CanvasEditor } from '@texuli/canvas/editor';
import { retroBoard } from './board.ts';

/** A fictional launch retro on the infinite canvas: draw, connect, move by keyboard or pointer, zoom and undo. */
let canvas = $state.raw(retroBoard());
</script>

<div data-example="canvas-editor" class="canvas-editor-demo">
  <CanvasEditor bind:canvas />
</div>

<style>
  .canvas-editor-demo {
    min-block-size: 32rem;
  }
</style>