/a-react-video-editor

Free video editor built using Next.js & Remotion. This project serves as a foundation for video editing capabilities and is a simplified version of the full-featured https://www.reactvideoeditor.com.

Primary LanguageTypeScriptMIT LicenseMIT

React Video Editor (Open Source Edition)

A free, open-source basic video editor example that runs directly in your web browser. This project serves as a foundation for video editing capabilities and is a simplified version of the full-featured React Video Editor.

Built with:

  • Next.js - React framework for server-side rendering and static site generation
  • Tailwind CSS - Utility-first CSS framework
  • Remotion - Framework for programmatically creating videos
  • React - JavaScript library for building user interfaces

Demo

Try out the live demo: React Video Editor (Open Source Edition)

About the Project

This React Video Editor serves as a foundational tool for understanding and interacting with the core building blocks of Remotion. It offers a user-friendly, browser-based interface that allows users to compose videos by arranging clips and adding text overlays seamlessly. While the current version provides a smooth and interactive experience, it's designed to be a stepping stone toward building a fully-fledged video editor

Key features include:

  • Arranging video clips on a timeline
  • Adding static text overlays to videos
  • Real-time preview of composition

While this open-source version provides basic video composition functionality, it does not include advanced editing features. For a more comprehensive video editing solution, check out the pro version which offers additional capabilities and integration options for React applications.

Important Note: This project uses the Remotion video player. If you intend to use this project, please be aware that you may need a Remotion license depending on your use case. Check out the Remotion Licensing page for more information and ensure you comply with their licensing terms.

Getting Started

To get started with this project, follow these steps:

  1. Clone the repository to your local machine.

  2. Install the dependencies:

npm install
  1. Run the development server:
npm run dev
  1. Open http://localhost:3000 in your browser to see the video editor in action.

You can start editing the project by modifying the files in the app directory. The page will auto-update as you make changes.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.