https://github.com/redotvideo/revideo

Skip to content

Navigation Menu

Toggle navigation
 
Sign in

  * Product
      +  
        Actions
        Automate any workflow
      +  
        Packages
        Host and manage packages
      +  
        Security
        Find and fix vulnerabilities
      +  
        Codespaces
        Instant dev environments
      +  
        GitHub Copilot
        Write better code with AI
      +  
        Code review
        Manage code changes
      +  
        Issues
        Plan and track work
      +  
        Discussions
        Collaborate outside of code
    Explore
      + All features
      + Documentation
      + GitHub Skills
      + Blog
  * Solutions
    For
      + Enterprise
      + Teams
      + Startups
      + Education
    By Solution
      + CI/CD & Automation
      + DevOps
      + DevSecOps
    Resources
      + Learning Pathways
      + White papers, Ebooks, Webinars
      + Customer Stories
      + Partners
  * Open Source
      +  
        GitHub Sponsors
        Fund open source developers
      +  
        The ReadME Project
        GitHub community articles
    Repositories
      + Topics
      + Trending
      + Collections
  * Enterprise
      +  
        Enterprise platform
        AI-powered developer platform
    Available add-ons
      +  
        Advanced Security
        Enterprise-grade security features
      +  
        GitHub Copilot
        Enterprise-grade AI features
      +  
        Premium Support
        Enterprise-grade 24/7 support
  * Pricing

Search or jump to...

Search code, repositories, users, issues, pull requests...

Search
[                    ]
Clear

Search syntax tips

Provide feedback

We read every piece of feedback, and take your input very seriously.

[                    ] [ ] Include my email address so I can be
contacted
Cancel Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Name [                    ] 
Query [                    ]

To see all available qualifiers, see our documentation.

Cancel Create saved search
Sign in
Sign up
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session. You switched accounts on another tab or window. Reload
to refresh your session. Dismiss alert
{{ message }}
redotvideo / revideo Public

  * Notifications You must be signed in to change notification
    settings
  * Fork 17
  * Star 502
  * 

Create Videos with Code

re.video

License

MIT license
502 stars 17 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

  * Code
  * Issues 5
  * Pull requests 2
  * Actions
  * Projects 0
  * Security
  * Insights

Additional navigation options

  * Code
  * Issues
  * Pull requests
  * Actions
  * Projects
  * Security
  * Insights

redotvideo/revideo

This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
 main
BranchesTags
  
Go to file
Code

Folders and files

        Name                  Name          Last commit   Last commit
                                              message        date
Latest commit

 

History

988 Commits
 
.github/workflows     .github/workflows                    

.husky                .husky                               

packages              packages                             

.eslintrc.json        .eslintrc.json                       

.gitignore            .gitignore                           

.gitmodules           .gitmodules                          

.npmrc                .npmrc                               

.prettierignore       .prettierignore                      

.prettierrc           .prettierrc                          

CHANGELOG.md          CHANGELOG.md                         

CODE_OF_CONDUCT.md    CODE_OF_CONDUCT.md                   

LICENSE               LICENSE                              

README.md             README.md                            

SECURITY.md           SECURITY.md                          

commitlint.config.js  commitlint.config.js                 

lerna.json            lerna.json                           

logo.svg              logo.svg                             

logo_dark.svg         logo_dark.svg                        

nx.json               nx.json                              

package-lock.json     package-lock.json                    

package.json          package.json                         

tsdoc.json            tsdoc.json                           

View all files

Repository files navigation

  * README
  * Code of conduct
  * MIT license
  * Security


                            Revideo logo

  published with lerna powered by vite npm package version discord


Revideo - Create Videos with Code

 

Revideo is an open source framework for programmatic video editing.
It is forked from the amazing Motion Canvas editor, with the goal of
turning it from a standalone application into a library that
developers can use to build entire video editing apps.

Revideo lets you create video templates in Typescript and deploy an
API endpoint to render them with dynamic inputs. It also provides a
React player component to preview changes in the browser in
real-time. If you want to learn more, you can check out our docs, our
examples repository, and join our Discord server.

News 

 

  * [05/21/2024] We released an example on how to parallelize
    rendering jobs with Google Cloud Functions
  * [05/20/2024] We have a new website!


Getting Started

 

To create an example project, run the following command:

npm init @revideo@latest

The example project will have the following code, which defines the
video shown below.

import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  const logoRef = createRef<Img>();

  yield view.add(
    <>
      <Video
        src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
        size={['100%', '100%']}
        play={true}
      />
      <Audio
        src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
        play={true}
        time={17.0}
      />
    </>,
  );

  yield* waitFor(1);

  view.add(
    <Img
      width={'1%'}
      ref={logoRef}
      src={
        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
      }
    />,
  );

  yield* chain(
    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
    logoRef().scale(60, 1),
  );
});

revideo-example.mp4

Differences between Revideo and Motion Canvas

 

Motion Canvas aims to be a standalone editor for animations. While it
happens to be distributed as an npm package, the maintainers don't
intend for it to be used as a library.

We started out as users of Motion Canvas ourselves but ran into these
limitations when we wanted to build a video editing app on top of it.
After building our initial version using Motion Canvas' plugin
system, we realized that we wanted to make more fundamental changes
to the codebase that would be difficult to implement while keeping
compatibility with the existing Motion Canvas API.

That's why we decided to fork the project and turn it into Revideo.
We wrote a bit more about it on our blog.

Concretely, some of the differences to Motion Canvas are the
following ones:

  * Headless Rendering: Motion Canvas currently requires you to press
    a button in its UI to render a video. We have exposed this
    functionality as a function call and are making it possible to
    deploy a rendering API to services like Google Cloud Run (example
    , or to use our CLI to expose a rendering endpoint from your
    Revideo project (docs)
  * Faster Rendering: When building an app rather than creating
    videos for yourself, rendering speeds are quite important. We
    have sped up rendering speeds by enabling parallelized rendering
    and replacing the seek() operation for HTML video with our
    ffmpeg-based video frame extractor
  * Better Audio Support: We have enabled audio export from <Video/>
    tags during rendering, and have also added an <Audio/> tag that
    makes it easy to synchronize audio with your animations.


Telemetry

 

To understand how people use Revideo, we anonymously track how many
videos are rendered using the open-source tool Posthog. You can find
our code implementing Posthog here.

If you want to disable telemetry, just set the following environment
variable:

DISABLE_TELEMETRY=true

Learn More

 

To learn more about Revideo, feel free to check out our documentation
or join our Discord server.

About

Create Videos with Code

re.video

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Security policy

Security policy
Activity
Custom properties

Stars

502 stars

Watchers

0 watching

Forks

17 forks
Report repository

Releases

32 tags

Packages 0

No packages published

Contributors 6

  * @justusmattern27
  * @hkonsti
  * @revideo-bot
  * @Pita
  * @Just-Moh-it
  * @clemra

Languages

  * TypeScript 85.4%
  * MDX 7.9%
  * JavaScript 2.3%
  * SCSS 2.3%
  * CSS 1.4%
  * HTML 0.7%

Footer

 (c) 2024 GitHub, Inc.

Footer navigation

  * Terms
  * Privacy
  * Security
  * Status
  * Docs
  * Contact
  * Manage cookies
  * Do not share my personal information

You can't perform that action at this time.