Spectrum Web Component

Since UXP v7.0

To understand Spectrum Web Components (popularly known as SWC), you must first familiarize yourself with

• Web components: HTML5 Web technology that lets you define custom HTML tags.
• Spectrum: An open-source design language and guidelines provided by Adobe.

Spectrum Web Components are open-source Adobe Spectrum-styled Web Components. UXP v7.0 introduces the support for Web Components and Spectrum Web Components (SWC).

Getting started

Step 1: Enable SWC in manifest.json

• Use manifestVersion version 5 or above
• Enable the enableSWCSupport feature flag

"manifestVersion": 5,
 "host": [
   {
     "app": "PS",
     "minVersion": "24.4"
   }
 ],
 "featureFlags": {
   "enableSWCSupport": true
 }

Step 2: Install the component. For example,

npm install @swc-uxp-wrappers/button

Step 3: Import the component

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

<sp-button variant="primary">I'm a button</sp-button>

Sample plugin

The following resources are available for you to get started quickly

Command line Templates

Use command-line tools (starter templates) for setting up a new UXP-based React/Vanilla app with SWC bundling. It helps you quickly scaffold a project optimized for building UXP plugins using SWC.

• Vanilla starter template
• React starter template

Photoshop

• Photoshop SWC starter plugin
• Photoshop React-based SWC starter plugin (since UXP v7.3).

InDesign

• InDesign SWC starter plugin
• InDesign React-based SWC starter plugin (since UXP v7.3).

Make sure you follow the README of the above plugins.

List of supported SWC

Refer to the Github page for the list of the components and their variants. Note With UXP v8.0.0, all the SWC components in UXP are locked to version 0.37.0. Note Apart from the components specific known issues, RTL direction parameter does not work with sp-theme across components.