Docs: Add Element Studio previews and asset rendering

[samohovets]

Closes #8908. Closes #9064.

Summary

• add a canonical registry for Remotion Elements and reuse its render metadata on Element detail pages
• register all Element preview compositions inside an elements <Folder>
• add a command that renders full-resolution PNG posters and muted H.264 MP4 previews
• support explicit uploads to stable remotion.media R2 paths with size and content-type verification
• validate registry coverage, render dimensions, poster frames, composition IDs, and public URL derivation
• update the Element template and contribution documentation

Generated previews

The render command successfully generated and visually verified all current Elements:

• Paper Texture: 1920×1080, 4 seconds
• Rotating Starburst: 1920×1080, 8 seconds
• Lower Third: 1280×738, 4 seconds
• Number Counter: 880×440, 4 seconds

All videos were verified as H.264, yuv420p, with no audio stream. Generated binaries are ignored and are not committed.

The R2 upload mode was not run locally because R2 credentials were unavailable. It can be run with:

cd packages/docs
bun --env-file=<main-worktree>/packages/remotion-media/.env \
  run render-element-previews --upload

Validation

• bun run build
• bun run stylecheck
• bunx turbo run lint test --filter=docs --no-update-notifier
• cd packages/docs && bun test src/test/elements.test.ts
• cd packages/docs && bun run render-element-previews
• ffprobe validation of codec, pixel format, dimensions, duration, and audio streams

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Jul 15, 2026 3:23pm
remotion	Ready	Preview, Comment	Jul 15, 2026 3:23pm

[pullfrog]

✅ No new issues found.

Reviewed changes — this PR introduces a canonical Element registry, registers Element compositions for rendering, adds a local render/upload script for full-resolution PNG posters and muted H.264 MP4 previews, and updates contributor docs.

• Add element-registry.ts — canonical type and definitions for all Elements, plus helpers for composition IDs and public preview URLs.
• Refactor ElementPage.tsx — accepts a single definition prop and delegates preview wrapping to a shared ElementPreviewComposition component.
• Add ElementPreviewComposition.tsx — shared live preview and asset-rendering wrapper with a render-safe neutral canvas.
• Register Element compositions in Root.tsx — renders every registry entry inside a dedicated elements <Folder>.
• Add render-element-previews.ts — bundles the docs Remotion root, renders each Element poster and full-duration video, and uploads to stable remotion.media R2 paths only when --upload is passed.
• Extend elements.test.ts — validates registry coverage, integer render metadata, even yuv420p-compatible dimensions, stable composition IDs, and deterministic preview URLs.
• Update contributor docs — elements-template/index.mdx and submit-an-element.mdx now require a registry entry, an explicit poster frame, and local preview rendering.

  ^{｜ View workflow run ｜ Using Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏}

[pullfrog]

✅ No new issues found.

Reviewed changes — the latest commit normalizes test-discovered Element paths to forward slashes so registry slug matching is platform-independent.

• findElements in src/test/elements.test.ts — now derives name from a local relativeName constant and splits on path.sep before joining with /. This keeps the existing elementDefinitions.find((entry) => entry.slug === element.name) comparison reliable on Windows and avoids the redundant path.relative call.

  ^{｜ View workflow run ｜ Using Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏}