Zum Hauptinhalt springen

Rendering Architecture

heycreo nutzt einen gemeinsamen Renderkern und zwei Export-Ziele. Studio- Vorschau und beide Backends teilen sich Layout-, Text-Fit- und Element- Logik — was du im Editor siehst, soll dem Export entsprechen.

Übersicht​

packages/studio-domain     Editor-Dokumentmodell
         │
packages/render-engine     gemeinsamer Renderkern
         │
    ┌────┴────────────────────┐
    │                         │
renderers/browser          renderers/remotion
(Playwright HTML)          (Remotion-Bundle)
PNG / JPEG / WebP / PDF    MP4 / WebM
    │                         │
    └──────────┬──────────────┘
               │
         frontend Studio
         (Live-Canvas / Player)
PfadRolle
Studio (frontend)Live-Vorschau und Bearbeitung
packages/render-engineElemente, Auto-Layout, Text-Fit, Animation
renderers/browserSingle-File-HTML für Bild/PDF (und Mobile-WebView)
renderers/remotionComposition-Bundle für Video-Export

Der API-Worker wählt das Ziel über render-selector: Bilder/PDF über den Browser-Renderer; Video über Remotion, wenn das Bundle verfügbar ist.

Live-Vorschau​

Beim Bearbeiten siehst du Änderungen sofort:

  • Echtzeit-Updates bei Text, Bildern und Layout
  • Interaktives Editing mit direktem Feedback
  • Derselbe Renderkern wie beim Export

Export​

  • Bilder: PNG, JPEG, WebP über den Browser-Renderer
  • PDF: Browser-Renderer (+ optional CMYK-Prepress via Ghostscript)
  • Video: MP4 / WebM über Remotion
  • Batch: mehrere Sizes/Exports über die Worker-Queues

Konsistenz​

  • Gemeinsamer Kern unter packages/render-engine
  • Visual-Regression-Snapshots sichern beide Render-Ziele in CI ab
  • Vorschau und Export sollen gleich aussehen — Abweichungen bitte melden

Best Practices​

  • Zuerst Vorschau — Design im Studio prüfen, bevor du exportierst
  • Verschiedene Textlängen testen — besonders bei Auto-Resize
  • Exports stichprobenartig prüfen, wenn sich Engine oder Renderer ändern

Siehe auch​