Tweaking and writing your own templates in Tumult Hype 4

Max Ziebell
Hype Satellite
Published in
3 min readSep 15, 2020
Literally letting the Genie out of the bottle on this one as we are tweaking the bundle Hype template.

This little helper allows you to replace the default Hype template with a custom one. This can be useful if you need a certain HTML wrapper or some other project specific settings you don’t want to reapply on every export.

That said, the disclaimer on this is that to use our custom template we need to inject it into the Hype 4 application bundle. This can be done manually by inspecting the application package and fiddling around with files. As this is a little technical and also might introduce errors (like forgetting to make a proper backup etc.) this little application was scripted.

It is based on JXA (JavaScript-based Mac Automation Scripting) and the source is included for anybody interested in that aspect

Using Hype Template Genie to manage custom templates for your projects

Hype Template Genie dialog
Hype Template Genie dialog

Using the application helps in streamlining the process of template management. You would keep your template files bundled with your projects or in a central template folder. The main thing to keep in mind with this approach is that Hype Template Genie sets the template globally. So, all projects you open and work on will use the presently set template. This is just something to keep in mind before exporting a project. Meaning whenever you need a specific template you would need to apply it beforehand if not already set. Reapplying a template may also become necessary when Hype automatically updates itself. Furthermore, you can restore the original template at any time hopefully giving you the confidence to experiment and use this approach. Apart from some dialogs and some file copying this little helper doesn’t do much to your hard disk but even so, it is provided under MIT with no warranty (source for review is included).

Download Hype Template Genie from Gumroad

Download from https://gum.co/dZiApB

Quickstart guide

Give Hype Template Genie a try with a sample template

① Launch and chose Set new template and locate SampleTemplate.html
② You’re done. The new template is used for export and preview.

Restore the original template

① Launch and chose Original template & Restore original template
② The original template is restored and used again for export and preview.

Create and activate your own template

① Launch with Original template & Fetch a copy of the original template.
② Use the template as a starting point and tweak it to your hearts desire
③ Launch the Genie and chose Set new template and locate your template
④ You’re done. The new template is used for export and preview.

Template placeholder

Please visit my other project Hype Cookbook to learn about the template placeholders used in these templates. Most of them should be pretty self-explanatory and you would only need all of them if you want to create a general purpose template. In most cases, a template might become pretty specific and you can remove all the options you don’t need.

Hope this helps!

--

--