Contributing an Element

First, set up the repository.

Use your AI coding agent to build an Element. Give it this page and the Element guidelines.

1. Develop the Element

Use any existing Element as a reference. For example, give your agent this prompt:

Example prompt
Create a dotted paper background Element.
Use the notebook paper Element as a reference.

See the guidelines for dependencies, assets, and initial props.

Open Studio to check the animation:

Terminal
cd packages/docs
bun remotion

2. Prepare previews

Ask your agent to render previews and run the tests. For the example above, run these commands from packages/docs:

Terminal
bun run render-element-previews --element=backgrounds/dotted-paper
bun test src/test/elements.test.ts

Review the PNG and MP4 files in .element-previews/backgrounds/dotted-paper. Choose a clear poster frame and check the full animation.

Ask your agent to include the preview files in the pull request and use them on the Element page.

3. Open the pull request

Submit the Element and its previews. Include links to any source of inspiration.

Keep “Allow edits from maintainers” enabled. After approval, a maintainer uploads the previews to static storage.