HTML Panels Tips: #9 Persistence

Davide Barranca —  — 7 Comments

How to make the HTML Panel’s session persist even if the panel is closed in Photoshop.

Each time an HTML Panel is launched, its GUI resets to the default values and initialization is performed. This happens not only in between Photoshop sessions, but also when the Panel is collapsed, iconized or closed. Today’s tip shows you how to make the Panel persistent, as we did back in Flash land with:

The mechanism now in HTML land requires Event dispatching – see Tip #7: Photoshop Events Take 1 for the details.

Code on GitHub

Please find here the complete code for this example.



This panel has a switch that enables Panel’s persistence, and a bunch of other switches that have no effect other than show persistence in action.

When the Persistent is ON, you can play with the other ones and collapse/close then reopen the panel: the secondary switches are shown in the state they were before. Conversely, if Persistent is OFF, each time the panel is opened all the switches are reset.


I make use of the Topcoat CSS Library (refer toΒ Tip #6Β for the implementation).


The main.js file is where things happen. A Persistent() function is called every time the persistenceSwitch changes: it sets up and dispatches a CSEvent (see the highlighted lines), which is bound to the extension’s id (gExtensionId variable).

This makes the Panel persistent or… “unpersistent” πŸ˜‰

Print Friendly

7 responses to HTML Panels Tips: #9 Persistence

  1. is there any documentation for the CSInterface ? Also, persistence is only valid through one photoshop session. Closing PS also resets the Panel data. Is there a solution for panel data to persist after closing PS, except localStorage ? I’ve been using that sucessfully, but I can’t seem to find a way to save on closing of the panel or , heck, even PS. Do you have any ideeas ? Thank you !

    • Hi Sorin,
      to date (Feb 2014) there’s no CSInterface documentation except the comments within the library itself. I’ve never tried localStorage myself – too many things still to learn πŸ˜‰ – the only workaround I can think of is to write to some local .ini or .xml when the panel is closed (capturing the event), and read back there in the next session.

      • Thanks a lot. I’ve been digging into this because I need to save the contents of a panel each time the panel or Photoshop closes, so as not to have to force the user to click a “Save” button each time before he exits the app. Where would I need to look for the ID of the Event called when the panel is collapsed ? I noticed you had added some ID’s in this here tutorial: Could you tell me how you got them or how you found them out ? Btw: localstorage & sessionstorage is wonderful for saving information to it if you need it persistent and is less of a hassle. The only drawback is the fact that storagespace is limited and you have to garbage collect before each save (clean up the cache then do the actual save).

        Also, do you have any ideea when AS panel support is going to be dropped ? As far as I read, this should happen mid 2014 till the end of 2014.

        Thanks & Best regards !

        • Hi Sorin! The IDs you’re mentioning are for Photoshop-related events (apply a filter, move a layer, etc), while you’d need HTML Panels related events – that’s in my todo list for a new Tip: I’m sure I’ve seen something related to those events in the forums to use as a starting point but I can’t find it anymore. Bad habit of not saving bookmarks immediately πŸ˜‰
          Anyway, Photoshop events ID come from ScriptingListener output (the ugly ActionManager code).
          AS panels support: like you, I’ve read it will be sometime about mid-2014 yet no actual (more specific) deadline has been declared as far as I know. It’s a fair bet to guess it will coincide with some major PS upgrade.

  2. Hi, thanks for your blog posts, they are really helpful!

    However, I did not manage to get persistence working for the HTML panel I am developing. I tried to create minimalistic example by following your blog post as closely as possible, without success.

    The minimalistic version is here:
    I am testing it on Photoshop CC 14.0 x64 on Mac and Windows.

    Any thoughts on what I did wrong?

    • Davide pointed me right way, it was photoshop version which was causing it – on 14.2.1 it works, both Windows and OS X.

  3. Hi Davide. I’m start trying to get -automatic (without the need of an on/off switch)- persistence in a panel with various draggable divs without luck yet. Do you think it’s possible?

    PS: No more troubles with the keyboard focus after the CEP 5.2 update πŸ™‚

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