This repository implements an MCP (Model Context Protocol) server that renders Excalidraw diagrams with hand-drawn style animations. It provides two primary tools: `read_me` (returns a cheat sheet with element format and color palettes) and `create_view` (renders diagrams from Excalidraw JSON elements with streaming draw-on animations). The architecture is a Node.js server supporting both Streamable HTTP and stdio transports, with a React-based widget that uses Excalidraw's `exportToSvg` for SVG rendering (not the full canvas component). Key features include: progressive element streaming with morphdom DOM diffing, smooth viewport camera animation, interactive fullscreen editing with checkpoint/restore persistence (file, memory, or Redis backends), pencil stroke audio feedback, and one-click export to excalidraw.com. The server is deployable on Vercel via serverless functions. The codebase demonstrates strong engineering practices with clean abstractions, well-documented design decisions, and a focus on performance (no blink on final render, efficient SVG diffing).
This is a React-based single-page application that converts Excalidraw drawings into animated SVGs. It provides both an editing mode (using the Excalidraw library) where users can configure animation order and duration per element, and an animate mode where the resulting SVG is rendered with playback controls (play/pause/step/reset). The core animation logic is implemented using SMIL (SVG animations), patching SVG elements with `animate`, `animateMotion`, and `textPath` elements. Users can load drawings from files, libraries, or shareable URLs. The app also exports to SVG and WebM (via screen capture). It is published as an npm package for programmatic use, exposing `animateSvg`, `getBeginTimeList`, and export utilities. The codebase is modern (React 19, TypeScript, Vite) and includes comprehensive testing with Playwright. Architecturally, it operates as a client-side SPA with two views (edit and animate) and a toolbar for loading/playback/export.
LiveCanvas is a collaborative whiteboard and diagramming web application built with Next.js 14, Convex as the real-time backend, and Kinde for authentication. It allows users to create teams, manage files, and edit documents using Editor.js alongside an Excalidraw-based canvas for freeform drawing. The architecture follows a standard Next.js App Router pattern with client-side rendering for authenticated routes and server components for the landing page. Data flows through Convex mutations and queries, with file content (document JSON and whiteboard elements) persisted as strings. The application is functional but exhibits several minor issues: the dark mode CSS is incorrectly defined (identical to light mode), there are typos in mutation argument names ('archieved' instead of 'archived'), and the codebase lacks tests or CI/CD configuration. While it demonstrates integration of multiple third-party libraries, the components are tightly coupled to the app's specific data model and are not easily reusable outside this project.