Console log

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

Davide Barranca —  — 5 Comments

This tip covers how to pass Objects from Photoshop (the JSX file) to the HTML Panel.

Panels technology doesn’t allow (for the moment) to communicate from the JSX to the HTML except via function return (see Tip #3).

In order to successfully pass Objects, you need to include json2.js in the JSX and stringify the Object as a JSON Object. Then, in the HTML Panel you must parse the JSON Object in the callback.


This panel has just one button: it triggers a function in the JSX that returns an Object, which is then parsed and logged in the console. In order to follow the demo code, you’d better know how to debug a panel (Tip #1), evaluate external JSX  code (Tip #2) and have a good grasp on how primitive data is passed from JSX to HTML (Tip #3).


The usual bare code stripped from boilerplate by David Deraedt.


In the Javascript it is first declared the loadJSX() function (hardwired to look in the jsx/ folder), called in the init() in order to evaluate in the Photoshop context the json2.js library. Mind you, ExtendScript doesn’t support JSON natively so the original library must be included. I’ve used the commented version by Douglas Crockford, beware that minification in ExtendScript can be tricky.

I’ve provided to the CSInterface.evalScript() a callback as an anonymous function, which parses the result as a JSON Object (see next section).


Here the sendObjToHTML() is declared: it first builds an Object literal with arbitrary data (you’ll fill it with useful, actual stuff: Photoshop active Document’s width, height, ecc.); then the Object is returned as a JSON (stringified) Object. This very Object is the result argument in the anonymous callback in the main.js above.

When the panel is open in Photoshop – provided you’ve set things according to Tip #1 – open Chrome (or Safari, or Firefox) and go to localhost:8088 or whatever port you’ve opened in the .debug file.

Print Friendly, PDF & Email

5 responses to HTML Panels Tips: #5 passing Objects from JSX to HTML

  1. thanks, Davide,

    shouldn’t the second line be removed?
    var o = JSON.parse(result);
    var o = result;


  2. Sergey Kritskiy July 18, 2014 at 2:37 PM

    Hi Davide,
    I wonder if you can help me out: I wanted to use properties from the jsx object in the main.js but I can’t seem to find a way to access them outside evalscript function scope:
    Do I need to get them somehow differently?

    • Sergey, this is due to the async nature of the evalScript(). What happens is that in fact the script is evaluated, then the pointer goes to the next line – the outer for loop, which output nothing. I’m afraid we have to work in a pure callback fashion.

      • Sergey Kritskiy July 18, 2014 at 5:31 PM

        Thanks, got it! In the end I’ve just put properties to html element in callback and than read from it afterwards :S

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="">