Feature request: Javascript API on the HTML export

Feedback & Requests
#1

The HTML export is an incredible feature, congratulations, that must have been a lot of work to build!

We’ve been chatting in the studio and we were wondering about the feasibility of an API to externally control these Principle animations.

Some of our prototypes use browser features like text input, or microphone input. These aren’t supported by Principle, but if the HTML export had a simple API, we could embed the principle animations in iframes and drive them from our code. This would let us overlay extra elements on top of the animations or embed them into larger webpages, similar to how Lottie does it for After Effects, which could be really valuable for lots of people.

One way it could work is where the animation is included inside an iframe, the host page sends/receives messages using window.postMessage. e.g.

host → principle animation

{type: "go-to-artboard", artboard: "detail-view", animated: false}
{type: "simulate-event", event: "detail-view Tap", animated: true}

and principle animation → host

{type: "did-go-to-artboard", artboard: "detail-view"}
{type: "will-go-to-artboard", artboard: "detail-view"}

Even better, there could be a Principle WASM/JS library where principle files could be loaded and played inside the host page without iframes. But that would be more work!

Anyway, just thought I’d pitch the idea! Thanks for the app :slight_smile:

3 Likes
#2

Adding a big +1 for this request. Adding support for even basic external events like via window.postMessage outlined above would greatly increase flexibility and open a lot of doors for interoperability of Principle prototypes with other platforms and prototypes. For example, we often embed prototypes in WKWebViews in our broader iOS app as a way to quickly prototype specific features. Having external events would enable us to trigger real actions in our prototype, giving an even higher fidelity of realism when testing and validating our designs.