Skip to main content

npx remotion elements usev4.0.542

Installs an Element from the page of an Element Library into a composition of your project.

npx remotion elements use <url>

Example​

npx remotion elements use https://example.com/elements/lower-third --composition MyVideo

The URL is the Element's page. The command:

  1. Fetches the page and reads the Element payload embedded in it
  2. Prints the files it will create and change, the npm packages it will install and the assets it will add
  3. Asks for confirmation
  4. Installs the missing packages with your package manager, saves the assets into the public folder, writes an .element.tsx file next to the composition's component and adds the Element to the composition.

The command inserts the Element at frame 0. If the Element has fixed dimensions and the composition's width and height are numbers, the Element is centered.

The Element's source code comes from the website and runs in your project. Install Elements only from websites you trust.

Supported URLs​

The page must embed the Element payload in its HTML, or link to a JSON payload. See serializeElementPayloadForHtml().

A URL that returns a JSON payload created with createElementPayload() also works.

Flags​

--composition​

The ID of the composition to add the Element to.

If your project has a single composition, it is used. Otherwise, the command lets you select a composition. In a non-interactive shell, it fails and lists the composition IDs.

The command finds compositions in the source code. It supports <Composition> and <Still> elements with a string id.

--element​

The slug of the Element to install, if the page contains several Elements.

--yes​

Installs without asking for confirmation. Use it in scripts and when an agent runs the command. Also available as -y.

In a non-interactive shell, the command fails if --yes is not passed.

--overwrite​

Replaces the Element's .element.tsx file if it already exists with different contents. Without this flag, the command fails and does not change any files.

If the existing file has the same contents, it is reused.

--dry-runv4.0.543​

Previews the Element, composition, source files, dependencies, and assets without installing packages or writing files. Does not ask for confirmation.

--package-managerv4.0.543​

Forces a specific package manager to be used. By default, Remotion will auto-detect the package manager based on your lockfile.
Acceptable values are npm, yarn, pnpm, bun and nub.

--public-dir​

Define the location of the public/ directory. If not defined, Remotion will assume the location is the public folder in your Remotion root.

--log​

One of trace, verbose, info, warn, error.
Determines how much info is being logged to the console.

Default info.

See also​