How to integrate jscolor with playcanvas?

I want to integrate jscolor with pc, it works outside pc I checked but when I imported the jscolor.js then I dont see this library is working because the input acts like input not color picker
so the script order wrong or what?
I tried also from cdnjs in external scripts in settings

If you are adding the input color element using a script, then you need to manually install jscolor on that element.

Check the jscolor docs on this:


Or manually create a JSColor instance:

var myPicker = new JSColor(<targetElement>, <options>)

JSColor also sets up events on document load to initialize. So either you have to add the library to load before/after engine so it’s included in the document before it finishes loading.

Or manually call jscolor.init() at runtime.



I get this:

Color picker already installed on this element

class PickerFramebuffer extends pc.ScriptType{

    initialize(){, this.onSelect, this);
        this.picker = new pc.Picker(, 1024, 1024);

        this.container =[0].script.ui.element;
        const jscolor = new JSColor(this.container);


Are you trying to create a JSColor on the same element more than once?

ok I try to init the jscolor outside of framebuffer picker