🔌 Connect

Once Spirit Studio has started, you can connect to any web page by clicking on the browser extension in Chrome.

Any Spirit animation on the current web page should now appear in Spirit Studio and can be edited in real-time.

If you haven't already added the web player to your site, a temporary web player will be loaded for you from CDN, this way you can easily animate any (existing) web page ✨

Live edit

💡 Did you know that all animations on the Spirit homepage can actually be live edited? Go ahead and give it a try.

We've also created a Playground page with example animations. This is a good starting point to fiddle around with the animations and see how they're created.

If you want to animate a HTML file from your local filesystem (file:///...), make sure that "Allow access to file URLs" is enabled in Spirit Chrome extension settings (Chrome menu Window > Extensions).

Troubleshoot

The Chrome extension can only access elements in the active document, iframes on the other hand are sandboxed, meaning that iframe content runs in an isolated context and are not accessible for the chrome extension.

👏 we're currently developing a new way of resolving elements which can access elements in iframes, this way we supported codepens and codesandboxes to be live editable as well.

The Spirit Browser Extensions is currently available for Chrome only. We do not currently have a version for Firefox or Safari, but you can sign up for our newsletter to be notified once we launch it.