React Starter Template

Photoshop UXP Plugin API
,
1

: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!

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.

image
image934×1978 136 KB

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!

9 Likes
2

Hi Justin,

Nice and useful work :wave:

/Karoly

3

Hi,

after changing api to version 2 I got this error

index.js:29818 The above error occurred in the <sp-link> component:

    at sp-link
    at Link (index.js:36400:67)
    at sp-body
    at Body
    at Typography
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ index.js:29818
index.js:33003 Uncaught r_message: "Plugin is not permitted to launch external applications. Valid manifest entry is required."_name: "Security Error"code: 
(...)message:
(...)name:
(...)stack: 
"Security Error: Plugin is not permitted to launch external applications. Valid manifest entry is required.\n    at new <anonymous> (uxp://uxp-internal/platformjs_scripts.js:1:4114)\n    at Object.<anonymous> (uxp://uxp-internal/platformjs_scripts.js:1:4040)\n    at r (uxp://uxp-internal/platformjs_scripts.js:1:129)\n    at e.exports.<anonymous> (uxp://uxp-internal/platformjs_scripts.js:1:3550)\n    at Object.<anonymous> (uxp://uxp-internal/domjs_scripts.js:2:659391)\n    at n (uxp://uxp-internal/domjs_scripts.js:2:129)\n    at Object.ClassTypeFn (uxp://uxp-internal/domjs_scripts.js:2:655364)\n    at s (uxp://uxp-internal/domjs_scripts.js:2:45565)\n    at Object.getClassByElementName (uxp://uxp-internal/domjs_scripts.js:2:46034)\n    at G (uxp://uxp-internal/domjs_scripts.js:2:112600)

anyone know how to fix that?

4

Change manifestVersion back to 4 instead of 5
I had same issue and I think that was the solution

1 Like