Feature request: Javascript API on the HTML export

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:

1 Like