# Introduction

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. iooxa.dev 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.

## Overview

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

• @iooxa/runtime keeps track of the reactive state of the page

• @iooxa/components reactive components for text, inputs, sliders, equations, code, etc.

• @iooxa/svg reactive svg components for simple interactive diagrams

• @iooxa/article bundles together all of the above, and provides CSS layouts

### @iooxa/components

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!

### @iooxa/article

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

<link rel="stylesheet" href="https://unpkg.com/@iooxa/article/dist/iooxa.css"> <script async src="https://unpkg.com/@iooxa/article"></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.

### @iooxa/svg

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!

### @iooxa/runtime

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.).