# Photoshop React UXP Typescript starter

**URL:** <https://forums.creativeclouddeveloper.com/t/photoshop-react-uxp-typescript-starter/4940>\
**Category:** UXP Plugin API\
**Created:** [July 13, 2022, 6:53pm UTC](https://forums.creativeclouddeveloper.com/t/photoshop-react-uxp-typescript-starter/4940 "2022-07-13T18:53:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bbogdan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/bbogdan/32/2272_2.png) [@bbogdan](https://forums.creativeclouddeveloper.com/u/bbogdan)\
**Post date:** [July 13, 2022, 6:53pm UTC](https://forums.creativeclouddeveloper.com/t/photoshop-react-uxp-typescript-starter/4940/1 "2022-07-13T18:53:40Z")

</div>

Hi everyone,

I know that this thread is already mentioned before but I was wondering is there any official Photoshop UXP React Typescript starter kit that supports the “spectrum web components” out of the box?

So I actually plan to use the etc. inside the functional components without any warnings like:  
`Property 'sp-button' does not exist on type 'JSX.IntrinsicElements'`  
I know that there are these repositories:

- [GitHub - thejustinwalsh/uxp-starter-react: Complete starter for writing UXP plugins using React and Typescript.](https://github.com/thejustinwalsh/uxp-starter-react)
- [uxp-photoshop-plugin-samples/typescript-webpack-sample at main · AdobeDocs/uxp-photoshop-plugin-samples · GitHub](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/typescript-webpack-sample)

The second is the official one but it lacks the support for the spectrum web components when I tried to use them out of the box.  
I started with the setup created by @DavideBarranca (I got it from his book) and I added some more packages like “ts-loader”, and “typescript” as dev dependencies and I also added them into the webpack config file so everything builds. I guess I am missing the types for the spectrum web components.

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [July 13, 2022, 8:09pm UTC](https://forums.creativeclouddeveloper.com/t/photoshop-react-uxp-typescript-starter/4940/2 "2022-07-13T20:09:50Z")

</div>

You can get rid of the warning by extending the `JSX` namespace:

```auto
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'sp-dropdown': any;
      'sp-textfield': any;
      'sp-menu': any;
      'sp-menu-item': any;
      'sp-slider': any;
      'sp-label': any;
      'sp-picker': any;
      'sp-popover': any;
      'sp-action-button': any;
      'sp-overlay': any;
      'sp-icon': any;
      // ...
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![bbogdan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/bbogdan/32/2272_2.png) [@bbogdan](https://forums.creativeclouddeveloper.com/u/bbogdan)\
**Post date:** [July 13, 2022, 9:07pm UTC](https://forums.creativeclouddeveloper.com/t/photoshop-react-uxp-typescript-starter/4940/3 "2022-07-13T21:07:24Z")

</div>

Yep. That was it 🙂 added the typings inside the .d.ts files. Thanks @simonhenke

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [July 13, 2022, 9:53pm UTC](https://forums.creativeclouddeveloper.com/t/photoshop-react-uxp-typescript-starter/4940/4 "2022-07-13T21:53:59Z")

</div>

Just to be clear, UXP does not support [_Spectrum Web Components_](https://opensource.adobe.com/spectrum-web-components/) per se. Although there are similarities, but UXP supports only _Spectrum UXP_ (check [Typography](https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-spectrum/Typography/) and [UI](https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-spectrum/User%20Interface/)), which in quite a bit of cases has significant differences, even for seemingly the same components. And, IMO, [this Design UI documentation](https://developer.adobe.com/photoshop/uxp/2022/design/user-interface/) is completely useless and misleading

---

<div class="post-metadata">

**Author:** ![bbogdan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/bbogdan/32/2272_2.png) [@bbogdan](https://forums.creativeclouddeveloper.com/u/bbogdan)\
**Post date:** [July 13, 2022, 10:32pm UTC](https://forums.creativeclouddeveloper.com/t/photoshop-react-uxp-typescript-starter/4940/5 "2022-07-13T22:32:30Z")

</div>

Yes. I am aware of that. I’m reading a book from Davide Barranca and I’m going by that book, step by step 🙂 and he also mentioned this and left the links for the documentation to avoid confusion. There is a lot of similar content for “almost” the same thing. Thanks, @Karmalakas for pointing this out.