React Starter Template [cross-post]

:wave:Devs!

I’ve been hard at work creating a turn-key starter template for UXP plugins using React, and it is time to share!

I originally posted this over in the Photoshop UXP Plugin API section, though the majority of the work is UXP specific and not Photoshop specific so sharing here as well.

This starter uses React, Babel, ES-lint, Prettier, and Webpack, pre-configured for both dev and production environments.

The example components included here use Typescript, but if you aren’t too keen on fighting with satisfying types, Babel is ready to transpile JSX w/ all your favorite ES6+ sugar.

Clone the repo, npm install, answer a few quick questions to configure your manifest, then run npm run watch to start a dev environment ready for launching in the UXP Developer Tool.

Use npm run build to create a production bundle then package with UXP Developer Tool to distribute.

Additionally, VS Code settings are included as well with extension recommendations to get up and running quicker.

The starter leans on these packages, so if the above loadout and tooling choices aren’t your style, grab react-uxp-spectrum for the react components and uxp-types for the TypeScript types.

I’ve tried to exercise all of the components in this starter for good coverage and start the project off with just a big panel of components.

If you find this useful, please give me some :star:’s on GitHub, open issues when you find them, and contribute back if you find any rough spots.

I am using this template as my starter for some ongoing client work and updating as I run across any updates or improvements.

:rocket:Happy coding and UXP Plugin Development!

3 Likes