Table of Contents

Extend Axure Prototypes with Javascript

By extending Axure prototypes with custom javascript very high-fidelity prototypes can be created. My normal workflow it to start simple and then gradually add more details to a prototype - I layout first and code later.

:!: This page describes methods to extend Axure prototypes with custom javascript. Please notice that a lot of the functionality described here use features that are not documented and not supported by the company making Axure. If you use the methods described on this page in your own Axure projects, they may stop working when a new version of Axure is released. Use the information provided here at your own risk.
:!: Extending Axure with Javascript require advanced Axure, Javascript, HTML and CSS skills. When you add your own javascript, HTML or CSS to an Axure prototype you face the cross-browser incompatibilities that Axure normally takes care of.
:!: Please do not contact the support team at Axure with problems regarding javascript, HTML or CSS. Javascript is not supported by Axure, but they have decided to make it available to expert users. If the Axure support team is flooded with javascript, HTML and CSS questions I fear that they will take away the javascript APIs.
:!: All information relates to Axure 8. I no longer use Axure 7. Axure 9 is out in a Beta version, and I expect that the javascript API in Axure 9 will not be 100% compatible with Axure 8. I did a quick test, and it seems that there are not that many changes.

Examples

Examples of stuff that can be done in "native" Axure.These examples show off advanced prototyping tips & tricks. No javascript used.
Sticky Navigation Panel - "Native" AxureThis example show off a sticky navigation panel. No javascript used.
Examples of stuff that can be done in Axure with JavascriptBasic examples of adding javascript to Axure prototypes.
Control Inline Frame with JavascriptAn example that show how to load the html in an iframe for a text widget. Useful if the html in the iframe is dynamically created.
AxureEx -Javascript Extension for AxureThese examples show javascript examples of AxureEx library. This enable creation of very interactive prototypes.
Javascript TransformationsThese examples show of advanced animations on widgets enabled by CSS transformations. This enable powerful animations.
Javascript Browser HistoryThese examples show of AxureEx javascript browser history features. Browser history manipulation seems to be a little know topic.
Javascript Repeater FunctionsThese examples show of AxureEx javascript repeater features. Update repeaters with javascript. Transfer repeater data between different pages.
Sticky Header - JavascriptA javascript example of a sticky header & navigation panel.
Candy Store Desktop - Advanced example of web shopThis is a very advanced example of a single page webshop.
Candy Store Mobile - Advanced example of web shopThis is a very advanced example of a mobile app.

Documentation

Enable JavascriptHow to add custom javascript and CSS to Axure prototypes
Axure APIThe Axure Javascript API
Axure.Ex APIMy extension to the Axure Javascript API
Axure ExamplesSome rather old examples.

Feedback

You can use the Axure Forum to send me feedback. My profile is https://forum.axure.com/t/improved-javascript-injection/34389.