Tech Stack Foundations

Learn about the essential technologies you need to be familiar with to develop UXP plugins

Programming Languages

To begin, a basic understanding of web technologies like JavaScript, HTML, and CSS is essential. There are excellent resources available online that can teach you the fundamentals. Here are some of our recommendations, but feel free to explore other sources as well.

data-slots=text

Most tutorials assume that you are using Web technologies in a browser or a server-side JS engine like Node.js. While it supports modern JavaScript syntax, UXP is not a standard browser environment; not all the HTML Elements, CSS classes, or JavaScript APIs will be available in the UXP world.

Reading Materials

Start by getting acquainted with the basics of JS, HTML, and CSS.

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

Apart from the basics, the following additional topics will also come in handy. You need not go through each of them right away, but do bookmark them for later as it will help you understand the code snippets much more easily.

Document Object Model or HTML DOM and the global window and document object
DOM Events
Adding CSS
CSS layout using Flexbox
Promises
Async/await
Different ways of declaring JavaScript functions: traditional style vs. fat arrow

Debugging

One of the easiest ways to identify issues with these technologies is by using the Chrome browser's Debug Tool (CDT). The UXP Developer Tool (UDT) implements the same engine for debugging; a high-level understanding of CDT will be very useful skill to possess.

Familiarize yourself with the Chrome Debug tool, especially the ways to access DOM, modify CSS and debug JavaScript by adding breakpoints.

Frameworks

Besides JavaScript, HTML, and CSS, the industry offers various frameworks that act as an abstract layer on top of Web technologies, aiming to provide you with a quicker, and more efficient way of writing reusable code.

React, Vue, Angular, and Svelte are among the most popular options. Using these frameworks is optional and is your personal choice.

Any additional tool that expands the capabilities of Vanilla (i.e., plain) JavaScript will require additional tools to run:

Node.js: a JavaScript runtime environment, also used as a backend server in Web environments. Go to the Node.js download page, download the installer for your platform, and run it. This will also install npm.
npm: a Package Manager bundled with Node which helps manage your project's dependencies—i.e., other code and files that are needed to make your plugin work.
yarn: an alternative Package Manager for Node. To install yarn you'll need to have npm installed first—see above. Then, use this command:
```
npm install yarn --global
```

Static Analysis Tooling

To assist with writing UXP plugins, static analysis tools such as ESLint allow you to check for common problems with writing JavaScript. ESLint integrates nicely with continuous integration (CI) tools and many popular code editors to let you catch these problems and fix them earlier in the development process.

In addition to a set of recommended rules for analyzing code, ESLint also supports a wide variety of plugins and configurations that you can easily add into your project. This becomes especially helpful when using other web frameworks to make sure your plugin adheres to best practices with those frameworks.

System Requirements

Finally, make sure your system meets the minimum requirements to run the Premiere application.