Spectrum Web Components Not Rendering Properly in UXP

Premiere Pro
1

Problem

I’m building a UXP extension for Premiere Pro using Vue 3 and trying to use Spectrum components for UI. I’m currently using native Spectrum UXP Widgets, but I need sp-tabs and sp-toast which are central to my UX design.

I understand these components are not currently in the supported @swc-uxp-wrappers list, but I’m hoping to either:

  1. Get them working now with the regular @spectrum-web-components packages, OR

  2. Understand the timeline for when they might be added to @swc-uxp-wrappers

When attempting to use basic components like sp-textfield and sp-button from @swc-uxp-wrappers (to test the approach), they are created in the DOM but don’t render properly:

  • sp-textfield: Renders but looks distorted/weird

  • sp-button: Only the text label renders, not the actual button

What I’ve Tried

1. @swc-uxp-wrappers (Current Approach)

npm install @swc-uxp-wrappers/button @swc-uxp-wrappers/textfield

import '@swc-uxp-wrappers/button/sp-button.js';
import '@swc-uxp-wrappers/textfield/sp-textfield.js';


<sp-textfield size="m" :value="text" placeholder="Enter text..."></sp-textfield>
<sp-button size="m" variant="cta" @click="handleClick">Button Text</sp-button>

Result: Elements exist in DOM (verified with console), but sp-textfield looks distorted and sp-button only shows text without button styling.

2. Regular @spectrum-web-components

Attempted with theme package and polyfills for missing UXP APIs:

  • Element.attachShadow() polyfill (Shadow DOM)

  • document.createTreeWalker() polyfill

  • CSSStyleSheet polyfill

Result: Hit “appendChild is not a function” errors and cascade of missing browser APIs. Abandoned this approach.

3. Vue Configuration

// vite.config.ts
vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('sp-')
    }
  }
})

Environment

  • Platform: UXP (Premiere Pro extension)

  • Framework: Vue 3 + TypeScript + Vite

  • Premiere Version: 25.6.4 (Build 5)

  • Package Versions:

    • @swc-uxp-wrappers/button: ^2.0.0

    • @swc-uxp-wrappers/textfield: ^2.0.0

Questions

  1. Why are the currently supported @swc-uxp-wrappers components (button, textfield) not rendering properly in Premiere Pro UXP?

  2. What’s the timeline for adding sp-tabs and sp-toast to @swc-uxp-wrappers? These are critical for my UX design.

  3. Is there a way to make regular @spectrum-web-components work in UXP without hitting constant browser API errors?

  4. Is there any additional setup required for @swc-uxp-wrappers beyond importing the .js files?

  5. Should I build custom tab/toast components with plain HTML as a temporary solution?

Any guidance would be appreciated. Even getting the basic components working would help me understand if this approach is viable for when sp-tabs and sp-toast are eventually added.

1 Like