Embeddable Whiteboards

Miro, tldraw, Excalidraw, and more — what they are, how they compare, and how to drop one into your own site.

What is Miro?

Miro is the dominant SaaS collaborative whiteboard platform. Think of it as Figma for brainstorming — infinite canvas, sticky notes, diagrams, mind maps, templates, and deep integrations (Jira, Slack, Notion, Confluence).

Key facts:

• Founded: 2011 (originally RealtimeBoard)
• Business model: Freemium SaaS — free tier (3 boards), paid from $10/mo
• Scale: 70M+ users, 200K+ organizations
• Integrations: 160+ — Jira, Slack, Teams, Google, Adobe, Figma
• Use cases: Product roadmaps, design sprints, agile ceremonies, workshops, retrospectives

Embedding Miro: Miro has an official embed mode via <iframe> or a JavaScript SDK. You can embed a specific board (read-only or editable) into any webpage. The Miro Developer Platform also supports custom apps and widgets.

<!-- Miro iframe embed -->
<iframe src="https://miro.com/app/live-embed/BOARD_ID/"
  width="100%" height="600"
  allow="clipboard-read; clipboard-write">
</iframe>

Caveats: Paid plan needed above the free tier. Users need a Miro account to edit embedded boards. The embed feels like "someone else's app in a box."

What is tldraw?

tldraw is an open-source whiteboard library that you can drop into any web app as a native component — not an iframe, not a separate platform. It's the opposite of Miro's approach.

Key facts:

• Creator: Steve Ruiz (raised $2.7M seed in 2022)
• License: tldraw-core: Apache 2.0 / tldraw-sync: paid
• GitHub: 38K+ stars
• Philosophy: "A whiteboard for your product, not a product that is a whiteboard"
• Stack: TypeScript, React, Canvas/SVG rendering engine

Embedding tldraw: Install one npm package and you get a fully functional whiteboard component that renders into your own DOM. It's your code, your data, your users.

npm install tldraw

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

function MyCanvas() {
  return (
    <div style={{ width: '100%', height: '600px' }}>
      <Tldraw />
    </div>
  )
}

Real-time collaboration: tldraw has tldraw sync (paid) — a managed backend for multiplayer. Or roll your own sync with Yjs/WebSocket. tldraw stores state as JSON snapshots you can persist wherever you like.

Also worth knowing: tldraw has make-real — an experimental AI feature that turns drawings into working UI code (HTML/Tailwind). Fun, but not production-ready.

Miro vs tldraw

Other Tools Like These

The landscape of visual collaboration tools breaks into two camps: SaaS platforms (turnkey, multi-feature) and embeddable libraries (drop-in components). Here's the full field:

SaaS Platforms (Miro's world)

Embeddable / Open-Source Libraries (tldraw's world)

npm install @excalidraw/excalidraw

import { Excalidraw } from '@excalidraw/excalidraw'

// Use directly as a React component
<Excalidraw
  initialData={{ elements, appState }}
  onChange={(elements, state) => saveState(elements)}
/>

How to Embed: Decision Matrix

How to Embed in Your Stuff

Here's the practical playbook for getting any of these into your site.

Option A: Quick iframe (any site, any framework)

Works with Miro, FigJam, Lucidspark, and Excalidraw embed. Simple but limited — the whiteboard is a black box.

<!-- Excalidraw embed (no account needed) -->
<iframe src="https://excalidraw.com/?embed=1&theme=light"
  width="100%" height="500px">
</iframe>

Option B: npm package (React apps)

Works with tldraw, Excalidraw, draw.io. Full control. The whiteboard renders as part of your DOM, responds to your theme, stores data your way.

// tldraw — full-featured whiteboard
import { Tldraw } from 'tldraw'

// Excalidraw — hand-drawn style
import { Excalidraw } from '@excalidraw/excalidraw'

Option C: Headless / custom rendering

If you need to render whiteboard content without the editing UI (e.g., display saved diagrams), tldraw and Excalidraw both export their state as JSON. You can render the shapes yourself or use their static renderers.

// tldraw — get snapshot data
const editor = useEditor()
const snapshot = editor.store.getSnapshot()
const json = JSON.stringify(snapshot)

// Restore later
editor.loadSnapshot(JSON.parse(json))

Option D: Embed with collaboration

For real-time multi-user:

• Miro/FigJam: Built-in — just share the iframe/board link
• tldraw sync (paid, managed) or Yjs provider (free, self-host)
• Excalidraw: Uses E2E-encrypted rooms — no server setup needed for basic collab

Quick Start: Which One Should You Pick?

Links & Resources

• Miro — Embed docs
• tldraw — GitHub / Getting started
• Excalidraw — GitHub / npm docs
• FigJam — Embed docs
• Mural
• Lucidspark
• Whimsical
• draw.io (diagrams.net)