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. curvenote.dev is a collection of open source tools and packages that aim to lower the barrier to interactive scientific writing.
Tangled Cookies
Our work is inspired by tangle.js and explorable explanations. @curvenote/article exposes reactive web-components so you can declaratively write your variables and how to display them in html markup. To get an idea of what that looks like, let's take the canonical example of Tangled Cookies - a simple reactive document to encourage you to not eat more than 42 cookies in one day.
Try dragging to the left or right!
When you eat , you consume calories.
When you eat , you consume calories.
That's of your recommended daily calories.
Overview
There are a few things going on in the above example! The example is supported by four packages:
-
@curvenote/runtimekeeps track of the reactive state of the page -
@curvenote/componentsreactive components for text, inputs, sliders, equations, code, etc. -
@curvenote/svgreactive svg components for simple interactive diagrams -
@curvenote/articlebundles together all of the above, and provides CSS layouts
@curvenote/components
The @curvenote/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!
@curvenote/article
To get started can put this javascript and css bundle in your page:
<link rel="stylesheet" href="https://unpkg.com/@curvenote/article/dist/curvenote.css"> <script src="https://unpkg.com/@curvenote/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.
@curvenote/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!
@curvenote/runtime
The @curvenote/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 Curvenote, including our product, please sign up or add yourself to our mailing list or follow us on twitter.
Made with love by 
Curvenote
Last updated February 19th, 2021