HTML Panels Tips: #4 passing Objects from HTML to JSX

Davide Barranca —  — 9 Comments

How to pass complex Objects from the HTML Panel to a Photoshop’s ExtendScript function in a JSX file.

You may want to pack different information from the HTML Panel (for instance all the values in the GUI) in a single Object, and pass just it as a parameter to a JSX function – that the Photoshop interpreter will eventually execute.

For primitive, multiple parameters this is easily done via CSInterface.evalScript(), in the main.js:

…and providing a corresponding function in the JSX file:

How do you deal with Objects? Stringify them as JSON objects first. No need to parse them afterwards.


I use as always the boilerplate code by David Deraedt.


This is a minimal index.html with just a button.


Here I’ve hardcoded an Object literal (feel free to fill it with actual values from the HTML GUI), which is stringified as a JSON object in order to pass it as a parameter:


In the ExtendScript file I’ve provided a logging function to actually verify that the Object is interpreted correctly.

ObjectMind you: I’ve experimented importing a JSON library in the ExtendScript code (which doesn’t natively support it) and tried to var obj=JSON.parse(o); to no avail. Apparently the code is OK as it is, without it.

Print Friendly, PDF & Email

9 responses to HTML Panels Tips: #4 passing Objects from HTML to JSX

  1. Hi Davide! Thanks for these tutorials. I’m having a pretty significant issue though. The boilerplate you recommend isn’t actually working. I started a project from it, and without adjusting a thing, I launched Illustrator and clicked the main button that was supposed to run the ExtendScript routine, but nothing happens.

    Are you aware of this issue? Have I missed something? Or has there been a change to CC that broke the boilerplate, that you’re aware of?

    Thanks for any help with this!

  2. Hi! I wanted to create a slider in custom panel which changes the for eg opacity of the current layer.

    Here is what I used in HTML5

    Here is the javascript function

    run : function() {
    app.activeDocument.activeLayer.opacity = 50;

    Now can you please tell me how to link that HTML slider with this function so that user can change the opacity using the slider. Thanks alot.

  3. How do I pass a json object?

  4. Hi Davide,

    as far as I could evaluate using “JSON.parse(…)” on the ExtendScript side does not work because a parameter passed to the ExtendScript from the Panel that is a “stringified” representation of an object _is_ already an object on the ExtendScript side. So, calling “JSON.parse(param)” will fail (assuming you have included “json2” in the VM executing the ExtendScript). Instead it seems to be sufficient to just refer to “param.property” and everything is alright. The same thing, BTW, happens when passing custom events from ExtendScript to the panel, i.e. the event having a data property which is populated with an object stringified on the ExtendScript side.

  5. Hi Davide,
    How can I transfer data from index.html to JSX. In your example object defined in main.js.
    Thanks a lot.

    • Hi Cihan, data in the index.html can (and must) be gotten by the JS. There are several ways to do so, e.g. if you have an input of type text and id equals to “foo”, you can document.getElementById('foo').value.

  6. Hi Davide,
    Thank you for your great article.
    Do you know how can I transfer data include Chinese characters from JS to JSX?
    Here is my result .
    JS “你好”—>JSON Object—> JSX “??????”
    Thank you for any help.

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">