HTML in. Video out.
Built for agents.
The first video tool where the CLI, the HTML format, and the MCP server are equal citizens. Write HTML. Render video. Let Claude Code build the rest.
npx devmotion init my-demo
cd my-demo
# Edit scenes/intro.html — it's just HTML
devmotion preview # Open Studio
devmotion render # Export MP4From terminal to MP4 in three steps
No GUI required. No proprietary format. Just HTML, CLI, and an open render pipeline.
1. Scaffold
npx devmotion init creates a project
folder with HTML scenes, a config, and an assets directory.
2. Edit
Add data-dm-* attributes to any
HTML element. Use dm-* custom elements
for premium layers. Edit in any editor — or let an agent do it.
3. Render
devmotion render produces MP4 via
headless Chromium + ffmpeg. Same pipeline works locally, in CI, or on servers.
<div data-dm-id="title"
data-dm-enter="fade-in"
data-dm-enter-time="0.5"
data-dm-duration="0.8"
data-dm-easing="ease-out"
style="color: white; font-size: 48px;">
Hello DevMotion
</div>
<dm-phone data-dm-id="demo"
data-dm-enter="slide-in-right"
data-dm-enter-time="1.5"
src="./assets/screen.mp4">
</dm-phone>One Project, Every Platform
Export for YouTube, Instagram, TikTok. Switch formats instantly.
Video as code, finally
The CLI, the HTML format, and the render pipeline are all open source. Edit in VS Code. Version in Git. Render in CI.
CLI-first workflow
Scaffold, preview, and render from the terminal. `devmotion init`, `devmotion preview`, `devmotion render`. No GUI required.
HTML as source of truth
Every project is HTML files. Layers are elements with `data-dm-*` attributes. Version control, diff, and edit in any editor.
Svelte 5 runtime
The renderer runs Svelte 5 components with runes. If you know Svelte, you can extend every layer type. Open source (Apache 2.0).
Git-friendly
Projects are folders of HTML + JSON. Branch, merge, review. No binary blobs. CI/CD pipelines that generate video from PRs.
AI agents can write video
MCP server, Claude Code skills, and an LLM-friendly HTML protocol. Agents scaffold, edit, and render — autonomously.
MCP Server (stdio + HTTP)
Claude Code, Cursor, Windsurf — any MCP client can create, edit, and render video. Full tool surface: layers, keyframes, presets, export.
Claude Code skills
Slash commands: `/devmotion-init`, `/devmotion-add-layer`, `/devmotion-render`. One `devmotion setup` and agents know the entire protocol.
Agent-first protocol
The `data-dm-*` attribute vocabulary is designed for LLMs: predictable, flat, attribute-based. No JSX, no imperative API calls.
Headless rendering
Playwright + ffmpeg pipeline, virtualized clock for deterministic frame capture. Render on servers, in CI, or from agent workflows.
A visual editor when you want it
Timeline, keyframes, 17+ layer types, and AI-powered tools. The Studio is there when code isn't the right tool.
Visual Studio
Timeline, keyframe editor, 17+ layer types. Full visual control when you need it.
Auto Captions
AI transcription with word-level timing. Animated, styled, synced automatically.
AI Dubbing
Voice cloning into any language. Same voice, same tone, global reach.
AutoCut
AI removes silences, filler words, dead air. Hours of editing in one click.
How we compare
Honest comparison. Each tool wins somewhere — here's where DevMotion fits.
| Approach | Renderer | Agent-native | Git-friendly | License | Pricing | |
|---|---|---|---|---|---|---|
| DevMotion you | HTML + CLI | Svelte 5 (headless) | ✓ | ✓ | Apache 2.0 | Free local / Cloud Pro |
| Remotion | React + code | Chromium tab | — | ✓ | Source available | Free / $270+/seat |
| Hyperframes | HTML + CLI | Svelte 5 (headless) | ✓ | ✓ | Apache 2.0 | Free / Cloud Pro |
| Jitter | GUI editor | Cloud only | — | — | Proprietary | Free / $19/mo |
Hyperframes is the closest analog — we share the HTML + CLI + Svelte philosophy. Remotion pioneered code-driven video. Jitter is best for purely visual workflows.
Hours of editing, done in seconds
AI handles the tedious parts so you can focus on the creative ones.
Auto Captions
Upload a video, get perfectly synced captions in seconds. AI transcription with word-level timing. Style and animate them however you want.
AI Dubbing
Translate your video into any language with AI voice cloning. Same voice, different language. Reach a global audience instantly.
AutoCut
AI detects and removes silences, filler words, and dead air from your recordings. Hours of editing done in one click.
AI Video Generator
Type a prompt and watch a video appear. Seedance 2.0 generates cinematic footage with synchronized audio — drop it straight into your timeline.
Generate video at scale
Design templates visually or in HTML, then generate thousands of personalized videos via REST API. Webhook callbacks when renders are ready.
curl -X POST https://devmotion.app/api/v1/renders \
-H "Authorization: Bearer dm_live_..." \
-H "Content-Type: application/json" \
-d '{
"template_id": "laptop-3d-intro",
"modifications": [
{ "layer": "Browser",
"property": "url",
"value": "https://yoursite.com" }
],
"webhook_url": "https://you.com/callback"
}'What people are saying
We're just getting started — and your spot is open.
"The MCP server implementation is pure genius. I can just tell Claude to 'fix the typo in the lower third' and it actually does it."
Marcus V.
Senior Developer
"Finally a video tool that treats HTML as a first-class format. My team version-controls our product demos alongside the codebase."
Alex Rivers
DevRel Lead
"I used to spend 6 hours on subtitles for my dev tutorials. DevMotion does it in 30 seconds and the styling actually looks good."
Sarah Chen
Content Creator
Frequently Asked Questions
What is DevMotion?
How is this different from Remotion or Jitter?
Is it free?
How do I connect Claude Code or Cursor?
What can agents actually build?
Do I need to know Svelte?
Can I render on my own servers?
What export formats and resolutions?
Ready to build video with code?
Free local CLI. Open source runtime. Agent-native MCP. Start with one command.
npx devmotion init my-first-video
