Learn how to prototype web and mobile apps

How to reuse content in your interactive prototypes with Templates

Learn how to reuse content in your interactive prototypes with the help of Templates. This tutorial provides an introduction to templates and how you can use them.

These will make it quicker and easier to apply your corporate image and maintain consistency with your design.

Templates are a very useful tool for creating prototypes quickly and applying global changes to them, as they centralize the content and the events shared by several screens. They also set default styles (colors, border types, fonts, etc.) for all the prototype’s components.

Reuse content in your web and mobile prototypes - Template header and side bar

The Templates tab contains all the templates of a prototype: you can click on any of them to access its content and work on it as if on a screen. The widgets and the events that you include in a template are shared among all the screens that use that specific template.

To create a template, click on the “+” button in the Templates tab. To assign it to a screen, click on that screen in the outline tab, go to the Properties tab and change it there.

Create templates in your web and mobile prototypes

You can set a template as the default component or style by right clicking on it and marking it ‘Set as default template’. Keep in mind that the default template is applied to all new screens.

You can define the widgets default styles with templates. Just right click on the template and select ‘Edit Template Style’.

Set default styles in web and mobile prototypes with templates

Alternatively, choose a widget on the screen, go to the Properties tab, click on the options settings in the top right of that tab, and select ‘Set as default style for this widget’.

Set default style for widgets in your web and mobile prototypes

Finally, you can add events to templates in a number of ways:

  • Add events to elements within a template
  • Add events to elements in a screen with any of your default templates, or templates you have created yourself, as the event target
  • Add multi-target events to elements within templates


Next tutorial > Global changes on pieces of content: Masters


  1. Ivan

    September 18, 2014 at 1:57 am

    Can you override template elements on individual screens once they have been applied? ie: remove one element from a page with a template applied to it without effecting the original template. Will widget styles auto update to existing widgets with the applied style when they are modified?

    • admin

      October 8, 2014 at 2:48 pm

      Yes, just place the element inside the screen on top of the element in the template.

  2. Luke

    October 23, 2014 at 2:08 pm

    @admin is that a for-real answer? “Yeah, just cover them” … lol ..

    I have a template that includes a header which obeys various responsive rules. In order to cover that header I’d need to re-implement the header and its rules on every page… which defeats the purpose of including the heading in the template… which, by extension, defeats the purpose of templates all together. Why not just copy and paste?

    What blows my mind about Justinmind Prototyper is how it has so many awesome, clever, and insightful features.. but then completely ignores several core fundamentals. I mean, its obvious you guys are talented software developers… I can’t understand how you missed some of this stuff.

    Centered backgrounds, % (of parent) values for size and position, float left/right/center, per-instance template variables, etc, etc.. this is core stuff for me, how is this not being insisted upon by everyone else? Weird…

  3. Mithoo

    January 29, 2015 at 3:56 pm


    I am trying to make a home page layout for a website in JustInMind. I just need help with how to make a nav bar to go with the header and I am not sure which of the available widgets to use. Need some help / suggestion.


    • Lidia Rodriguez

      March 6, 2015 at 10:25 am

      Try using the ‘Menu’ widget from the web library

  4. Antonio

    June 18, 2015 at 9:32 am

    Is there any possibilities that the template content is showed above and not under the page where the template is being posted?

    • Djoeni

      August 14, 2015 at 7:59 am

      Good question, did you receive any answer? I am also having this issue!

      • Lidia Rodriguez

        August 14, 2015 at 8:41 am

        Hi Djoeni. Yes, you have to activate the ‘Always on top’ option on the template elements you wish to have on top.