Remotion: programmatisches Video mit React-Komponenten

Alles Wissenswerte über remotion-dev/remotion: ein TypeScript-Framework, um echte Videos aus React-Komponenten zu definieren, in der Vorschau anzuzeigen und zu rendern.

Was Remotion ist

Remotion ermöglicht es, Videos mit React zu erstellen, statt eine Zeitleiste manuell zu bearbeiten. Eine Komposition deklariert ihre Abmessungen, Bildrate und Dauer; die Komponente erhält das aktuelle Bild über useCurrentFrame() und wird über die Kommandozeilenschnittstelle, eine Server-API oder Cloud-Infrastruktur zu MP4 oder anderen Formaten gerendert.

Das Projekt ist kein herkömmlicher Videoeditor und kein generatives Modell. Sein Ansatz besteht darin, wiederholbares, datengetriebenes oder parametrisiertes Video als Software zu behandeln: Komponenten, Eingabeeigenschaften, Versionskontrolle, Tests und Automatisierung. Dieselbe Komponente kann in Remotion Studio, in <Player /> innerhalb einer Anwendung und beim serverseitigen Rendering verwendet werden.

Cyberpunk-Illustration programmatischer Videoerstellung mit React: eine holografische Zeitleisten-Oberfläche schwebt in einem dunklen Studio, mit React-Komponenten-Codefragmenten in neonblauen und rosafarbenen Panels neben einem zentralen Videoplayer mit einer dynamischen, datengetriebenen Visualisierung.

Der Ursprung: eine für den Web-Workflow geschaffene Bibliothek

Das Repository wurde am 23. Juni 2020 erstellt. Die Dokumentation und der Syntax-Podcast identifizieren Jonny Burger als die Person, die interviewt wurde, um das Produkt und seine programmatischen Erstellungsabläufe zu erklären.

Der technische Kontext, der sein Auftreten erklärt, ist eine vertraute Spannung: HTML, CSS und React sind bequeme Werkzeuge für Oberflächen und Daten, während traditionelle Videoeditoren besser für manuelle visuelle Anpassungen geeignet sind. Remotion wählt bewusst den ersten Weg. Das erleichtert die Erzeugung vieler Varianten – etwa ein Video pro Kunde, Sprache, Episode oder Kennzahlensatz –, beseitigt aber nicht die Notwendigkeit, Animationen zu gestalten, das visuelle Ergebnis zu testen und Codecs, Schriftarten und Ressourcen zu verwalten.

Dunkler digitaler Arbeitsbereich, der den Übergang von einer traditionellen Videoeditor-Zeitleiste zu einem React-Code-Editor zeigt: links ein klobiger, grauer nichtlinearer Editor, rechts eine neonfarbene IDE mit sauberem React-Komponenten-Code, der eine Videokomposition definiert.

Philosophie und Prinzipien

Video als deklarative Schnittstelle: Eine Komposition ist eine React-Komponente mit expliziten Parametern, keine undurchsichtige Abfolge von Mausaktionen.
Wiederverwendung über Ansichten und Rendering hinweg: Komponenten können in Studio vorgeschaut, mit <Player /> eingebettet und in einem Serverprozess gerendert werden.
Automatisierung statt Wiederholung: Eingabeeigenschaften ermöglichen die Erzeugung von Varianten, ohne ein Bearbeitungsprojekt zu duplizieren.
Technische Kontrolle über das Ergebnis: Die CLI und remotion.config.ts legen Auflösung, Codec, Nebenläufigkeit, CRF, Skalierung und Ausgabepfad offen.

Wie es funktioniert

Eine Komposition wird mit Composition registriert und definiert id, component, durationInFrames, fps, width und height. Innerhalb der Komponente gibt useCurrentFrame() einen Zähler zurück, dessen erster Wert 0 ist; Animationen und Übergänge werden aus diesem Wert berechnet.

Remotion-Studio-Oberfläche in dunklem Cyberpunk-Design: ein elegantes, futuristisches Vorschaufenster zeigt eine animierte Grafik, umgeben von schwebenden UI-Panels für durationInFrames, fps und width, mit leuchtenden Datenströmen, die die Oberfläche mit einem Chrome-Headless-Shell-Symbol verbinden.

Der lokale Ablauf ist Studio → Komposition → Rendering. npx remotion studio öffnet die Vorschau; npx remotion render verarbeitet eine Komposition mit Chrome Headless Shell und erzeugt eine Datei, deren Standard-Codec H.264 ist. Für Dienste folgt die Node/Bun-API dem Pfad bundle() → selectComposition() → renderMedia(); das Bundle kann für viele Renderings mit inputProps wiederverwendet werden.

Abstrakte Visualisierung serverseitigen Video-Renderings und der Automatisierung: ein zentrales, leuchtendes Server-Rack verarbeitet mehrere Videovarianten gleichzeitig, mit neon umrandeten Filmbildern, die wie Datenpakete herabfallen, und Pfeilen mit der Beschriftung bundle(), selectComposition() und renderMedia().

Remotion bietet außerdem Lambda, um Rendering-Arbeit auf AWS zu verteilen, Player für eine React-Anwendung, Vorlagen für Next.js und andere Umgebungen sowie einen dokumentierten Ablauf für GitHub Actions. Die Dokumentation weist darauf hin, dass remotion.config.ts die CLI und Studio betrifft, nicht die SSR-APIs: In diesem Fall müssen Optionen direkt an die API übergeben werden.

Offizieller und halboffizieller Status

Das Repository und remotion.dev sind die First-Party-Kanäle. Das Paket wird als @remotion/*-Familie auf npm verteilt, und die Organisation pflegt Vorlagen, ein SDK für Lambda sowie Plugins/Skills für Coding-Agenten.

Es gibt Integrationen mit offiziellem Status, die jedoch präzise beschrieben werden müssen:

Vercel: Remotions Dokumentation vermerkt, dass seine Vorlage im Vercel-Vorlagen-Marktplatz vertreten ist, und dokumentiert @remotion/vercel. Das ist eine in diesem Katalog sichtbare Integration und Verbreitung; die gefundenen Quellen belegen nicht, dass Vercel Eigentümer des Projekts ist oder dessen Ergebnisse zertifiziert.
Claude Code, Codex, Cursor und Kimi: Die offizielle Dokumentation pflegt Skills und listet Plugins für diese Umgebungen auf. Die Installation aus Remotions Marktplatz für Claude Code ist ein First-Party-Weg, keine Zertifizierung durch jeden Anbieter.
Mediabunny: Remotion empfiehlt es als unabhängiges Projekt von Vanilagy, sponsert das Projekt als Gold Sponsor und zieht eigene Multimedia-Pakete schrittweise zu dessen Gunsten zurück. Das ist eine halboffizielle Sponsoring- und Empfehlungsbeziehung, kein Remotion-Repository.

Es wurde keine formale „Standard”-Bezeichnung gefunden. In der Praxis machen die Präsenz von Studio, CLI, npm-Paketen, Vorlagen und SDKs Remotion zu einem integrierten Framework für programmatisches Video in React, ohne dass dies einer universellen Anerkennung gleichkommt.

Das Ökosystem

First-Party-Repositories und -Produkte

remotion-dev/skills: offizielle Skills zum Erstellen, Rendern, Wasserzeichen, Karten, Untertiteln und Video-Apps; 4.252 Sterne und 489 Forks.
remotion-dev/claude-code-plugin, codex-plugin, cursor-plugin und kimi-code-plugin: offizielle Connectoren rund um diese Skills. Die gefundenen Zahlen waren jeweils 8, 21, 0 und 1 Sterne; das sind kleine Zusatzkomponenten, keine Alternativen zum Kern.
remotion-dev/lambda-php-sdk, lambda_go_sdk und lambda-ruby-sdk: offizielle SDKs zum Aufrufen von Remotion Lambda aus PHP, Go und Ruby. Ihre READMEs geben an, aus dem Quellcode des Hauptrepositorys zu stammen und mit Remotions Releases aktualisiert zu werden.
remotion-dev/vue-starter, angular-starter und svelte-starter: offizielle Starter zur Integration von Remotion mit diesen Frameworks, keine Ports des Kern-Renderers.
remotion-dev/trailer (1.119 Sterne) und remotion-dev/github-unwrapped (1.309 Sterne) sind Beispiele/Anwendungen der Organisation selbst.
Der offizielle Katalog umfasst außerdem Vorlagen. Unter den gefundenen Repositories sind template-tiktok (273 Sterne), template-audiogram (266), template-code-hike (215) und template-three (107). Remotions Shop bietet zudem First-Party-Bezahlprodukte.

Futuristische Netzwerkkarte des Remotion-Ökosystems und seiner Integrationen: ein zentraler leuchtender Kern mit dem React-Atom-Symbol verbindet sich über leuchtende Glasfaserlinien mit Satellitenknoten, die Vercel, Claude Code, Cursor und AWS Lambda darstellen.

Community-Erweiterungen und -Adoption

av/remotion-bits (437 Sterne) bündelt Grafikkomponenten, Übergänge und Text-Reveals. Es wurde keine offizielle Support-Beziehung gefunden.
stefanwittwer/remotion-animated (220 Sterne) präsentiert sich als deklarative Animationserweiterung für Remotion.
wshuyi/remotion-video-skill (333 Sterne) ist ein Community-Skill mit Ausrichtung auf Claude Code, mit zweisprachigem Englisch/Chinesisch-Material; es unterscheidet sich von remotion-dev/skills.
nyanko3141592/remotion-voicevox-template (279 Sterne) ist eine japanische Vorlage für VOICEVOX: eine Community-Lokalisierung/-Vorlage, keine offizielle Kernübersetzung.
openvideodev/react-video-editor (1.768 Sterne) gibt an, für einen React-Videoeditor Remotion zu verwenden. calesthio/OpenMontage (46.467 Sterne) ist mit Remotion getaggt und präsentiert sich als agentengestütztes Videoproduktionssystem. Beide sind externe Anwender; sie sollten nicht mit offiziellen Repositories verwechselt werden.

Das Netzwerk des Hauptrepositorys hatte zum Messzeitpunkt 4.162 Forks. Die Untersuchung der nach Sternen sortierten Forks ergab keinen herausragenden differenzierten Port; auch kein gepflegter Port des Kern-Renderers außerhalb von TypeScript wurde identifiziert. Offizielle SDKs und externe Vorlagen/Lokalisierungen wurden jedoch gefunden.

Zahlen des Repos

Messung: 10. August 2026, GitHub- und npm-API.

Metrik	Wert
Sterne	55.980
Forks	4.162
Echte Abonnenten	159
Von der API gemeldete offene Issues	205
Hauptsprache	TypeScript
Erstellung	23. Juni 2020
Letzte `push`-Aktivität	10. August 2026
Letztes gefundenes Release	`v4.0.507`, 7. August 2026
npm-Downloads von `remotion`, letzte Woche	1.689.662

Cyberpunk-Datendashboard mit beeindruckenden GitHub- und npm-Kennzahlen für ein massives Open-Source-Projekt: leuchtende holografische Diagramme zeigen eine steil ansteigende Linie für 55.980 Sterne und 1,6 Millionen wöchentliche npm-Downloads.

Auch offizielle Pakete zeigten Verbreitungsaktivität: @remotion/cli verzeichnete 1.140.740 wöchentliche Downloads und @remotion/player 1.463.060. Diese Zahlen zählen Downloads, keine Personen oder eindeutigen Bereitstellungen. GitHubs allgemeine API spiegelt die Sterne im Feld watchers_count wider; deshalb wird subscribers_count als tatsächliche Abonnenten angegeben. Sein Feld open_issues_count kann offene Pull Requests einschließen und repräsentiert daher nicht ausschließlich Issues.

Die aktuelle Version gehört zur v4-Linie. Der Leitfaden v3 → v4 verlangt, remotion und alle @remotion/*-Pakete auf derselben Version zu halten, Config nach @remotion/cli/config zu verschieben und npx remotion preview durch npx remotion studio zu ersetzen.

Wie man beiträgt

Remotion veröffentlicht einen Beitragsprozess. Für größere Änderungen wird gebeten, zunächst ein Issue zu eröffnen und Absicht und Architektur abzustimmen; umfangreichere Projekte können über Discord oder E-Mail koordiniert werden. Das Monorepo erfordert Bun v1.3.3 oder neuer:

git clone --depth=1 https://github.com/remotion-dev/remotion.git
cd remotion
bun i
bun run build
bun run watch

Futuristisches Entwicklerterminal in einer dunklen, stimmungsvollen Umgebung, das den Open-Source-Beitragsprozess symbolisiert: eine holografische Kommandozeilen-Oberfläche zeigt die Befehle bun i, bun run build und git clone in leuchtend grünem und bernsteinfarbenem Text, mit 3D-Symbolen für TypeScript und Rust, verbunden durch leuchtende Energielinien.

Die Dokumentation schlägt vor, mit bun run test zu verifizieren, das Beispiel in packages/example auszuführen und ten-frame-tester zu rendern. Für neue Optionen schreibt sie die Prioritätsreihenfolge Node-API → Studio → CLI-Flag → Konfiguration → Standardwert vor, zusätzlich zur Dokumentation der API, der CLI und der Version, die die Änderung eingeführt hat. Das Repository akzeptiert TypeScript oder Rust und verlangt klare Namen, explizite Einheiten sowie Vorwärts- und Rückwärtskompatibilität, wo zutreffend.

Wie die Community reagierte

Die gefundene Evidenz kombiniert überprüfbare Tutorials und Anwendungsfälle mit begrenzter Konversation auf Hacker News:

Der Hacker-News-Beitrag 26067498, „Remotion: create motion graphics with React”, wurde von tomduncalf am 8. Februar 2021 veröffentlicht und hatte 9 Punkte und 0 Kommentare. Eine erneute Einreichung am folgenden Tag, 26072767, hatte 8 Punkte und 0 Kommentare. Sie belegen Verbreitung, keine externe Rezension oder Konsens.
Im Thread 47471601 kommentierte Nutzer TechSquidTV, dass sie Remotion in einigen Fällen als Ersatz für After Effects für eine Vorlage oder ein Skript genutzt hatten, das repetitive Videos erzeugte, und bewerteten es positiv. Die wichtige Nuance ist, dass die grafischen Ressourcen weiterhin in After Effects erstellt wurden: Die Erfahrung stützt Automatisierung und Vorlagen, keinen vollständigen Ersatz des Editors.
Das Video von Fireship, „This video was made with code. But how?”, identifiziert Remotion und verzeichnete zum Zeitpunkt der Abfrage 882.247 Aufrufe. Es ist ein weitreichendes Tutorial, kein unabhängiger Qualitätsnachweis.
Mux Engineering veröffentlichte ein Tutorial von Dave Kiss, das Remotion als nützliche Bibliothek zur Erstellung von Video mit React bezeichnet und ein Projekt zeigt, das Mux-Daten visualisiert. Es ist ein dokumentierter Integrationsfall, keine vergleichende Bewertung.
Episode 1005 von Syntax, veröffentlicht am 18. Mai 2026, interviewte Jonny Burger zu programmatischer und Skills-basierter Videoerstellung. Der Podcast-Eintrag ist eine Quelle technischer Verbreitung; er verwandelt die Aussagen des Gastes nicht in unabhängige Kennzahlen.

Von Reddit wurden aufgrund der Zugriffsprüfung der Seite keine überprüfbaren Daten gewonnen; X verlangte eine Anmeldung, und Product Hunt zeigte eine Cloudflare-Prüfung. Diese Einschränkungen belegen keine Abwesenheit von Beiträgen und erlauben es nicht, Stimmen, Kommentare oder Reaktionen auf diesen Plattformen zuzuschreiben.

Remotion im Vergleich zu anderen Ansätzen

Ansatz	Nachweisbare Beziehung	Nachweisbarer Unterschied
After Effects	Ein HN-Nutzer verwendete es neben Remotion, um eine repetitive Vorlage zu automatisieren.	Dieser Nutzer erstellte grafische Ressourcen weiterhin in After Effects; die Quelle belegt keine vollständige funktionale Gleichwertigkeit.
`openvideodev/react-video-editor`	Erklärt, mit Remotion einen React-Videoeditor zu bauen.	Es ist eine auf Remotion aufgebaute Bearbeitungs-App, während das Hauptrepository das Framework und der Renderer ist.
OpenMontage	Mit Remotion getaggt und befasst sich mit agentengestützter Videoproduktion.	Es ist ein angrenzendes Produktionssystem; es wurde keine Evidenz gefunden, um es in einen Leistungs- oder Architekturvergleich zu verwandeln.
Mediabunny	Remotion empfiehlt es für Medienfunktionen und sponsert das Projekt.	Es ist ein unabhängiges Projekt, und Remotions Dokumentation erörtert eine Migration dorthin von bestimmten Multimedia-Paketen; es ersetzt Remotions React-Kompositionen nicht selbst.

Eine aktuelle praktische Grenze zeigt sich in Issue #10235: Ein Nutzer bittet um Export von EDL, FCPXML, Premiere XML oder OTIO für einen Ablauf „KI macht den Schnitt → menschlicher Editor schließt in DaVinci/Premiere ab”. Laut dem Issue erzeugt Remotion finales Video als MP4 oder ProRes, keine Liste von Schnittentscheidungen. Das ist eine offene Integrationsanfrage, kein Versprechen des Projekts.

Kurzanleitung zur Nutzung

Installation und erster Start

Eine mit npm kompatible Node-Umgebung ist erforderlich. Der offizielle Starter ist:

npx create-video@latest

Um ein leeres Projekt ohne Interaktion, mit Tailwind und Skills zu erstellen:

npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev

Der letzte Befehl öffnet Remotion Studio zur Vorschau der Kompositionen. Unter Linux benötigt Chrome Headless Shell Systembibliotheken; Alpine und NixOS werden nicht unterstützt, und glibc-Distributionen benötigen mindestens glibc 2.35.

Übliche Arbeitsabläufe

Eine lokale Komposition in der Vorschau anzeigen: npx remotion studio src/remotion/index.ts ausführen. Studio lädt den Einstiegspunkt und ermöglicht es, die Komposition zu untersuchen.
Ein MP4 rendern: npx remotion render MyComposition out/video.mp4. Wird die ID weggelassen, fragt die CLI danach; wird der Ausgabepfad weggelassen, schreibt sie nach out/.
Das Ergebnis in einer Anwendung wiederverwenden: remotion @remotion/cli @remotion/player installieren und die Komponente mit <Player /> verwenden; Player erhält die Komponente, nicht die Liste der Kompositionen.
Parametrisierte Videos in einem Dienst rendern: einmal mit bundle() bündeln, Metadaten mit selectComposition() berechnen und renderMedia() mit inputProps aufrufen. Für skalierbare Lasten bietet die Dokumentation Lambda auf AWS.

Wesentliche Konfiguration

remotion.config.ts im Root für CLI-/Studio-Optionen erstellen:

import {Config} from '@remotion/cli/config';

Config.setConcurrency(8);
Config.setPixelFormat('yuv444p');
Config.setCodec('h265');

Config.setConcurrency(n): regelt parallele Bilder; der Leitfaden schlägt vor, von den verfügbaren Kernen auszugehen und die Auswirkung auf den Rest des Rechners zu messen.
Config.setCodec(...): wählt H.264, H.265, VP8, VP9, AV1, ProRes oder andere verfügbare Codecs.
Config.setScale(2) und Config.setCrf(16): steuern effektive Auflösung und Qualität; das CLI-Argument hat Vorrang vor der Datei.
Config.setOutputLocation(...): legt einen Standard-Ausgabepfad fest.
src/Root.tsx: registriert jede Composition mit ihrer ID, Größe, Bildrate und Dauer; es ist die erste Datei, die beim Hinzufügen einer Ausgabe geändert wird.

Häufige Fallstricke und Lösungen

JSON-Eigenschaften unter Windows: --props verarbeitet Inline-JSON aufgrund der Shell-Anführungszeichen nicht zuverlässig. Stattdessen eine JSON-Datei verwenden.
Qualität und Hardware-Beschleunigung: --crf und --video-bitrate lassen sich nicht kombinieren; bei Hardware-Beschleunigung muss Bitrate statt CRF verwendet werden.
SSR ignoriert die Konfigurationsdatei: Optionen direkt an die Bundling-/Rendering-APIs übergeben, da remotion.config.ts dort nicht angewendet wird.
Next.js: @remotion/bundler nicht innerhalb einer API-Route verwenden, da es versuchen würde, Webpack mit Webpack zu bündeln. Das Bundle außerhalb der Route erstellen oder Lambda/Vercel verwenden.
Migration v3 → v4: alle Pakete koordiniert aktualisieren; FFmpeg und FFprobe werden nun mit @remotion/renderer ausgeliefert, daher sollten ältere manuelle Installationsabläufe entfernt werden.

Integrationen und Migration

Der offizielle Weg für Agenten ist npx skills add remotion-dev/skills; die Dokumentation verknüpft diesen Inhalt mit Claude Code, Codex, Cursor und Kimi. Für CI installiert das offizielle GitHub-Actions-Beispiel Abhängigkeiten, führt npx remotion render MyComp out/video.mp4 aus und veröffentlicht das Artefakt. Für Node/Bun-Dienste SSR verwenden; für verteiltes Rendering Lambda; für eine Web-App Player sowie die Vorlagen für Next.js, Vercel, Vue, Angular oder Svelte.

Die Lizenz ist weder MIT noch Apache: Sie ist kostenlos für Einzelpersonen, gemeinnützige Organisationen und Organisationen mit bis zu drei Mitarbeitern, auch bei kommerzieller Nutzung. Organisationen außerhalb dieser Fälle benötigen eine Unternehmenslizenz; zudem erlaubt sie nicht, den Code abzuleiten, um ein von Remotion abgeleitetes Produkt zu verkaufen, zu vermieten oder neu zu lizenzieren. Vor der Planung einer kommerziellen Integration lohnt sich eine Prüfung.

Anwendungsfälle und wem dieses Repository helfen kann

Produkt- und Marketingteams mit vielen Varianten desselben Videos können Eigenschaften – Daten, Sprache, Marke, Kennzahlen oder Ressourcenpfade – an eine Komposition übergeben und wiederholbare Ergebnisse aus der CLI, CI oder einem Dienst rendern.
React-Entwickler, die eine Videoansicht innerhalb einer Anwendung benötigen, können die Komponente mit <Player /> wiederverwenden und den Renderer für den finalen Export reservieren, statt zwei Implementierungen derselben Visualisierung zu pflegen.
SaaS-Produkte, die audiovisuelle Ergebnisse auf Abruf erzeugen, können das Projekt einmal bündeln und mit inputProps rendern; Lambda ist die dokumentierte Option, wenn die Arbeit auf AWS verteilt werden muss.
Teams, die Datenberichte, Zusammenfassungen oder Vorlagen automatisieren, können dem Mux-Fall als Integrationsreferenz folgen: Daten in Komponenten übersetzen und das Ergebnis in Video verwandeln.
Personen, die mit Coding-Agenten arbeiten, können die offiziellen Skills und Plugins nutzen, damit ein Agent Kompositionen erstellen oder ändern kann. Das ersetzt weder die visuelle Überprüfung noch löst es die offenen Interoperabilitätsgrenzen mit Zeitleisten-Editoren.

Geteilte Bildschirmvisualisierung, die traditionelle Videobearbeitung mit programmatischer Videogenerierung vergleicht: links eine komplexe, manuelle After-Effects-Zeitleiste; rechts eine elegante, automatisierte React-Komponente, die Hunderte von Videovarianten aus einer einzigen Eingabeeigenschaft erzeugt.

Ressourcen

Repository: https://github.com/remotion-dev/remotion
Dokumentation und Einrichtung: https://www.remotion.dev/docs
Grundlagen: https://www.remotion.dev/docs/the-fundamentals
Render-CLI: https://www.remotion.dev/docs/cli/render
Konfiguration: https://www.remotion.dev/docs/config
Offizielle Skills: https://www.remotion.dev/docs/ai/skills
Vorlagen: https://www.remotion.dev/templates
Beitragen: https://www.remotion.dev/docs/contributing
Video-Tutorial: https://www.youtube.com/watch?v=deg8bOoziaE
Tutorial mit Mux: https://www.mux.com/blog/visualize-mux-data-with-remotion
Hacker-News-Threads: https://news.ycombinator.com/item?id=26067498, https://news.ycombinator.com/item?id=47471601
npm-Paket: https://www.npmjs.com/package/remotion
Discord: https://www.remotion.dev/discord

Hinweis: Dieser Artikel kombiniert Remotions Dokumentation und Repositories, die GitHub- und npm-APIs sowie Community-Quellen, abgerufen am 10. August 2026. Zahlen ändern sich mit der Zeit.