Setup - Remotion — ContextQMD

After obtaining the Editor Starter, you should fork it to your own account.

Once you have forked the repository, you can clone it to your local machine, and install the dependencies by doing the following:

Start a new project

If you are starting a new project, you can stay in your repository and install dependencies:

npm i

If you use a coding agent, install the Remotion Agent Skills:

bash

npx remotion skills add

For Editor Starter projects, we recommend /remotion-saas and /remotion-docs. Alternatively, use /remotion-best-practices, which encompasses all Remotion skills.

Run the app using:

npm run dev

The app may be deployed like any other React Router 7 app, for example by connecting the repository to Vercel.

Copying into an existing project

If you already have a project, you can copy the src/editor folder into your existing project.
The following instructions were tested on a new Next.js project with Tailwind and TypeScript enabled, but it should work with any React framework.

<div> <div> <Step>1</Step> Install the [dependencies](/docs/editor-starter/dependencies). </div> <div> <Step>2</Step> Copy the `src/editor` folder into your existing project. </div> <div> <Step>3</Step> Mount the editor in your app. For example, in Next.js, in `page/app.tsx`:

```ts title="page/app.tsx"
import { Editor } from "./editor/editor";

export default function Home() {
  return <Editor />;
}
```

</div> <div> <Step>4</Step> Set up the [backend routes](/docs/editor-starter/backend-routes). </div> </div>

Setting up asset uploads

If the user drops in any assets, you can configure them to be uploaded to an S3 bucket.
See Asset uploads for more information.

Setting up rendering

Choose between Remotion Lambda and client-side rendering.

Setting up captions

You can setup AI transcription for audio and video assets. See Captioning on how to set it up.