Render Queue Panel

A UXP reference panel for Adobe Media Encoder that exercises a broad set of Media Encoder UXP APIs: adding media to the render queue, updating render settings, and starting, pausing, and stopping renders.

Use it to see how each API behaves before you write your own plugin. The panel lives in the uxp-media-encoder-plugin-samples repository on GitHub.

Prerequisites

Complete Set Up Media Encoder first. It lists the required Media Encoder and UXP Developer Tool versions and covers enabling Developer Mode in the host.

This sample has a build step, so it also needs:

Tool
Version
Where to get it
Node.js
LTS (18.x or newer)
nodejs.org
Code editor
any
Visual Studio Code, Cursor, or your editor of choice

About This Sample

In the repository this panel is the media-encoder-api sample. It is written in TypeScript, so it requires a build step, and it targets Media Encoder 26.5.0 or newer (manifest v5). The sample's manifest.json and package.json define these values.

1. Clone the Repository

git clone https://github.com/AdobeDocs/uxp-media-encoder-plugin-samples.git
cd uxp-media-encoder-plugin-samples

2. Build the Sample

The media-encoder-api sample is written in TypeScript, so it has a build step:

cd sample-panels/media-encoder-api/html
npm install
npm run build

npm run build deletes the old build-html/ folder, copies the source from html/ into build-html/, compiles the TypeScript, and runs a small post-build fix.

data-variant=warning

data-slots=text
build-html/ is what UDT loads, not html/. Point UDT at sample-panels/media-encoder-api/build-html/manifest.json. If you edit files in html/ but forget to rebuild, your changes will not show up. This is the most common first-run mistake.

Other useful commands:

npm run lint    # run ESLint before committing
npm run clean   # delete build-html/
npm run copy    # copy source to build-html/ without compiling (for HTML-only edits)

3. Load the Plugin in Media Encoder

The loading flow is the same for every sample:

  1. Launch Media Encoder (or Media Encoder Beta).
  2. Launch the UXP Developer Tool.
  3. Click Add Plugin and select the sample's manifest.json (for media-encoder-api, the one in build-html/).
  4. Click Load, or Load & Watch to enable automatic reloads while editing source files.

Loading the Media Encoder sample panel in the UXP Developer Tool

The panel then appears in Media Encoder under Window > UXP Plugins.

The Media Encoder sample panel: Console, Render Queue, and Render Options

How the media-encoder-api Sample Works

Click a button in the panel to run an API call, then find the code behind it in html/src/. The panel also has a built-in console area at the top of the UI that logs the result of each button click, so you do not always need DevTools open.

Each file in src/ covers one part of the API:

File
What it covers
render-queue.ts
Manage the Render Queue
utils.ts
Shared logging helper used across all modules

Because the sample is TypeScript, UDT's Watch mode will not auto-reload your changes. The development loop is:

  1. Edit files in html/src/ or html/index.html.
  2. Run npm run build.
  3. Click Reload in UDT.

If you only changed index.html and no .ts files, npm run copy plus a reload is faster than a full build. Changes to manifest.json always need an Unload followed by a Load in UDT, not just a reload.

Debugging

Click Debug in UDT next to the loaded plugin to open a Chromium DevTools window connected to your panel, with the console, network tab, sources, and DOM inspector. The panel's built-in console area also logs each button's result directly in the UI.

For breakpoints, watch expressions, error handling, and other shared techniques, see Debug Your Plugin in the UXP Hub.

Troubleshooting

My plugin does not appear in Media Encoder.

Confirm that Developer Mode is enabled and that Media Encoder was restarted afterward, that the manifest's host.minVersion is less than or equal to your installed Media Encoder version, and that UDT detects Media Encoder in its left pane.

Do Media Encoder UXP API calls need to be awaited?

Yes. Most APIs return Promises and must be awaited (or chained with .then()). The media-encoder-api sample uses async/await consistently and is a good reference for the pattern.

How do I request file system or network access?

Declare the capabilities under requiredPermissions in your manifest.json. The media-encoder-api manifest demonstrates localFileSystem and clipboard permissions.

My changes to manifest.json are not showing up.

UDT's Watch mode only reloads source files. After editing manifest.json, do an Unload followed by a Load in UDT, not just a Reload.