[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73701":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},73701,"revideo","midrender\u002Frevideo","midrender","Create Videos with Code","https:\u002F\u002Fre.video",null,"TypeScript",3849,197,16,54,0,7,19,49,21,28.89,"MIT License",false,"main",[],"2026-06-12 02:03:17","\u003Cbr\u002F>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fre.video\">\n    \u003Cpicture>\n      \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Flogo_dark.svg\">\n      \u003Cimg width=\"360\" alt=\"Revideo logo\" src=\".\u002Flogo.svg\">\n    \u003C\u002Fpicture>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Flerna.js.org\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fpublished%20with-lerna-c084fc?style=flat\" alt=\"published with lerna\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fvitejs.dev\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fpowered%20by-vite-646cff?style=flat\" alt=\"powered by vite\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@revideo\u002Fcore\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@revideo\u002Fcore?style=flat\" alt=\"npm package version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.com\u002Finvite\u002FJDjbfp6q2G\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1071029581009657896?style=flat&logo=discord&logoColor=fff&color=404eed\" alt=\"discord\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cbr\u002F>\n\n# Revideo - Create Videos with Code\n\nRevideo is an open source framework for programmatic video editing. It is forked\nfrom the amazing [Motion Canvas](https:\u002F\u002Fmotioncanvas.io\u002F) editor, with the goal\nof turning it from a standalone application into a library that developers can\nuse to build entire video editing apps.\n\nRevideo lets you create video templates in Typescript and deploy an API endpoint\nto render them with dynamic inputs. It also provides a React player component to\npreview changes in the browser in real-time. If you want to learn more, you can\ncheck out our [docs](https:\u002F\u002Fdocs.re.video\u002F), our\n[examples repository](https:\u002F\u002Fgithub.com\u002Fredotvideo\u002Frevideo-examples), and join\nour [Discord server](https:\u002F\u002Fdiscord.com\u002Finvite\u002FMVJsrqjy3j).\n\n#### News 🔥\n\n- [05\u002F21\u002F2024] We released an\n  [example](https:\u002F\u002Fgithub.com\u002Fredotvideo\u002Frevideo-examples\u002Ftree\u002Fmain\u002Fgoogle-cloud-run-parallelized)\n  on how to parallelize rendering jobs with Google Cloud Functions\n- [05\u002F20\u002F2024] We have a [new website](https:\u002F\u002Fre.video\u002F)!\n\n\u003Cbr\u002F>\n\n## Getting Started\n\nTo create an example project, run the following command:\n\n```bash\nnpm init @revideo@latest\n```\n\nThe example project will have the following code, which defines the video shown\nbelow.\n\n```tsx\nimport {Audio, Img, Video, makeScene2D} from '@revideo\u002F2d';\nimport {all, chain, createRef, waitFor} from '@revideo\u002Fcore';\n\nexport default makeScene2D('scene', function* (view) {\n  const logoRef = createRef\u003CImg>();\n\n  yield view.add(\n    \u003C>\n      \u003CVideo\n        src={'https:\u002F\u002Frevideo-example-assets.s3.amazonaws.com\u002Fstars.mp4'}\n        size={['100%', '100%']}\n        play={true}\n      \u002F>\n      \u003CAudio\n        src={'https:\u002F\u002Frevideo-example-assets.s3.amazonaws.com\u002Fchill-beat.mp3'}\n        play={true}\n        time={17.0}\n      \u002F>\n    \u003C\u002F>,\n  );\n\n  yield* waitFor(1);\n\n  view.add(\n    \u003CImg\n      width={'1%'}\n      ref={logoRef}\n      src={\n        'https:\u002F\u002Frevideo-example-assets.s3.amazonaws.com\u002Frevideo-logo-white.png'\n      }\n    \u002F>,\n  );\n\n  yield* chain(\n    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),\n    logoRef().scale(60, 1),\n  );\n});\n```\n\nhttps:\u002F\u002Fgithub.com\u002Fhavenhq\u002Frevideo\u002Fassets\u002F122226645\u002F4d4e56ba-5143-4e4b-9acf-d8a04330d162\n\n\u003Cbr\u002F>\n\n## Differences between Revideo and Motion Canvas\n\nMotion Canvas aims to be a\n[standalone editor](https:\u002F\u002Fgithub.com\u002Forgs\u002Fmotion-canvas\u002Fdiscussions\u002F1015) for\nanimations. While it happens to be distributed as an npm package, the\nmaintainers don't intend for it to be used as a library.\n\nWe started out as users of Motion Canvas ourselves but ran into these\nlimitations when we wanted to build a video editing app on top of it. After\nbuilding our initial version using Motion Canvas' plugin system, we realized\nthat we wanted to make more fundamental changes to the codebase that would be\ndifficult to implement while keeping compatibility with the existing Motion\nCanvas API.\n\nThat's why we decided to fork the project and turn it into Revideo. We wrote a\nbit more about it on our [blog](https:\u002F\u002Fre.video\u002Fblog\u002Ffork).\n\nConcretely, some of the differences to Motion Canvas are the following ones:\n\n- **Headless Rendering:** Motion Canvas currently requires you to press a button\n  in its UI to render a video. We have exposed this functionality as a\n  [function call](https:\u002F\u002Fdocs.re.video\u002Frenderer\u002FrenderVideo\u002F) and are making it\n  possible to deploy a rendering API to services like Google Cloud Run\n  ([example](https:\u002F\u002Fgithub.com\u002Fredotvideo\u002Frevideo-examples\u002Ftree\u002Fmain\u002Fgoogle-cloud-run),\n  or to use our CLI to expose a rendering endpoint from your Revideo project\n  ([docs](https:\u002F\u002Fdocs.re.video\u002Frender-endpoint))\n- **Faster Rendering:** When building an app rather than creating videos for\n  yourself, rendering speeds are quite important. We have sped up rendering\n  speeds by enabling\n  [parallelized rendering](https:\u002F\u002Fgithub.com\u002Fredotvideo\u002Frevideo\u002Fpull\u002F74) and\n  replacing the `seek()` operation for HTML video with our ffmpeg-based\n  [video frame extractor](https:\u002F\u002Fgithub.com\u002Fredotvideo\u002Frevideo\u002Fpull\u002F33)\n- **Better Audio Support:** We have enabled audio export from `\u003CVideo\u002F>` tags\n  during rendering, and have also added an `\u003CAudio\u002F>` tag that makes it easy to\n  synchronize audio with your animations.\n\n\u003Cbr\u002F>\n\n## Telemetry\n\nTo understand how people use Revideo, we **anonymously** track how many videos\nare rendered using the open-source tool\n[Posthog](https:\u002F\u002Fgithub.com\u002FPostHog\u002Fposthog). You can find our code\nimplementing Posthog\n[here](https:\u002F\u002Fgithub.com\u002Fredotvideo\u002Frevideo\u002Ftree\u002Fmain\u002Fpackages\u002Ftelemetry).\n\nIf you want to disable telemetry, just set the following environment variable:\n\n```bash\nDISABLE_TELEMETRY=true\n```\n\n## Learn More\n\nTo learn more about Revideo, feel free to check out our\n[documentation](http:\u002F\u002Fdocs.re.video\u002F) or join our\n[Discord server](https:\u002F\u002Fdiscord.gg\u002FhexYBZGBY8).\n","Revideo 是一个用于程序化视频编辑的开源框架。它允许开发者使用 TypeScript 创建视频模板并通过API端点以动态输入渲染这些模板，同时提供了一个React播放器组件以便在浏览器中实时预览更改。基于Vite构建，并且使用Lerna进行多包管理，确保了开发流程的高效与便捷。该项目适用于需要自动化生成或编辑视频内容的场景，如在线广告、教育材料制作等，能够显著提高视频生产效率和灵活性。",2,"2026-06-11 03:46:59","high_star"]