// Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist updates. Use when creating a new @remotion package.
Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, tests, formatting, and builds.
Update `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).
Open a pull request for the current feature
Add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when adding or converting command-line flags or Remotion options.
Guidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when implementing or debugging visual editing of Sequences.
Best practices for Remotion - Video creation in React
| name | add-new-package |
| description | Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist updates. Use when creating a new @remotion package. |
Create packages/<name>/ with these files:
package.json — copy from @remotion/light-leaks as template; update name, description, homepage, dependenciestsconfig.json — extends ../tsconfig.settings.json, uses tsgo with emitDeclarationOnly: true, outDir: "dist", module: "es2020", moduleResolution: "bundler", target: "ES2022"src/index.ts — exportsbundle.ts — Bun build script, externalize react, remotion, remotion/no-react, react/jsx-runtime, react/jsx-dev-runtime, react-domeslint.config.mjs — use remotionFlatConfig({react: true}) if React, {react: false} otherwise.npmignore — copy from @remotion/light-leaksREADME.md — package name, description, install command, link to docsRegister in monorepo:
tsconfig.json (root) — add {"path": "./packages/<name>"} to referencespackages/cli/src/list-of-remotion-packages.ts — add '@remotion/<name>'packages/create-video/src/list-of-remotion-packages.ts — add '@remotion/<name>'packages/studio-shared/src/package-info.ts — add to packages, descriptions, installableMap, apiDocsDocumentation (packages/docs/docs/<name>/):
"@remotion/<name>": "workspace:*" to packages/docs/package.json dependencies (needed for twoslash snippets)index.mdx — install tabs, table of contents, licensetable-of-contents.tsx — TOCItem grid linking to component/function pages.mdx pagespackages/docs/sidebars.ts — add categorypackages/docs/components/TableOfContents/api.tsx — import table of contents and add sectionSee the writing-docs skill for details on writing documentation.
Example usage:
"@remotion/<name>": "workspace:*" to packages/example/package.jsonpackages/example/src/<Name>/index.tsx<Composition> in packages/example/src/Root.tsx{"path": "../<name>"} to packages/example/tsconfig.json referencesRun bun i to install dependencies
Build: cd packages/<name> && bun run make
Use the current version from packages/core/src/version.ts.
For the documentation version, increment the patch version by 1 as it will only be released with the next Remotion release.
"workspace:*" for internal dependencies"catalog:" for shared external dependency versionsmake script is: tsgo && bun --env-file=../.env.bundle bundle.ts"type": "module" to package.json"@typescript/native-preview": "catalog:" to devDependenciesdist/index.d.ts and dist/index.js (not dist/cjs/)peerDependencies for react and react-dom