Turn an HTML animation into a video

Paste the code or drop a file. It renders frame by frame in your browser, so nothing is uploaded. No account, no watermark, clips up to 2 minutes.

Or start from an example:

Getting the code from an AI?

Preview

Your animation plays here as soon as you paste it.

Keep this tab in front while it renders.

Download
Format
Aspect ratio
sec

Runs on your device. Your file is never uploaded.

Ask AI for export-ready HTML

Paste this after your request, or send it with the code you already have. This gives the result the best chance of rendering cleanly.

Three steps
  1. 1
    Paste
    Paste the HTML, or drop an .html or .zip file. The preview starts right away.
  2. 2
    Check
    Choose the aspect ratio for where the video will be used. The length is read from the animation, and you can change it.
  3. 3
    Export
    Choose MP4, GIF, transparent WebM or a PNG frame and download the file.
Ask AI for export-ready HTML
Paste this after your request, or send it with the code you already have. This gives the result the best chance of rendering cleanly.
Rewrite this animation as one self-contained HTML file that I can export to video with htmlto.video:
- Design it for a 16:9 frame. It must fill the browser window exactly (100vw by 100vh, no scrolling). Size everything in vw and vh so it scales to any resolution.
- It starts by itself when the page loads and needs no mouse, keyboard or scrolling.
- It has a fixed length. State the length in a comment on the first line, like <!-- duration: 8s -->.
- Animate with CSS animations, the Web Animations API, GSAP, or requestAnimationFrame using its timestamp argument. Do not use video, audio or iframes.
- Put all CSS and JavaScript inline. Embed images as inline SVG or data URLs. Fonts and libraries may only come from a CDN that allows cross-origin loading, such as Google Fonts, cdnjs or jsDelivr.
- Reply with the complete HTML in a single code block.
What it can render
  • CSS animations and transitions
  • GSAP, anime.js, Motion and other JavaScript libraries
  • Canvas 2D
  • SVG animated with CSS or JavaScript
  • WebGL and Three.js
  • The Web Animations API and requestAnimationFrame
What it cannot do yet
  • Safari, iPhone and iPad cannot export. The preview works there.
  • Videos, audio and iframes inside the page are left out.
  • Images and fonts from servers that block cross-origin reading will be missing.
  • Animations that wait for a click, hover or scroll will not advance.
  • SVG animated with SMIL tags such as <animate> is not captured.
  • Very heavy WebGL scenes can fail on slower computers.
Which format to pick
MP4
For social posts, slides and video editors. H.264 at 720p, 1080p or 4K, 24, 30 or 60 frames per second. Widely supported across social platforms, presentation apps and video editors.
GIF
For READMEs, docs, chat and email. Loops by itself and needs no player. Best kept short and small.
Transparent WebM
For overlays in an editor: titles, lower thirds, stickers. The page background stays see-through.
PNG frame
One still at the moment you choose. For thumbnails and covers.
The short version
htmlto.video is a free online tool that converts an HTML animation into a video file. It accepts pasted HTML, .html files and .zip archives, and exports MP4 (H.264, up to 4K at 60 fps), GIF, WebM with a transparent background, or a single PNG frame. Rendering happens frame by frame in your browser: the file is never uploaded, and the frame rate is exact regardless of how fast your computer is. There is no sign-up, no watermark and no fee. A clip can be up to 120 seconds long (30 seconds for GIF). It works in Chrome, Edge and Firefox on desktop and in Chrome on Android. Exporting is not supported in Safari or on iPhone and iPad, although previewing still works. It does not capture embedded videos, iframes, or images and fonts from servers that block cross-origin access.
Questions
How do I turn an HTML animation from ChatGPT or Claude into an MP4?
Copy the HTML the assistant wrote, paste it into the box at the top of this page, check the preview and press Export. The MP4 downloads when rendering finishes. For a 10-second animation that usually takes under a minute.
Is my file uploaded anywhere?
No. The page renders and encodes the video on your own device. Your HTML and the finished file never reach our servers.
Is it really free? Is there a watermark or a time limit?
It is free, with no watermark and no account. A clip can be up to 120 seconds long, or 30 seconds for a GIF.
Why is this better than recording my screen?
A screen recording drops frames when the computer is busy, shows the cursor and comes out at the size of your window. Here every frame is drawn separately at the exact size and frame rate you chose.
Why does it not work in Safari or on my iPhone?
Safari does not support the browser capabilities this exporter needs to capture rendered HTML frames. Open the same link in Chrome, Edge or Firefox on a computer.
An image or font is missing from my video. Why?
The file is hosted on a server that does not allow other websites to read it. Embed the image in the HTML as a data URL, or use a font host that allows it, such as Google Fonts.
How long does rendering take?
It depends on your computer and on the page. A typical 10-second clip at 1080p and 60 frames per second takes 20 to 40 seconds. 4K and heavy WebGL take longer.
Can I export a video with a transparent background?
Yes. Choose WebM (transparent) and leave the page background unset. The file keeps its alpha channel in editors that support WebM with alpha.