Turn HTML, CSS & data into MP4s with html-video. For startup founders, with 1.5k+ GitHub stars.
intermediateโฑ 30 minutes๐ต Free
3,838 stars481 forksHTMLQuality 8/10Updated 6/21/2026100% free ยท open source
What it is
Use this skill to automatically turn HTML into real MP4 videos on your laptop.
What you can make with it
Automate videos like a tech conference intro video, turning your company website into a short animation.
How it helps
Save time by automating tedious video production and experimenting with different styles with the 21 included templates.
Real use case example
"A solo developer is creating a tutorial series about HTML development. She uses this skill to quickly create an animated intro video for each episode, using her company website's HTML code. In three steps: she sets up the render engine, configures the template, and exports the video."
If you're new
Pick this up when you need automated video production and are starting with basic HTML and CSS knowledge.
If you're senior
A senior developer would choose this when needing to automate high-quality video creation for multiple platforms and templates.
Common confusion cleared up
This skill doesn't require any prior video editing experience, just basic HTML and CSS knowledge.
Best inside these AI tools
Claude DesktopClaude Code
Pairs with
Stripe webhookNotion databaseCursor
Why we list it on WorkflowStacks: This marketplace includes nexu-io's skill as a free and open-source option for automated video creation.
What it does
Html-video turns HTML, CSS, and data into MP4 videos with customizable templates and AI-generated soundtracks.
Install / run
npm install @html-video/core
When to use it
โขCreating explainer videos for products or services with dynamic data
โขGenerating video reports from data analytics
โขProducing social media videos with programmatically generated visuals
Quick start
1Create a new HTML file (e.g., index.html) with your video content
2Run 'npx @html-video/core index.html' to generate an MP4 video
3Customize the video with one of the 21 available templates by adding a template option (e.g., 'npx @html-video/core index.html --template=default')
4Add an AI-generated soundtrack by including the 'soundtrack' option (e.g., 'npx @html-video/core index.html --template=default --soundtrack')
5Experiment with different render engines by specifying the engine option (e.g., 'npx @html-video/core index.html --template=default --soundtrack --engine=puppeteer')
Heads up: Ensure you have the necessary dependencies installed, including Node.js and the @html-video/core package, and be aware that some features may require additional setup, such as configuring the render engine or soundtrack options.
Saves to your device
Topics
ai-agent
apache-2
coding-agent
css
ffmpeg
html
html-to-video
hyperframes
mp4
open-design
open-source
programmatic-video
video
video-as-code
video-generation
What's inside โ free to inspect
No purchase needed
Read the entire source before you build โ unlike paid marketplaces that hide it behind a buy button.