Creating HTML Elements

Build user interfaces using HTML markup or JavaScript DOM methods

UXP lets you create UI elements in two ways: define them in HTML or create them dynamically with JavaScript. Both approaches work for Panel plugins, while Command plugins can only create modal dialogs using JavaScript.

Prerequisites

Before you begin, make sure your development environment uses the following versions:

Premiere v25.6 or higher
UDT v2.2 or higher
Manifest version v5 or higher

Example: Using HTML Markup

Define your UI structure in HTML, then control it with JavaScript.

index.html

index.js

styles.css

<button id="showDialog">Show Dialog</button>

<dialog id="sampleDialog">
  <div>
    <h1>Hello! 👋</h1>
    <p>A dialog built using HTML tags</p>
  </div>
</dialog>
Copied to your clipboard
<button id="showDialog">Show Dialog</button>

<dialog id="sampleDialog">
  <div>
    <h1>Hello! 👋</h1>
    <p>A dialog built using HTML tags</p>
  </div>
</dialog>

const showDialogBtn = document.getElementById("showDialog");
showDialogBtn.addEventListener("click", () => {
  const dialog = document.getElementById("sampleDialog");
  dialog.show();

  dialog.addEventListener("cancel", () => {
    console.log("Dialog dismissed");
  });
});
Copied to your clipboard
const showDialogBtn = document.getElementById("showDialog");
showDialogBtn.addEventListener("click", () => {
  const dialog = document.getElementById("sampleDialog");
  dialog.show();

  dialog.addEventListener("cancel", () => {
    console.log("Dialog dismissed");
  });
});

#sampleDialog > div {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 400px;
  align-items: center;
  color:#DDD;
}

h1 { color: #FFF; }

#sampleDialog > div > p {
  margin-top: 30px;
}

Copied to your clipboard
#sampleDialog > div {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 400px;
  align-items: center;
  color:#DDD;
}

h1 { color: #FFF; }

#sampleDialog > div > p {
  margin-top: 30px;
}

Sample dialog created with HTML markup

Example: Using JavaScript Only

Create and style elements dynamically using JavaScript DOM methods.

index.html

index.js

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <button id="showDialog">Show Dialog</button>
  </body>
</html>

Copied to your clipboard
<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <button id="showDialog">Show Dialog</button>
  </body>
</html>

const showDialogBtn = document.getElementById("showDialog");
showDialogBtn.addEventListener("click", () => {
  // Create dialog element
  const dialog = document.createElement("dialog");


  // Create container
  const div = document.createElement("div");
  div.style.display = "flex";
  div.style.flexDirection = "column";
  div.style.height = "300px";
  div.style.width = "400px";
  div.style.alignItems = "center";
  div.style.color = "#DDD"; // Apply UXP host text color

  // Create header
  const header = document.createElement("h1");
  header.textContent = "Hello! 👋";
  header.style.color = "#FFF";
  div.appendChild(header);

  // Create paragraph
  const para = document.createElement("p");
  para.textContent = "A dialog built dynamically with JavaScript";
  para.style.marginTop = "30px";
  div.appendChild(para);

  // Assemble and show
  dialog.appendChild(div);
  document.body.appendChild(dialog);
  dialog.showModal();

  dialog.addEventListener("cancel", () => {
    console.log("Dialog dismissed");
  });
});
Copied to your clipboard
const showDialogBtn = document.getElementById("showDialog");
showDialogBtn.addEventListener("click", () => {
  // Create dialog element
  const dialog = document.createElement("dialog");


  // Create container
  const div = document.createElement("div");
  div.style.display = "flex";
  div.style.flexDirection = "column";
  div.style.height = "300px";
  div.style.width = "400px";
  div.style.alignItems = "center";
  div.style.color = "#DDD"; // Apply UXP host text color

  // Create header
  const header = document.createElement("h1");
  header.textContent = "Hello! 👋";
  header.style.color = "#FFF";
  div.appendChild(header);

  // Create paragraph
  const para = document.createElement("p");
  para.textContent = "A dialog built dynamically with JavaScript";
  para.style.marginTop = "30px";
  div.appendChild(para);

  // Assemble and show
  dialog.appendChild(div);
  document.body.appendChild(dialog);
  dialog.showModal();

  dialog.addEventListener("cancel", () => {
    console.log("Dialog dismissed");
  });
});

Sample dialog created with JavaScript

Creating Spectrum Components

You can use document.createElement() to create Spectrum UI elements dynamically:

// Create a Spectrum button
const button = document.createElement("sp-button");
button.textContent = "Click me";
button.setAttribute("variant", "cta");
document.body.appendChild(button);
Copied to your clipboard
// Create a Spectrum button
const button = document.createElement("sp-button");
button.textContent = "Click me";
button.setAttribute("variant", "cta");
document.body.appendChild(button);