Sign Up for Free

RunKit +

Try any Node.js package right in your browser

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:

var inkComponents = require("ink-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ink-components v0.1.9

Scientific web components for interactive scientific writing, reactive documents and explorable explanations.

Ink Components

Ink Components on npm MIT License Published on webcomponents.org

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 html markup. To get an idea of what that looks like, let's take the canonical example of Tangled Cookies - a simple reactive document.

How many calories in that cookie?

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

Getting Started

Ink is based on web-components, which creates custom HTML tags so that they can make writing documents easier. To get started, copy the built javascript file to the head of your page:

<script src="https://unpkg.com/ink-components"></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. You can also install from npm:

>> npm install ink-components

You should then be able to extend ink as you see fit:

import * as ink from 'ink-components';

Components

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free