How it works

A Livestorm plugin is a Javascript project, bundled into a single minified file and executed into a hidden sandboxed iframe, inside of a Livestorm Event.

Since Plugins are executed inside an iframe, they cannot directly modify the Livestorm document. This is a security measure designed to prevent embedded websites from modifying the DOM of their host.

In order to alter and use Livestorm opened APIs, the iframe will leverage the postMessage() function which is a standard way of communicating between documents.

To facilitate the use of the APIs, the @livestorm/plugin NPM package is actually an abstraction that is used to transform high-level order into a lower-level postMessage.

Chat.broadcast({ text: 'Hello world' }) // High level instruction
// Performs something like : 
postMessage({ action: 'chat-broadcast', content: { text: 'Hello world', id: 'xxx' }) // Low level instruction

We call this means of communication a "bridge". Every action triggered inside the room has been implemented via a postMessage.


Some APIs might be unauthorized within a sandboxed iframe, you can bypass that by asking for a review of your plugin

Did this page help you?