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