The goal of
@curvenote/article is to provide web-components for interactive scientific writing, reactive documents and explorable explanations.
@curvenote/article provides reactive components, equations, and charts as well as layouts for creating interactive scientific articles.
The curvenote/article project is heavily inspired by tangle.js, re-imagined to use web-components!
This means 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.
<r-var name="cookies" value="3" format=".4"></r-var> <r-var name="caloriesPerCookie" value="50"></r-var> <r-var name="dailyCalories" value="2100"></r-var> <r-var name="calories" :value="cookies * caloriesPerCookie" format=".0f"></r-var> <r-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></r-var> <p> When you eat <r-dynamic bind="cookies" min="2" max="100">cookies</r-dynamic>, you consume <r-display bind="calories"></r-display> calories.<br> That's <r-display bind="dailyPercent"></r-display> of your recommended daily calories. </p>
@curvenote/article is based on web-components, which creates custom HTML tags so that they can make writing documents easier.
<link rel="stylesheet" href="https://unpkg.com/@curvenote/article/dist/curvenote.css"> <script async src="https://unpkg.com/@curvenote/article"></script>
>> npm install @curvenote/article
You should then be able to extend the package as you see fit:
import components from '@curvenote/article';
Note that the npm module does not setup the @curvenote/runtime store, nor does it register the components. See the curvenote.ts file for what the built package does to
setup the store and
register the components.
See https://curvenote.dev for full documentation.