Migrating a local Node.js + Puppeteer workflow from CEP to UXP (Premiere Pro): Need architectural guidance
Hello everyone,
I am a sports video editor and a self-taught coder. For the past few month, I’ve been running a custom local broadcast console inside Premiere Pro to generate dynamic overlays (scoreboards, team rosters, timers) for rugby match highlights.
Because traditional MOGRTs were too heavy for rapid iteration and batch exporting, I built a hybrid architecture using CEP, React, and a local Node.js server. I am now looking to migrate this entire project from CEP to UXP to future-proof the tool, but I need some guidance to ensure I can port it without breaking my core rendering engine.
My Current CEP Architecture (How it works today)
Since there is no native way to render HTML/CSS animations into a transparent video or image sequence directly within the Premiere Pro panel, I had to build an external renderer:
- Frontend: The CEP panel runs a React 18 / TailwindCSS UI where I configure the match data.
- Local Server: The panel communicates with a local Node.js server running in the background.
- Headless Rendering (The core hack): The Node server triggers a headless Chromium instance (Puppeteer). Puppeteer loads the specific React component, plays the CSS animation, and extracts a 4K PNG frame with an Alpha channel (omitBackground: true) at the exact peak of the animation.
- Timeline Injection: The CEP panel uses CSInterface.evalScript to call an ExtendScript function that imports the resulting .png file and places it directly onto the V2 track of the active sequence.
Note: This entire workflow runs 100% offline via the local FileSystem, and a single render/injection loop takes about 1.5 seconds.
The Goal: Migrating to UXP
I want to transition the panel UI and the scripting logic to UXP to benefit from the modern V8 engine and Spectrum UI, but I must keep my external Node.js + Puppeteer pipeline intact (as it is the only way to get my HTML-to-PNG-Alpha renders).
My Questions for the UXP Experts
To ensure a 1:1 migration without regressions, I would appreciate your insights on the following points:
- Localhost Communication: In CEP, I used standard XHR/fetch to talk to my local Node server. In UXP, are there any specific manifest permissions or limitations I need to be aware of to make standard fetch() calls to a localhost port?
- Replacing ExtendScript for Timeline Injection: I need to replace my .jsx script. Does the current Premiere Pro UXP DOM fully support importing a media file from a local absolute path and inserting it at the playhead on a specific video track (e.g., Video Track 2)? If so, could you point me to the relevant UXP classes/methods for track targeting?
- File System Access: My Node server writes the PNG to a local folder, and Premiere needs to read it. Using the UXP fs module, what is the cleanest way to pass an absolute file path to the Premiere UXP DOM for import without triggering user-facing file picker dialogs?
Any advice, code snippets, or pointers to the specific Premiere Pro UXP documentation for sequence/track manipulation would be incredibly helpful.
Thank you in advance for your time and expertise!
Best regards,
Jérôme
