- logo

NPM Version MIT License GitHub Stars Twitter Follow


We think that creating beautiful reactive documents and explorable explanations should be easy. Writing technical documents is hard enough already, and choosing to make that writing interactive is beyond the reach of most communicators - who often have limited or no development experience.

Providing multiple visuals of images, text, and equations that are all interconnected allows your readers to interrogate models, build intuition and play with ideas. Not every explanation is best suited to be augmented with interactive content, however, not every explanation is best represented by paper, or the computer simulated version: the PDF.

We are working on an editor and publishing platform to try to lower the barriers around creating reactive documents and are committed to the core of these documents being open source, so you can take your documents anywhere. is a collection of open source tools and packages that aim to lower the barrier to interactive scientific writing.

But first, an example!

In trigonometry, a unit circle is the circle of radius one centered at the origin $(0, 0)$ in the Cartesian coordinate system. Let a line through the origin, making an angle, of $\theta$= with the positive half of the x-axis, intersect the unit circle. The x-coordinates and y-coordinates of this point of intersection are equal to $\cos(\theta)$ and $\sin(\theta)$, respectively. See Wikipedia.


There are a few things going on in the above example! The example is supported by four packages:


The @iooxa/components package provides many reactive web-components that work with the runtime package (which is based on redux). With so many r's, we decided to use this prefix to denote these reactive components. For example, <r-var> creates a reactive variable, and <r-display> will display the up-to-date value or that variable.

The most special number is .

To learn more about reactive variables, please see the components documentation, where you will learn how to update values, transform text, have dynamic text (), add sliders (), show equations (x = )), and much more!


To get started can put this javascript and css bundle in your page:

<link rel="stylesheet" href=""> <script async src=""></script>

You can also download the latest release from GitHub. If you are running this without a web server, ensure the script has charset="utf-8" in the script tag.


The svg package provides a light wrapper on some commonly used <svg> elements as well as leveraging d3 to create paths, drag-nodes and equations. The goal is to make it easy to create simple interactive graphics, but not to provide all the functionality that you would expect from a charting library. For that we (will!) provide a wrapper to Vega, or you can help out by contributing other extensions that use the runtime library!


The @iooxa/runtime library allows you to create variables and components that react to changes in state through user-defined functions. The runtime is a small component that can be used in other packages to keep the state of a document reactive. It has no user interface. The package is based on Redux which is compatible with many popular javascript frameworks (e.g. React, Vue, etc.).

License and Contact

Everything is distributed under the permissive MIT License to make it easy for you to use these packages with your other projects!

We are actively working on these libraries, so let us know your feature requests or problems! We are excited to see what you create, and hope that these tools help you in creating interactive articles and beautiful explorable explanations. If you have issues let us know on GitHub or on twitter or drop us a link to some of your work at Looking forward to hearing from you! 🚀

If you are interested in hearing more about iooxa, including our product, please sign up for our mailing list or follow us on twitter.

Made with love by iooxa
Last updated May 21st, 2020