How to record a CodePen as a video

What the video shows

Every form of a Pen’s address works: the editor, the full page view, the details page, an embed and the full page on cdpn.io. RecordHTML records the Pen through CodePen’s embed view and crops the embed’s bars away, so the video holds the result and nothing else. The Pen fills the size you choose, the way it fills a browser window.

CodePen does have views with no frame at all, Debug View and live previews, but other people can only open them when the Pen’s owner has CodePen PRO. The embed is the view CodePen gives every visitor, so it works for any public Pen. To show the code next to the result, choose Record the whole page on the record form, and the video shows CodePen’s page as a visitor sees it.

1. Paste the link on the record page

Copy the Pen’s address and paste it into URL on the record page. The form recognises CodePen at once and says it will record only the Pen. Then choose the size of the video: 1080×1920 for a vertical story, 1080×1080 for a square post, 1920×1080 for a landscape video, or the banner size an ad needs.

The form at the top of this guide is the same start: paste the address, create an account or sign in, and the record page opens with the Pen filled in.

2. Put recordhtml.com/ in front of the address

On the Pen’s page, click into the address bar just after https://, type recordhtml.com/ and press Enter. The address now reads https://recordhtml.com/codepen.io/jane/pen/abcDE, and it opens the record page with that Pen. If you don’t have an account yet, you create one first and the Pen comes along.

You can also paste a whole address after the slash, https:// included, and then it works for any page, not only Pens: recordhtml.com/https://example.com/animation.html. The short form without https:// is for CodePen addresses.

3. Click a bookmarklet on any Pen

A bookmarklet is a bookmark that runs one line of JavaScript instead of opening a fixed page. Drag the button below to your bookmarks bar. Then, on any Pen or any other page you want to record, click it in the bar: it opens the page you are on in RecordHTML, exactly as typing the address in front would.

It reads nothing from the page except its address, and it changes nothing on it. Most browsers show or hide the bookmarks bar with Ctrl+Shift+B, or Cmd+Shift+B on a Mac. On a phone, typing the address in front is the quicker way.

Settings that suit Pens

Length: for a Pen that loops, record one or two full cycles; for one that plays once, stop a second or two after its last frame. The GSAP and CSS recording guide explains how browser recording handles timing, and how trim_start() and trim_end() mark the part to keep when you can edit the Pen.

Sound and buttons: Record audio is on by default, so a Pen that plays sound keeps it in MP4 and WebM; a GIF is always silent. A Pen that waits for a click before it moves can have that click made for it: tick Click a Play button before recording under Timing and enter the button’s text.

Heavy Pens: WebGL scenes and full screen canvases ask a lot of the browser. With Renderer on Auto, a recording starts on the CPU and moves to the GPU when the page can’t draw fast enough; choose GPU yourself for a Pen you know is heavy. For an animated GIF, the HTML to GIF page covers frame rates and loops.

Which Pens work, and crediting their authors

The recorder opens a Pen the way a visitor who isn’t signed in would. Public Pens work. Password protected and collaborators only Pens ask for a password or a sign in first, and the recorder can provide neither, so the video would show that screen. A Pen that loads images or libraries from other sites needs those sites to answer the recorder too.

CodePen licenses public Pens under MIT by default. Whatever the license, credit the author when you post a video of their Pen: name them and link the Pen. Authors are often the first to share a good video of their own work.