Excalimate

Turn hand-drawn Excalidraw diagrams into keyframe animations

App · Landing Page · Feedback · MCP Server Docs · Report Bug

Draw diagrams with the full Excalidraw editor, then animate elements with opacity fades, position slides, scale effects, rotation, and arrow draw-on animations. Export as MP4, WebM, GIF, or animated SVG. Includes an MCP server so AI agents can create and animate diagrams in real-time.

Demo

https://github.com/user-attachments/assets/77e87c62-0ff4-4a56-aee6-50553b94798c

[!CAUTION] A considerable part of this codebase was built with AI. The process of cleaning up the code and fixing bugs is still ongoing — use it cautiously. If you encounter any issues, please report them.

Features

• Full Excalidraw editor — draw, edit, resize, connect arrows, add text
• Progressive V2 creator — Magic Canvas, plain-language Sequence, and Advanced Studio
• Local animation tools — deterministic Auto Animate, presets, templates, and Smart Transitions
• Keyframe animation — opacity, position, scale, rotation, draw progress
• Advanced timeline — collapsible per-element tracks with interpolation lines, clip markers, scrubbing
• Camera animation — pan/zoom keyframes with aspect ratio control
• Unified export — MP4, WebM, GIF, animated SVG, Lottie, and dotLottie
• Hosted player and embeds — compact playback runtime with responsive controls
• E2E encrypted sharing — expiry and revocation with the AES-256-GCM key kept in the URL hash
• MCP server — 35 tools, including all 29 legacy tools and six structured V2 action tools
• Live mode — watch AI changes appear in the editor in real-time via SSE

Quick Start

Try it now — no cloning required:

npx @excalimate/mcp-server

Point your AI tool to http://127.0.0.1:3001/mcp. After it connects, copy the printed preview pairing URL into File → Preferences in app.excalimate.com, then click Live.

Local development

npm install
npm run dev
# → http://localhost:5173

AI Integration (MCP Server)

The MCP server lets AI agents (Copilot, Claude, Cursor, Windsurf) create and animate diagrams for you. Start the server, connect your AI tool, and watch diagrams appear live in app.excalimate.com.

The recommended workflow is action-first: create a scene, then use auto_animate, apply_animation_preset, upsert_action_sequence, or create_camera_move before reaching for raw keyframes. These tools use the same browser-neutral V2 schema and deterministic animation core as the app stack. The MCP server does not host a model or send scene content to an AI service.

npx @excalimate/mcp-server              # default port 3001
npx @excalimate/mcp-server --port 4000  # custom port

VS Code (GitHub Copilot)

Add to .vscode/mcp.json:

{
  "servers": {
    "excalimate": {
      "type": "http",
      "url": "http://localhost:3001/mcp",
    },
  },
}

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "excalimate": {
      "command": "npx",
      "args": ["@excalimate/mcp-server", "--stdio"]
    }
  }
}