@remotion-dev/add-new-package
π₯ Make videos programmatically with 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. |
Add a new Remotion package
Steps
Create
packages/<name>/with these files:package.jsonβ copy from@remotion/light-leaksas template; update name, description, homepage, dependenciestsconfig.jsonβ extends../tsconfig.settings.json, uses tsgo withemitDeclarationOnly: true,outDir: "dist",module: "es2020",moduleResolution: "bundler",target: "ES2022"src/index.tsβ exportsbundle.tsβ Bun build script, externalizereact,remotion,remotion/no-react,react/jsx-runtime,react/jsx-dev-runtime,react-domeslint.config.mjsβ useremotionFlatConfig({react: true})if React,{react: false}otherwise.npmignoreβ copy from@remotion/light-leaksREADME.mdβ package name, description, install command, link to docs
Register 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 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, licensetable-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 dependenciesBuild:
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
Loading...
Select a file to preview
Analyzing security...
Checking scan reports and verification data.
Bill of Materials
Everything this skill can do β files, network, commands, and more.