Spectrum CSS in Premiere Pro CEP Panels

[TreyP123]

Is it possible to use Adobe Spectrum CSS in Premiere Pro CEP Panels?  I tried setting it up but can't seem to get it to work.

[Justin Taylor-Hyper Brew]

Shouldn't be any reason for it not to work in the latest versions of Premiere. You can also try Spectrum Web Components  and React Spectrum  if you use React.

If you want to keep using Spectrum CSS, I'd try setting it up first in a web environment to make sure it's working, then test in a CEP panel.

[Davide_Barranca]

My understanding is that the CSS alone are problematic, it'd be best to use SWC or React Spectrum as @Justin Taylor-Hyper Brew has suggested.

[TreyP123]

@Davide_Barranca @Justin Taylor-Hyper Brew Thanks so much guys! What would be the advantages or disadvantages of using Web Components vs React?

[Davide_Barranca]

SWC are possibly easier to implement in your project (and don't require you to know/use React), this is the main selling point IMHO.

SWC and React components are not two completely overlapping sets, so I'd suggest to check them out and see which one has the stuff you need in your project—there's nothing worse than realizing mid-way that you want something that's not there 😉 

[TreyP123]

Wow that SWC works really easily.  Only issue I'm having is that Textfields and Numberfields don't let me change the value.  It just stays with whatever the value I've inputted for "value=" in HTML and doesn't let me change it in the CEP Panel.  Things like checkboxes and picker let me change the value in the CEP Panel though.  Any thoughts on what I might be missing? @Davide_Barranca @Justin Taylor-Hyper Brew.

[Justin Taylor-Hyper Brew · Accepted solution]

Exactly what Davide said, if you're using React already, go with React Spectrum, it's faster to implement and more reliable.

If you're not using React, go with SWC.

[TreyP123]

So I've been diving into using Spectrum Web Components in a Premiere CEP Panel.  Most of the components seem to work well.  However, text fields and number fields don't allow the user to input any information (see attached video).  Is there a reason why a CEP Panel wouldn't allow this?

[TreyP123]

I am able to get the components to work correctly in my IDE's HTML preview after bundling the node_module, but it doesn't show up in the CEP Panel.  Is there something special I need to do to make a node module bundle work for CEP?