Openvid: How to Record and Edit Screen Demos in Your Browser

By Shah Rukh, software developer · October 2, 2026 · 8 min read

Openvid is a screen recorder and video editor that runs inside your web browser. You record your screen or upload a video, add zooms, device frames and a background, and export a finished demo. This guide explains what it does, how to use it, how to run your own copy on Windows and Mac, and what to check before you start.

Read this first. Openvid is free to use, but its licence is PolyForm Noncommercial 1.0.0. That licence only allows noncommercial use of the code, so it is not “open source” in the usual sense. Most people do not need to install anything: the project runs a hosted version at openvid.dev. Running your own copy is a developer setup that needs Node.js, pnpm and a free Supabase project. It is an independent project, and it has no connection to the video tools it is often compared with.

What Openvid is

Many product demos you see online have smooth zooms, a phone or laptop frame around the screen, and a colourful background. Openvid is built to make that kind of video without a desktop editor. The README describes it as a way to “create professional demos and mockups in seconds, directly in your browser”.

The editing is done by FFmpeg.wasm, a version of the FFmpeg video tool that runs inside the browser tab. The project’s privacy text says videos are processed in your browser and are not uploaded to its servers.

Export sizes listed in the README are 480p at 24fps, and 720p, 1080p, 2K and 4K at 30fps.

What you need

To use the hosted version:

• A desktop browser. The project’s own FAQ names Chrome, Edge and Firefox, and says it works on Windows, Mac and Linux.
• No account for the editor. The FAQ says you can edit and export without signing up and without a watermark. Sign-in with Google, GitHub or Twitch exists for some features.
• A reasonably capable computer. All rendering happens on your own machine, so long or 4K videos will be slow on a weak laptop. The repository gives no minimum hardware.

To run your own copy:

• Git, to download the code.
• Node.js, the program that runs JavaScript outside a browser. The repository does not state a minimum version. The app is built on Next.js 16.
• pnpm, a package installer for Node.js. The project file pins [email protected].
• A free Supabase project. Supabase is the service the app uses for sign-in. The README tells you to add your Supabase credentials.
• Optional keys for Unsplash, Pexels and Pixabay if you want the stock photo search for backgrounds.

The repository lists no price for anything. Each outside service has its own free limits and terms.

Precautions before you start

1. Check the licence against your plans. PolyForm Noncommercial allows personal, hobby, study, charity and education use. It does not grant commercial use of the software. If you want to host it for a company or build a paid product on it, ask the author first. The repository does not separately explain how the licence applies to videos made on the hosted site, so ask if that matters to you.
2. Know what stays local and what does not. Video processing is local. But the code shows a few things that do go to a server: sign-in goes through Supabase, the stock photo search goes through the site to Unsplash, Pexels or Pixabay, and when your browser cannot create AVIF or WebP images itself, the exported image is sent to the site’s /api/export-image route to be converted. The privacy text also mentions usage analytics.
3. Your recordings live in the browser. The README says recorded videos are kept in IndexedDB and settings in LocalStorage. Both are storage inside your browser. Clearing site data, or using a private window, can delete them. Export anything you want to keep. Cloud backup is marked “coming soon”.
4. Look at what is on screen. Close chats, email, banking tabs and password managers before you record. Share one tab or one window instead of the whole screen.
5. Only record what you may share. Do not record other people’s videos, paid courses, private calls or client screens without permission. The project’s terms also ask users not to upload copyright-infringing content. Stock photos keep the terms of the site they come from.
6. Keep your keys private. If you self-host, your keys sit in a file named .env. The project’s .gitignore already keeps it out of Git. Never commit or share that file.

How to use Openvid in your browser

1. Open openvid.dev in a desktop browser and open the editor.
2. Choose to record your screen, or upload a video file.
3. If you record, the browser asks what to share. The app’s own instructions recommend a Tab or a specific window for cleaner results.
4. The browser shows a floating “sharing” bar. Click Hide so it does not appear in your video.
5. After you allow sharing there is a 3-second countdown, then recording starts.
6. Stop the recording. It opens in the editor timeline.
7. Pick a background, add a mockup frame, and add zooms at the moments you want to highlight.
8. Export, choosing a format and a quality.

You can also turn on your camera and microphone in the recording setup, which shows your face in a small bubble on the video. The browser will ask for permission first.

How to install Openvid on Windows

The README gives one short set of commands for all systems. It has no separate Windows instructions, and it does not explain how to install Node.js, pnpm or Git. Install those first from their official websites.

1. Click Start, type PowerShell and open it.
2. Download the code and go into the folder:

   git clone https://github.com/CristianOlivera1/openvid
   cd openvid

3. Install the packages the app depends on:

   pnpm install

4. Create your settings file from the example:

   cp .env.example .env

5. Open .env in a text editor and fill in your values (see the table below).
6. Start the app:

   pnpm dev

7. Open http://localhost:3000 in your browser.

Use PowerShell for these steps. The cp command is not available in the old Command Prompt.

How to install Openvid on Mac

1. Press Cmd + Space, type Terminal and press Enter.
2. Run the same commands, one block at a time:

   git clone https://github.com/CristianOlivera1/openvid
   cd openvid
   pnpm install
   cp .env.example .env

3. Edit .env, then start the app:

   pnpm dev

4. Open http://localhost:3000.

pnpm dev starts a development server, which is meant for testing on your own computer. Keep the terminal open while you use it. The project file also has pnpm build and pnpm start scripts, but the README does not document a production setup.

Settings in the .env file

These names come from the project’s .env.example file. Every value there is a placeholder that you replace with your own.

In the code, a photo provider with no key is simply skipped, so the photo keys are optional. The Supabase values matter more: the sign-in code stops with a “Missing Supabase environment variables” error if they are empty. At the time of writing, a setting in app/config/editor.ts lets the editor open without sign-in, and the code comment calls this temporary.

Useful features to try

• Transparent export. WebM (VP9) supports a transparent background, which is handy if you want to place the demo over another video.
• GIF export. Good for a short clip in a README or a chat message.
• Image mockups. You can apply mockups to a still image and export it as PNG, WEBP, JPG or AVIF.
• Language. The interface comes in English, Spanish, Russian and Korean.

Update and uninstall

The project does not document an update or uninstall step. The hosted version needs neither. A self-hosted copy is a normal Git folder, so nothing is installed system-wide by the commands above. To free the recordings stored by the hosted site, clear the site data for openvid.dev in your browser settings, after exporting anything you want to keep.

Common problems

For anything else, the README points to the project’s Discord community, and you can open an issue on GitHub.

This guide is based on the project’s repository as it was on October 2, 2026. The latest change we saw was dated September 27, 2026. The project changes often, so if a step looks different, follow the README at github.com/CristianOlivera1/openvid. ToolsCloset is not connected to the project.

More AI tips

Related tools