Add a new Remotion package
Steps
- •
Create
packages/<name>/with these files:- •
package.json— copy from@remotion/light-leaksas template; update name, description, homepage, dependencies - •
tsconfig.json— extends../tsconfig.settings.json, uses tsgo withemitDeclarationOnly: true,outDir: "dist",module: "es2020",moduleResolution: "bundler",target: "ES2022" - •
src/index.ts— exports - •
bundle.ts— Bun build script, externalizereact,remotion,remotion/no-react,react/jsx-runtime,react/jsx-dev-runtime,react-dom - •
eslint.config.mjs— useremotionFlatConfig({react: true})if React,{react: false}otherwise - •
.npmignore— copy from@remotion/light-leaks - •
README.md— package name, description, install command, link to docs
- •
- •
Register in monorepo:
- •
tsconfig.json(root) — add{"path": "./packages/<name>"}to references - •
packages/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 topackages,descriptions,installableMap,apiDocs
- •
- •
Documentation (
packages/docs/docs/<name>/):- •Add
"@remotion/<name>": "workspace:*"topackages/docs/package.jsondependencies (needed for twoslash snippets) - •
index.mdx— install tabs, table of contents, license - •
table-of-contents.tsx— TOCItem grid linking to component/function pages - •Individual component/function
.mdxpages - •Edit
packages/docs/sidebars.ts— add category - •Edit
packages/docs/components/TableOfContents/api.tsx— import table of contents and add section
- •Add
See the writing-docs skill for details on writing documentation.
- •
Example usage:
- •Add
"@remotion/<name>": "workspace:*"topackages/example/package.json - •Create
packages/example/src/<Name>/index.tsx - •Register
<Composition>inpackages/example/src/Root.tsx - •Add
{"path": "../<name>"}topackages/example/tsconfig.jsonreferences
- •Add
- •
Run
bun ito install dependencies - •
Build:
cd packages/<name> && bun run make
Version
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.
Patterns
- •Use
"workspace:*"for internal dependencies - •Use
"catalog:"for shared external dependency versions - •The
makescript is:tsgo && bun --env-file=../.env.bundle bundle.ts - •Add
"type": "module"topackage.json - •Add
"@typescript/native-preview": "catalog:"to devDependencies - •Types/main point to
dist/index.d.tsanddist/index.js(notdist/cjs/) - •Packages with React components need
peerDependenciesforreactandreact-dom