This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
ink-components with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
The goal of ink-components is to provide web-components for interactive scientific writing, reactive documents and explorable explanations. Included in ink-components are ways to create, update and display variables as text, equations and charts.
The ink-components 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.
<ink-var name="cookies" value="3" format=".4"></ink-var> <ink-var name="caloriesPerCookie" value="50"></ink-var> <ink-var name="dailyCalories" value="2100"></ink-var> <ink-var name="calories" :value="cookies * caloriesPerCookie" format=".0f"></ink-var> <ink-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></ink-var> <p> When you eat <ink-dynamic name="cookies" min="2" max="100"> cookies</ink-dynamic>, you consume <ink-display name="calories"></ink-display> calories.<br> That's <ink-display name="dailyPercent"></ink-display> of your recommended daily calories. </p>
>> npm install ink-components
You should then be able to extend ink as you see fit:
import * as ink from 'ink-components';