Re-use content using Templates

The template system is a very useful tool for creating prototypes quickly and applying global changes. It centralizes the content and the interactions shared by several screens. It also defines the default style for each widget (colors, border types, fonts, etc.) for the screens that use that template.


In the above illustration, the header and the side navigation bar are the same on all screens. If you would like to prototype it with Justinmind Prototyper, we recommend that you create the header and the side navigation bar on a template, and draw the other content on the screens of the prototype.

The Templates tab contains all the templates of the prototype. Click on them to access the content. You can work on a template as if it in a screen. The widgets and even the events that you incorporate in a template are shared among all the screen that use that template.

Keep in mind that the default template is applied to all new screens. The default screen is marked with an arrow icon in the Templates tab

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

You can define the default styles for the widgets in two ways:

  • Right click on top of the template and click on Edit Template Style.
  • Alternatively, you can choose a widget of the screen, go to the Properties tab and click on the arrow at the top right of that tab and select ‘Set as default style’.

You can export your templates from one prototype to another. This way, applying your corporate image will be quicker and easier than ever.

An example of how to use templates: Navigation between screens using tabs:

  • Draw all the tabs in a template. Draw them all with a style that makes them look as they are not selected. Then drag each tab to the screen you want it to navigate to.
  • On each screen, and over the elements in the template, draw a tab with style ‘selected’ over the one that matches that screen.
  • Click on the Simulate button and verify the result.

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.

Leave a reply

Your email address will not be published. Required fields are marked *

19 + = 26

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>