HypeBlendmodeEnabler 1.1 (with Thumbnail-Preview in IDE)


The latest version of the HypeBlendmodeEnabler offers thumbnail previews while working in Hype 3. I got two versions of this. One that regenerates the thumbnails as long as you are in the Hype IDE and another one that allows you to specify the scenes you want the IDE-preview. But don't worry either version doesn't takes up additional resources once you publish. If you ever need or want to re-apply the enabler on the fly call HypeBlendmodeEnabler(); from anywhere in your code. This will re-scan the document for the classes (described below) and enable them. This is only necessary if you added blendmodes after applying classes dynamicly through code. Every class you enter in the GUI before publishing is automaticly enabled the momemnt Hype renders the document. As I am still not sure how long we will need this or if either route is better I am giving you two options on Thumbnail previews as downloads.


  • Add the enabler to your project
  • To apply a blendmode use a 'Class Name' in the form of blendmode-MODE
  • MODE can be any of these: color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, overlay, saturation, screen, soft-light
  • Select the ‘Identity’ tab on the 'Inspector’panel.
  • Enter preferred blendmode in the field ‘Class Name’ (for example blendmode-soft-light )


Be aware that not all browser full support blendmodes
Info: https://caniuse.com/#search=mix-blend-mode2


Automatic Thumbnails:
HypeBlendmodeEnabler_auto_1_1.hype.zip (409,4 KB)

Manual Thumbnails:
HypeBlendmodeEnabler_manual_1_1.hype.zip (410,8 KB)

1.0 Initial release as symbol and under MIT-license
1.1 Thumbnail support and no additional function


This is a little poll to see what kind of extensions you prefer … rather for the fun of trying this functionality of the forum. Maybe some useful insights arise from here or not.

  • I like my extensions as draggable “droplets” from the library (symbols)
  • I prefer extensions as a code-snippets I manually tweak and maintain in my functions or Head-HTML.
  • Just give me self-contained .JS-files I include and then got extra functions.

0 voters