# LeClap [Health: Active] **Category:** πŸŽ₯ Multimedia Process **Repository:** https://github.com/heristop/leclap **GitHub Stars:** 34 **npm Downloads (last month):** 613 **Views:** 2 **Installs:** 0 **Upvotes:** 0 **Directory Page:** https://allmcps.com/mcp/leclap ## Description Compose and render video from one JSON template. Deterministic, runs locally, no generative model. ## Claude Desktop Quick Installation Install path detected from listing signals. Uses `npx` (confidence: high): ```json "mcpServers": { "leclap": { "command": "npx", "args": ["-y","@leclap/cli"] } } ``` ## Documentation & README
Clappy, the LeClap mascot # LeClap **Your video from one JSON template: camera, effects, music, transitions, rendered on the device. No server, no upload.** [![CI](https://github.com/heristop/leclap/actions/workflows/ci.yml/badge.svg)](https://github.com/heristop/leclap/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/ffmpeg-video-composer.svg?label=ffmpeg-video-composer)](https://www.npmjs.com/package/ffmpeg-video-composer) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) [![Trademark: LeClap](https://img.shields.io/badge/β„’-LeClap-blue.svg)](TRADEMARK.md) [Try it](#-try-it-in-30-seconds) Β· [Examples](#-template-in-video-out) Β· [Comparison](#-why-leclap) Β· [Docs](https://leclap.dev/doc) Β· [Showcase](https://leclap.dev/showcase)
## πŸŽ₯ Demo The LeClap showcase film: play it on leclap.dev Click the frame: the film plays on [leclap.dev](https://leclap.dev/#film), with captions. ## ⏱ Try it in 30 seconds Node 24.11 or later. FFmpeg is optional: the CLI brings `ffmpeg-static` along and uses it when there is no `ffmpeg` on your PATH. ```bash npx @leclap/cli init hello --no-remotion --no-mcp cd hello && npm install && npm run render ``` That writes `build/output.mp4`: three seconds of "Hello, LeClap" on a navy card, from the `template.json` next to it. Edit the JSON, render again. If the title is missing, the `ffmpeg` on your PATH was built without `drawtext` (Homebrew's current build is one). `npx leclap diagnose` lists what your FFmpeg can and can't do. Rather not install anything? [Open the same template in the web builder](https://leclap.dev/studio/builder#t=v1.RZBBi9VAEIT_StNeFMaoKwjGm6ugKB4ET7IsnZlKMuy8njAzSfb5yH-XSZ5rHz-6q6rrwicU4fbCNkGKX_DJJ9jio3LLX7Wk6GYLigrqkqij1ZeRhBJySeIVzpCFFiQ4Kr6EuktCTtIDqSxnsqKL5IZ-ZdA6-gKyUR0014PzBEMDFCnOmRTDnoHyJBZU7aqTOOkCqPcqgcYYXEPfgIlOseakLnn0-_I0pylm9HP4QLJE78jG04TidaAR4oJXZIqJHGxMhxX6Hrbkhn5i8VipjKCMUsLTP1W5UqjzOjS8GR5C7CTU2mLy0CLXwoKoy1YmsOHTnL39rDW647aXkLEZzke5mdvfF1Y5gVvebdhwbYNbtjHEdN-JfRhSnNWx4Thdjy78n9_WPW752Wv3prsRNuzmdE3ydjPc-1CQDqertEuyFjwWNrxImLEr7qC9MOoHXxBCNPQdt0Gm-moftdh_Tv0-fNDs_4Db9-8MP3LLz9eXVeh-ffHqhg2fKxoPNB6o3vQ-1Bwf0Un-gRlNKT1v2912t_0F), where it renders in the tab through WebAssembly. The template travels in the URL fragment, which browsers don't send to servers. `leclap studio template.json` prints that link for any template. ## 🎞 Template in, video out Three templates from this repo and what they render to. Click a frame to play the render. | Template | Render | What it shows | | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | | [`footage-edit.json`](https://github.com/heristop/leclap/blob/HEAD/examples/motion-design/footage-edit.json)
4 KB of JSON | Footage edit render | Five recorded clips, five edits: a portrait clip over its own blur, a keyframed pan under a LUT, a speed ramp, a freeze frame, a B-roll cutaway. | | [`before-after.json`](https://github.com/heristop/leclap/blob/HEAD/examples/agentic-pr-video/before-after.json)
a PR review clip | Before/after PR evidence render | The video an agent attaches to a pull request: the change named, the old behaviour, a wipe to the new one, what to check. | | [`effects-tour.json`](https://github.com/heristop/leclap/blob/HEAD/examples/motion-design/effects-tour.json)
ten chapters, one template | The effects tour render | Seven minutes of kinetic type, camera moves, transitions, captions, light effects, looks, footage edits, sound and music. | All 59 samples, with their templates, are on the [showcase](https://leclap.dev/showcase). Each effect, one frame at a time, in the [gallery](https://github.com/heristop/leclap/blob/HEAD/docs/gallery.md). ## πŸ€” Why LeClap? Four ways to get a video out of JavaScript, and when each one is the right call. Claims about the others come from their own docs; a "β€”" means their docs don't say. The [full comparison](https://github.com/heristop/leclap/blob/HEAD/docs/comparison.md) has the sources and the caveats, ours first. | | **LeClap** | Remotion | editly | fluent-ffmpeg | | ----------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------- | | What it is | A JSON template compiled to FFmpeg | Videos written as React components | Declarative editing, as a CLI and a Node API | A chainable Node API over the `ffmpeg` CLI | | You write | JSON, validated against a schema | React (TypeScript) | A JSON5 spec or CLI flags | Chained method calls | | Node | βœ… | βœ… also Lambda and Vercel | βœ… needs `ffmpeg`, `ffprobe`, headless GL | βœ… needs `ffmpeg`, `ffprobe` | | Browser | βœ… WebAssembly | βœ… WebCodecs, since 4.0.491 | β€” | β€” | | React Native, on-device | βœ… FFmpeg linked into the app | β€” | β€” | β€” | | Same input, same output | βœ… per platformΒΉ | βœ… if animations derive from the frame number | β€” | β€” | | Agent tooling | βœ… `@leclap/mcp`: schema, validate, render | βœ… a system prompt for LLMs writing React | β€” | β€” | | Licence | MIT | Free for individuals, non-profits and for-profit companies up to 3 employees; paid above | MIT | MIT, archived in May 2025 | | Pick it when | The render happens in an app, or a program writes the video | You think in components, render on servers, or want the ecosystem | You want a slideshow from the terminal | You already use it; its README says it's unmaintained | ΒΉ Per platform, not across them: Node and the browser encode with libx264, Android with `libopenh264`, iOS with `h264_videotoolbox`, and the on-device build drops `boxblur` and rewrites `eq` to `lutyuv`. Same composition, different pixels. Remotion wins more of this than a comparison table usually admits: [LeClap vs Remotion](https://leclap.dev/compare/remotion) spells out where. ## πŸ“¦ Packages | Package | One line | | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | [`ffmpeg-video-composer`](https://github.com/heristop/leclap/blob/HEAD/packages/ffmpeg-video-composer) | The engine: `compile()` a JSON template on Node, in the browser or in React Native. | | [`@leclap/cli`](https://github.com/heristop/leclap/blob/HEAD/packages/leclap-cli) | The `leclap` command: `init`, `render`, `validate`, `snapshot`, `verify`, `studio`, `diagnose`. | | [`@leclap/mcp`](https://github.com/heristop/leclap/blob/HEAD/packages/leclap-mcp) | The engine as tools an agent can call: read the schema, validate a template, render it. | The rest of the monorepo is private: the [creative kit](https://github.com/heristop/leclap/blob/HEAD/packages/leclap-creative-kit) (templates, fonts, media), the [web builder](https://github.com/heristop/leclap/blob/HEAD/apps/leclap-web) (React, FFmpeg in WebAssembly), the [Expo app](https://github.com/heristop/leclap/blob/HEAD/apps/leclap-expo) (camera to render, on the phone) and the [Rust engine](https://github.com/heristop/leclap/blob/HEAD/packages/ffmpeg-engine) that links FFmpeg into it. Working on the repo itself: [CONTRIBUTING.md](https://github.com/heristop/leclap/blob/HEAD/CONTRIBUTING.md) and [AGENTS.md](https://github.com/heristop/leclap/blob/HEAD/AGENTS.md). ## πŸ“š Read next - **[Descriptor reference](https://leclap.dev/doc)**: every section, transition, look, caption and filter, one page per topic. - **[Template configuration](https://github.com/heristop/leclap/blob/HEAD/docs/template-configuration.md)** and **[effects](https://github.com/heristop/leclap/blob/HEAD/docs/effects-configuration.md)**: the same reference, in the repo. - **[Engine configuration](https://github.com/heristop/leclap/blob/HEAD/docs/engine-configuration.md)**: `ProjectConfig`, environment variables, encoders. - **[Architecture](https://github.com/heristop/leclap/blob/HEAD/docs/architecture.md)** and **[on-device compilation](https://github.com/heristop/leclap/blob/HEAD/docs/on-device-compilation.md)**: how one core runs on three FFmpeg builds. - **[One descriptor, three FFmpeg builds](https://heristop.github.io/blog/2026-08-17-one-descriptor-three-ffmpeg-builds/)**: the long version, on the blog. - **[Agent-made PR videos](https://github.com/heristop/leclap/blob/HEAD/examples/agentic-pr-video)** and **[browser agents in the builder](https://github.com/heristop/leclap/blob/HEAD/docs/webmcp.md)**. - **[Showcase](https://leclap.dev/showcase)**: 50 templates with their renders. ## 🀝 Contributing & licence Issues and PRs welcome: start with [CONTRIBUTING.md](https://github.com/heristop/leclap/blob/HEAD/CONTRIBUTING.md). The code is [MIT](https://github.com/heristop/leclap/blob/HEAD/LICENSE). The **LeClap** name and logo are trademarks of Alexandre MogΓ¨re. Fork and reuse the code freely, but give your fork a different name and don't imply endorsement. See [TRADEMARK.md](https://github.com/heristop/leclap/blob/HEAD/TRADEMARK.md).