Fabric Video Editor is an open-source, MIT-licensed video editor that runs entirely in the browser — a timeline-based tool for text, image, video and audio layers with animations, filters and export with sound — built with Fabric.js, React, Next.js, MobX, Tailwind CSS and TypeScript, and aimed at developers who want editing capability inside a web application rather than in a desktop program.

What it is

Fabric Video Editor is a browser-based video editing application written in TypeScript. It is built on Fabric.js for canvas work, with Next.js as the React framework, MobX for state and Tailwind CSS for styling. It presents a timeline on which a user can add text, images, video and audio, change the canvas background colour, apply animations and filters, and export the resulting video with audio.

The problem it solves is the gap between a web product and a real editor. Anyone who needs users to arrange and export video inside an application otherwise either sends them out to desktop software or builds a timeline, a layer model, an animation and filter set, and an export pipeline from scratch. This project supplies those pieces already wired to a Fabric.js canvas, under an MIT licence, inside the JavaScript and TypeScript ecosystem as a standard Next.js application. It replaces the "install a desktop editor" step with a page in the browser.

Key capabilities

• Adding text, image, video and audio layers to a project.
• A timeline for arranging those layers over time.
• Changing the canvas background colour.
• Exporting video with audio.
• Applying animations to canvas content.
• Applying filters to canvas content.
• A Fabric.js canvas object model as the editing surface, with MobX state and Tailwind CSS styling around it.

Who uses it and how

• Developers who cloned the repository while deciding whether to build their own editing tools or buy them, which the README addresses directly.
• Teams embedding a timeline-based editing surface inside a React and Next.js product rather than shipping a separate application.
• Anyone evaluating the editor in the browser first, using the hosted instance at https://fabric-video-editor.vercel.app/ before running the source themselves.
• Self-hosters running the project locally on port 3000 with npm run dev, including the VSCode "Launch Chrome against localhost" debug configuration described in the README.
• The project comes from an author who builds canvas and video editing tools professionally, including timelines, design editors and 3D product configurators for client products.

Getting started

Clone the repository, run npm run dev, and open http://localhost:3000 in a browser. A hosted version is available at https://fabric-video-editor.vercel.app/, and the README notes that deploying the app on Vercel is currently failing because of that platform's 50MB function limit and the size of Node-Canvas.

How it compares

No list of paid products this project replaces is provided, and the facts name no comparable browser-based video editors, so Fabric Video Editor stands alone in this registry. The only other projects named are the libraries it is built from — Fabric.js, Next.js, React, MobX and Tailwind CSS — which are its dependencies rather than alternatives to it.

When to use it — and when not to

A self-hoster has to run a Node and Next.js application on their own machine or infrastructure, and the README records that a plain Vercel deployment fails because Node-Canvas exceeds the platform's 50MB function limit, so that path is not currently working. The README also lists known main issues — possible problems with audio handling, exported video lacking a time duration, and flickering in exported videos — and still marks a properties editing panel and video trimming as future features while the tech explanation remains a todo. Teams needing a finished editor with property editing and trimming today should look elsewhere, while developers willing to work in the source will find the layers, timeline, animations, filters and audio export already in place.

npm run dev

npm run dev