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.
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
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
When you eat
When you eat
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 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.
<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
You can also download the latest release from GitHub.
If you are running this
the script tag.
svg package provides a light wrapper on some commonly used
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
@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
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 firstname.lastname@example.org. 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