Tech Stack Foundations

What you write in

A UXP plugin is built from the web technologies you already know, running on a single runtime that Adobe ships inside every UXP-enabled host application:

HTML defines your panel's structure.
CSS styles it. Adobe's Spectrum design system gives you components that match the host UI.
JavaScript holds your logic and calls the host's APIs.

data-slots=text

UXP is not a standard browser environment. Most tutorials assume you're using Web technologies in a browser or a server-side JS engine like Node.js. While UXP supports modern JavaScript syntax, not all HTML elements, CSS classes, or JavaScript APIs available in a browser will be available in UXP. Check the UXP API reference for the exact elements, styles, and modules that are supported.

The two surfaces

UXP work falls into two surfaces that share the same runtime:

Panels render UI inside the host application. A panel is the visible, interactive part of a plugin.
Scripts run logic against the host, with or without UI.

Because both use one engine, the code, libraries, and patterns you learn carry across panels, automation, and every other UXP-enabled Adobe application.

Where to learn JavaScript, HTML, and CSS

If you're already comfortable with all three, skip ahead. If not, here's where to start, and what to come back to once you're writing real plugin code.

Start here:

Introduction to JavaScript and its basics
JavaScript versions and ECMAScript 2015 (ES6)
HTML basics
CSS basics, syntax, and selectors

Come back to these once you're writing real plugin code:

The DOM and the global window and document objects
DOM events
CSS layout with Flexbox
Promises and async/await
Traditional function syntax vs. arrow functions

Debugging

The UXP Developer Tool (UDT) debugs plugins with the same engine as Chrome DevTools (CDT), so CDT skills carry straight over. If you haven't used it before, the Chrome DevTools docs cover the basics: accessing the DOM, modifying CSS, and debugging JavaScript with breakpoints.

Frameworks and tooling

Frameworks like React, Vue, Angular, and Svelte all run in UXP panels. None of them are required: use one if you're already comfortable with it, or your panel's UI is complex enough to benefit from components and state management. For anything simpler, the plain quick-starter template covers it (react-quick-starter if you want React specifically).

Using a framework means adding build tooling on your machine. It compiles your framework code into plain JS/HTML/CSS before it loads into the plugin.

data-slots=text

UXP itself doesn't run Node.js or expose Node's APIs at runtime. Node here is strictly a local, build-time dependency.

Node.js: a JavaScript runtime environment you install locally to run npm/yarn and your framework's build tooling. Download the installer from the Node.js download page and run it; this also installs npm.
npm: a package manager bundled with Node that manages your project's dependencies.
yarn: an alternative package manager for Node. Install it with:
```
npm install yarn --global
```

Static analysis tools like ESLint catch common JavaScript problems before you run the code, and integrate with most code editors and CI pipelines. See Linting with ESLint to set it up for UXP, and TypeScript and IntelliSense to add autocomplete and type checking, in plain JavaScript or TypeScript. Framework-specific ESLint plugins can also enforce that framework's best practices for you.

Next steps

Set up your developer tools if you haven't already.
Ready to write code? Go to Build Your First Plugin.