Excalidraw

Excalidraw is a virtual collaborative whiteboard tool for sketching hand-drawn like diagrams.

Docs

Tutorials

Tools

  • React Integration:
    • @excalidraw/excalidraw - React component library
    • Supports Next.js App Router and Pages Router (with dynamic imports)
    • Browser integration via CDN with import maps
  • Libraries:
  • Obsidian Integration:
    • Obsidian-Excalidraw Plugin - Full-featured integration with Obsidian
    • Features: LaTeX formulas, OCR, SVG import, custom fonts/pens, drag-and-drop links, script store
  • Utilities:
    • convertToExcalidrawElements - Convert data to Excalidraw-compatible format
    • Type definitions available at @excalidraw/excalidraw/types

Features

  • Hand-drawn style diagrams
  • Collaborative editing (real-time)
  • Export to PNG, SVG, or Excalidraw format (JSON)
  • Open source and self-hostable
  • Libraries and templates support
  • Customizable color palettes (canvas background, element background, element stroke)
  • Markdown embedding support
  • LaTeX formula support (via Obsidian plugin)
  • SVG import capabilities

Data Format

  • .excalidraw: JSON-based format (editable, human-readable)
  • Stores drawing elements, app state, and metadata
  • Can be embedded in Markdown files (Obsidian integration)
  • Supports decompression for easier editing in Markdown view

Integration with Static Sites (Jekyll/GitHub Pages)

Option 1: Static Export (Recommended for most cases)

  • Export diagrams as PNG (for complex visuals) or SVG (for scalable diagrams)
  • Place exports in assets/images/ directory
  • Embed in Markdown using standard image syntax or HTML with Tailwind classes
  • JSON format allows programmatic manipulation if needed
  • Simpler integration than Figma - direct export, smaller file sizes

Option 2: Interactive Browser Integration

  • Full interactive Excalidraw embedded directly in GitHub Pages
  • Uses ES modules and import maps (works in modern browsers)
  • Files created:
    • packages/excalidraw/index.js - Initialization script
    • excalidraw-edit.html - Standalone editor page
  • Usage: 
    <!DOCTYPE html>
<html>
  <head>
    <title>Excalidraw in browser</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" 
          href="https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.css" />
    <script>
      window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
    </script>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19.0.0",
          "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",
          "react-dom": "https://esm.sh/react-dom@19.0.0",
          "react-dom/client": "https://esm.sh/react-dom@19.0.0/client"
        }
      }
    </script>
  </head>
  <body>
    <div class="container">
      <h1>Excalidraw Embed Example</h1>
      <div id="app"></div>
    </div>
    <script type="module" src="/packages/excalidraw/index.js"></script>
  </body>
</html>
  • Demo page: Visit /excalidraw-edit after deployment
  • Loading Excalidraw files: Add a ?file= parameter to load existing .excalidraw files: 
    <!-- Load a specific Excalidraw file -->
<iframe
  src="/excalidraw-edit?file=/assets/excalidraw/sig_agent_architecture.excalidraw"
  width="100%"
  height="600px"
  frameborder="0"
  style="border: 1px solid #e0e0e0; border-radius: 8px;">
</iframe>
  • Embedding in Jekyll pages: Use an iframe to embed the interactive editor: 
    <iframe
  src="/excalidraw-edit"
  width="100%"
  height="600px"
  frameborder="0"
  style="border: 1px solid #e0e0e0; border-radius: 8px;">
</iframe>
  • Customization: Edit packages/excalidraw/index.js to add features like:
    • Loading initial drawings from JSON
    • Saving drawings to localStorage
    • Export functionality
    • Collaboration features
    • Custom event handlers

Comparison with Figma

  • Excalidraw: Lightweight, hand-drawn style, faster for quick sketches. Simpler integration, smaller file sizes. Better for rapid ideation. JSON format is human-readable and editable
  • Figma: Full-featured design platform, polished UI/UX, better for professional designs and collaboration. More complex, requires export steps for static sites. Proprietary binary format
  • Both work well for static site integration (export SVG/PNG and embed)

Other