Customizing the HTML Output
You can customize the HTML output of your prototypes in a number of ways with the options in the HTML generator. You can access these settings from any of the HTML publishing dialogs:
- Publish → Publish to Axure Cloud
- Publish → Generate HTML Files
- Publish → Preview Options
- Publish → More Generators and Configurations
The HTML Generator Settings
Pages
On the Pages tab, you can choose which of the pages in the file to include in the HTML output. You can choose on a page-by-page basis or check Generate all Pages to include them all.
Note
If you have your pages organized into parent-child relationships, you must include a parent page in order to include any of its children. Unchecking a parent page will automatically uncheck its children as well.
Notes
On the Notes tab, you can choose how your widget and page notes are represented in the HTML output.
Widget Notes
Include widget note markers: Widgets with notes will display a numbered footnote icon. You can click the icon to see the widget's notes.
Include widget notes in sidebar: All widget notes will be included in the Documentation pane of the prototype player, ordered by their footnote number. You can click a note to scroll to and highlight its assigned widget.
Page Notes
Include page notes: Page notes will be included at the top of the Documentation pane of the prototype player.
Show notes names: The names of the page notes fields will be visible in the Documentation pane of the prototype player.
Note
If you uncheck both Include widget notes in sidebar and Include page notes, the Documentation pane will not appear in the prototype player because it will have no content to display.
Interactions
On the Interactions tab, you can choose what happens when widget and page events are fired. You can also choose what happens when you interact with widgets storing page references.
Case Behavior
Always show case names: When an event fires, you're shown a list of the event's cases. Click the case you want to execute.
Show case names only with multiple cases: When an event with multiple cases fires, you're shown a list of the event's cases. Click the case you want to execute.
If the event has multiple cases with conditional logic, however, the conditional logic determines which case is executed.
Never show case names: You are never shown a list of cases when an event fires in the browser. If you have configured conditional logic on an event's cases, that logic determines which case will fire. Otherwise, the first case will fire.
Widgets with Reference Pages
Shape widgets and snapshot widgets can store references to pages in the RP file. The checkboxes in this section let you choose whether you can click one of these widgets to open the referenced page and whether to include an icon you can click to open the referenced page in a new tab/window.
Fonts
On the Fonts tab, you can create references to web-hosted font files for web fonts you've used in your prototype. You can also set up font mappings to dynamically swap one font for another in the HTML output. Learn more in the Web Fonts and Font Mapping article.
Storing Multiple Generators
You can create and save multiple sets of HTML generator settings to use in different publishing contexts. For example, you might have one set, with all pages included, that you use with while you're actively working on your prototype and a second set, with only finished pages included, that you use when publishing for your stakeholders.
To create additional HTML generators:
- Go to Publish → More Generators and Configurations.
- Click Add and select HTML.
- Name the new generator and press ENTER.
- Double-click the new generator to edit its settings.
You can now select your new generator in the HTML generator dropdown in any of the HTML publishing dialogs.
Tip
If you publish multiple versions of your prototypes for different audiences, include the Axure Cloud ID of each version in the name of its associated HTML generator. That way you always know which generator settings to use when publishing updates.