Learn how to prototype web and mobile apps

How to view a Sitemap of your wireframes

In this tutorial, you will learn how to view and use the Sitemap tab in the Justinmind editor for an overview of the screens in your wireframes.

You can see an example below. 


Navigating your Sitemap tab


  • Properties: arrange and change the format of the navigation map using these properties. Some of them apply to all the navigation tree in General properties, but others only apply to the selected node in the Selected Item properties.
  • Navigation Map: in the center of the Sitemap tab is the Navigation Map (where the canvas is show in the User Interface). This map shows the currently selected sitemap. The initial sitemap will be the ‘root’ navigation map and there is a node for each screen that can be accessed from this screen. Select a node to to be taken to the corresponding screen and double click on the node to edit the screen. When you do this, the Outline panel will also appear on the right-hand side so that you can navigate each component in the screen.


  • ‘Copy to clipboard’ and ‘Save as image’ are Canvas tools– let’s take a look at them
  • Copy to clipboard: this generates an image with the Navigation Map and places it in the system’s clipboard so you can paste it later, including in external software.
  • Save as image: this generates an image with the Navigation Map and saves it as an image file.
  • Screens: this lists the screens that you have created in the User Interface. You can display a list of previews or the entire tree.

And that’s it! Take a look at the sitemap tab next time you’re creating a prototype.


Great job! You finished the first section of the Beginners course!

Next tutorial > UI elements for your interactive prototypes and wireframes