Workspace New Block: Canvas

Introducing the Canvas Block in ReadyTools Workspace

Structured text, headings, and lists are essential for organizing thought, but architecture planning, user flow mapping, visual brainstorming, and system design need a free-form, spatial canvas.

Today, we are releasing Canvas, a dedicated visual whiteboard block integrated directly into ReadyTools Workspace.

Canvas is powered by the engine created by Excalidraw. We chose Excalidraw because their team built an exceptionally high-quality, reliable, and well-architected system, and ReadyTools only works with and integrates serious, top-tier engineering. Around that core, we built deep integrations with the ReadyTools ecosystem: real-time collaborative state synchronization via CRDTs, direct encrypted Vault file embedding and Lara (AI) diagramming.

Core Capabilities

• Freehand Sketching and Precision Shapes: Draw naturally with smooth stroke processing, steady pen stabilization, or switch to geometric tools including rectangles, rounded rectangles, diamonds, triangles, pills, ellipses, and sticky notes.
• Intelligent Connectors and Layouts: Connect objects using straight, elbow, or curved lines with configurable arrowheads and dashed borders. Canvas includes object snapping, automatic alignment guides, distribute tools, and tidy-up actions to keep complex diagrams structured.
• AI-Powered Text-to-Diagram with Lara: Canvas integrates with Lara AI to transform natural language into editable visuals. When you open the Text-to-Diagram dialog and describe a architecture, database schema, user journey, or logic flow, Lara streams valid Mermaid flowchart structures that Canvas instantly converts into native, editable diagram elements.
• Bundled Vector Libraries: Canvas comes preloaded with curated asset libraries accessible out of the box:
  • Software Architecture (servers, databases, cloud services, message brokers)
  • UX Wireframing components (inputs, dialogue boxes, mobile and desktop UI shells)
  • System and interface icon sets
  • Stick figures and diagrammatic annotations
• Encrypted Vault Integration: You can open your ReadyTools Vault directly from the Canvas toolbar and embed assets straight onto the board:
  • Images render with native aspect ratio controls.
  • Audio tracks display with an inline playable controller.
  • Videos embed with integrated playback controls.
  • PDF documents display in interactive viewer frames.
  • Code files and miscellaneous attachments render as dedicated interactive cards with direct download options.
• Smart Paste Embeds: Pasting media or platform links directly onto the canvas automatically transforms them into interactive embeds, supporting YouTube, Spotify, Apple Music, Vimeo, Loom, Figma, and general web frames.
• Stylus and Apple Pencil Support: A dedicated stylus mode ensures that pen and Apple Pencil input always draws, allowing you to sketch freely while navigating or moving objects with touch or mouse.
• High-Resolution Exports: Export the full canvas, an active frame, or a selected region as a 2x high-resolution PNG, vector SVG, or complete scene file, with transparent or solid background options.

Performance and Collaborative Architecture

Embedding an interactive visual engine inside a multi-block document editor requires careful performance and concurrency engineering:

• Real-Time Collaboration with Yjs: Concurrent edits on the Canvas are synchronized using Yjs CRDTs. Element mutations are diffed locally and dispatched as atomic commits. Scene reconciliation merges incoming remote updates without clobbering active user interactions, and deletions are safely tracked with deterministic tombstones.
• Workspace Virtualizer Integration: Canvas blocks are mapped directly into our virtualizer with an optimized baseline frame height. Off-screen instances yield render resources, ensuring that pages with complex visual diagrams maintain fluid 60 FPS scrolling.
• Debounced State Commits: Scene modifications are batched and scheduled using browser idle callbacks (requestIdleCallback) with fallback timers, avoiding heavy main-thread blocking during rapid sketching.
• Heavy Block Lifecycle Limits: To maintain document stability across different device types, Canvas is managed as part of Workspace's heavy block capacity system, with generous allowances on Free and Go tiers and unlimited heavy blocks on Plus and Max plans. That means every plan can use it for free.
• Dynamic Loading: The Canvas editor module is loaded dynamically with server-side rendering disabled, keeping initial document bundle sizes small and fast to load.
• Adaptive Appearance: Canvas respects application-wide light and dark mode settings, and supports customizable canvas surfaces including ReadyTools canvas gray, dot matrix, grid, blank paper, and transparent backgrounds.

Getting Started

To add a Canvas to any page in your Workspace, type /canvas in the block editor or select Canvas from the block insertion menu.