# excalidraw-claymate and stop motion animation from a whiteboard tool > excalidraw-claymate is a TypeScript web application built on Excalidraw that turns a sequence of drawn scenes into an animated GIF or an HTML slide show, and it adds the scene management that Excalidraw itself does not have. The interesting constraint is that the tool runs entirely in the browser and stores scenes in local storage. **dai-shi/excalidraw-claymate** — A tool based on Excalidraw to create stop motion animations and slides. - Repository: https://github.com/dai-shi/excalidraw-claymate - Website: https://dai-shi.github.io/excalidraw-claymate/ - Stars: 572 · Forks: 45 - Language: TypeScript - License: MIT - Published: 2026-10-22 · Updated: 2026-10-22 · Language: en - Canonical page: https://hysenlabs.com/projects/dai-shi-excalidraw-claymate ## What the tool adds to Excalidraw The description is short: a tool based on Excalidraw to create stop motion animations and slides. The README makes the scope explicit in the How to use it section. If you are already familiar with Excalidraw, you visit the hosted application and you can do the same, meaning the drawing surface, the element types and the interaction model are Excalidraw's own rather than a reimplementation. The difference is stated in one sentence: the difference is in the footer, where you can add and edit scenes, reorder scenes, and export the scenes. Those three footer capabilities are the entire product. Excalidraw draws one canvas at a time and has no concept of a sequence of canvases, so a stop motion animation in Excalidraw alone means saving files by hand and reassembling them elsewhere. Claymate holds the scenes, lets you sequence them, and does the export. The exports are two. The first is an animated GIF, and the second is an HTML slide show, which comes in two forms: with animation, where the order and speed are configurable, and with video recording, with the instructions for that in a linked pull request. The audience is therefore narrow and specific: a person who wants to make a short looping animation or a slide deck out of hand-drawn frames and already works in Excalidraw's particular aesthetic. The rough, sketchy look is not an accident to be worked around, it is the reason to use Excalidraw at all. ## Scenes, ordering and the two hard limits The Notes section at the end of the README is where the real constraints live, and there are only two of them, but both matter. The first is that the scene size is limited to the size of the first scene. Every frame in the animation therefore has to fit inside the canvas dimensions of whichever scene you made first. That is a reasonable default for stop motion, where you want frames to align, but it is a hard ceiling: you cannot start small and then make one scene bigger, and if your first frame is a small drawing you are stuck with a small canvas for the rest of the piece. The second is that scenes are automatically saved to local storage. Local storage is what makes the tool feel like a single page application with no server. There is no account, no upload and no backend to fail, and the scenes survive a browser restart. The cost is that the work lives in one browser profile on one machine. It does not sync across devices, it does not appear in a shared folder, and clearing site data removes it. The Tweets section shows the author iterating over features such as importing files and image support, so import exists as a route in, but the persistence story remains browser-local. For a throwaway social animation that is fine. For a piece of work you care about, the sensible habit is to treat the browser as the editing surface and the export as the artifact you keep. The reorder capability deserves a note too, because it is what separates this from simply drawing frames. Stop motion is a timeline problem: the sequence of frames is the work. Being able to move a scene up or down in the footer list is the operation you perform dozens of times, and having it in the same view as the drawing is what makes the loop usable. ## How the build is set up The repository layout shows a modern Vite and React application with a fairly complete toolchain. The root has index.html, vite.config.ts, tsconfig.json and tsconfig.node.json, an eslint.config.js at the root for the flat config style of ESLint 9, a pnpm-workspace.yaml and pnpm-lock.yaml, an e2e/ directory, a public/ directory and src/. The package.json marks the package as private and of type module, and the scripts section defines the whole workflow: ```json "scripts": { "dev": "vite", "build": "vite build", "start": "vite preview", "fix:format": "prettier -w .", "test": "pnpm run '/^test:.*/'", "test:type": "tsc", "test:lint": "eslint .", "test:format": "prettier -c .", "test:spec": "vitest run", "e2e": "playwright test", ``` Three things stand out. The test script runs a regular expression match over the script names, so every script prefixed with test: is executed as part of one command, and adding a new check is a matter of adding a test: entry rather than editing the test command. The three checks are type checking through tsc, linting through eslint and formatting through prettier, and they are separate from the spec runner. The e2e scripts are Playwright based, with a CI variant restricted to the chromium project and a UI variant that opens the Playwright inspector. The formatting convention is set in package.json with prettier configured for single quotes, and the type checker, linter and formatter all run against the same tree, so a contributor can run one test command and get a full check. The dependency list shows what the tool is actually made of. The Excalidraw package itself is pinned exactly at 0.18.1, React and react-dom are at 18.3.1, and gif.js at 0.2.0 is the GIF encoder. lodash and nanoid handle utility work and identifiers, browser-fs-access provides the file system access API for the import and export paths, and svg-to-excalidraw at 0.0.2 is the bridge that turns an SVG into Excalidraw elements. ## Running it locally There is no installation step in the sense of a package to add to another project. This is a standalone web application, and the README's usage instructions point at the hosted site. For local development, the package.json scripts are the whole story. Vite serves the app in development, and the build script produces the static bundle that the GitHub Pages deployment at dai-shi.github.io serves. ```bash pnpm run dev ``` The scripts are named with the pnpm run convention, and the packageManager field pins pnpm at 11.3.0 with an integrity hash, so the toolchain version is fixed for everyone who clones the repository. The lockfile is committed, which together with the pinned package manager means the dependency tree is reproducible rather than whatever resolves on the day you install. The Playwright configuration is present at the root, and the e2e script needs a browser install, so a contributor running the end-to-end suite will need to fetch the Playwright browsers separately before those tests will pass. The unit and component side uses vitest with jsdom as the environment, and the React Testing Library packages along with jest-dom are in the dev dependencies for that purpose. The whole application is a static site. There is no server component in the dependency list, no database and no API key to configure, which is the same property that makes local storage the obvious persistence choice. ## How this differs from the author's other Excalidraw work The README lists three sibling projects, and the distinctions show a consistent approach to extending Excalidraw rather than replacing it. Excalidraw Animate, Excalidraw Gallery and Excalidraw Layers are the three. The Tweets section documents the path Claymate took to get there: a first trial version, then a version embedded in the app, then an example with a grid, then a new development using the Excalidraw package as a dependency, then export to HTML, then integration of excalidraw-animate, then configurable excalidraw-animate speed, then an excalidraw-animate pointer image, then an animation preview, then importing files, then image support, and finally updates for Excalidraw v0.12.0 and v0.15.2. Two of those entries describe Claymate delegating animation to a separate library. The integration with excalidraw-animate, and the configurable excalidraw-animate speed, mean the motion between frames is not implemented here. Claymate sequences and exports; excalidraw-animate handles the tweening. The pointer image entry adds the mouse pointer as a drawn element that moves between frames, which is the kind of detail that only matters in a stop motion tool and would be pointless in a general whiteboard. The alternative to all of this is to use Excalidraw alone and assemble frames outside it, or to use a dedicated animation tool and accept a different drawing experience. The difference in approach is that Claymate keeps you inside Excalidraw, in the browser, with no export and reimport cycle, and adds only the sequencing layer. The cost is that you inherit Excalidraw's element model and its interface, including its own conventions for how a drawing is structured, and you are limited by the first scene's dimensions. For someone whose reason for choosing Excalidraw is the aesthetic and the editing speed, that trade is usually worth making. ## State of the project and what to expect The repository is not archived, and the last push was on 2026-09-10. There are no GitHub releases, and the package.json carries version 1.0.0 with the package marked private, so it is not published to a registry. The application is served from a GitHub Pages address, dai-shi.github.io/excalidraw-claymate, which is the deployment the README points users to. The licence is MIT, with the LICENSE file at the repository root. That matters more than it usually would, because the tool is a thin layer over Excalidraw rather than a fork of it: the MIT licence covers the Claymate code, while Excalidraw itself is a separate project with its own licence and its own terms for the packages you embed. The absence of a release process is the practical upgrade consideration. There is no changelog and no tagged version to pin, so the live site tracks whatever was last deployed to the main branch. The pinned Excalidraw dependency at 0.18.1 is the only thing in the tree that tells you which upstream behaviour you are getting, and the Tweets list of Excalidraw version upgrades, v0.12.0 and v0.15.2, shows that tracking upstream releases is a recurring task rather than a one-off. If you need a stable, versioned tool for a repeatable production workflow, that is the gap to weigh. If you want to draw frames today and export a GIF today, the hosted application does that with no setup at all. ## Conclusion excalidraw-claymate is a good fit for someone who already draws in Excalidraw and wants a stop motion animation or a slide deck without learning a new editor, because the drawing experience is unchanged and the scene list in the footer adds the part Excalidraw lacks. It is a poor fit if you need a canvas larger than your first scene, since the README states the scene size is limited to the size of the first scene, and a poor fit if your work has to survive a browser profile reset, since scenes are saved to local storage rather than to a file. Before adopting, check the scene size constraint against your intended canvas, and note that the project is published with no GitHub releases and the package is marked private, so the live site at dai-shi.github.io is the way to use it. ## FAQ ### What is excalidraw-claymate? It is a tool based on Excalidraw to create stop motion animations and slides, published as a TypeScript web application. The drawing experience is Excalidraw's, with scene management, reordering and export added in the footer. ### What formats can excalidraw-claymate export? Scenes can be exported as an animated GIF, or as an HTML slide show, which can include animation with configurable order and speed, or video recording. The instructions for the video recording option are in pull request 46. ### Where are the scenes stored in excalidraw-claymate? Scenes are automatically saved to local storage in the browser. There is no server component or account system in the project, so the work lives in one browser profile rather than in a shared file. ### Is there a size limit on scenes in excalidraw-claymate? Yes. The README states that the scene size is limited to the size of the first scene, so every frame in an animation shares the canvas dimensions of whichever scene you created first. ### How do I run excalidraw-claymate locally? Clone the repository and use the pnpm scripts defined in package.json. `pnpm run dev` starts the Vite development server, `pnpm run build` produces the static bundle, and the test command runs the type, lint, format and spec checks together. ### What licence is excalidraw-claymate released under? MIT, with the LICENSE file at the repository root. The package.json marks the package as private, and there are no GitHub releases, so the application is used through the hosted site. ## Sources - [dai-shi/excalidraw-claymate on GitHub](https://github.com/dai-shi/excalidraw-claymate) - [Issues](https://github.com/dai-shi/excalidraw-claymate/issues) - [License: MIT](https://github.com/dai-shi/excalidraw-claymate/blob/main/LICENSE) - [Project website](https://dai-shi.github.io/excalidraw-claymate/) - [README](https://github.com/dai-shi/excalidraw-claymate/blob/main/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/dai-shi-excalidraw-claymate