https://github.com/curvenote/components

Components for interactive scientific writing, reactive documents and explorable explanations.
https://github.com/curvenote/components

explorable-explanations material-ui material-web-components reactive-documents scientific-writing web-components writing

Last synced: about 2 months ago
JSON representation

Components for interactive scientific writing, reactive documents and explorable explanations.

• Host: GitHub
• URL: https://github.com/curvenote/components
• Owner: curvenote
• License: mit
• Created: 2020-04-15T15:09:03.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-03-05T00:21:33.000Z (over 2 years ago)
• Last Synced: 2025-04-03T18:41:46.543Z (2 months ago)
• Topics: explorable-explanations, material-ui, material-web-components, reactive-documents, scientific-writing, web-components, writing
• Language: TypeScript
• Homepage: https://curvenote.dev/components
• Size: 2.61 MB
• Stars: 34
• Watchers: 2
• Forks: 3
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# @curvenote/components

[![iooax/components on npm](https://img.shields.io/npm/v/@curvenote/components.svg)](https://www.npmjs.com/package/@curvenote/components)

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/components/blob/master/LICENSE)

[![Documentation](https://img.shields.io/badge/curvenote.dev-Docs-green)](https://curvenote.dev)

The goal of components is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). This library provides ways to create, update and display variables as dynamic text and modify them with buttons, inputs, sliders, switches, and dropdowns.

The [curvenote/components](https://curvenote.dev) project is heavily inspired by [tangle.js](http://worrydream.com/Tangle/guide.html), re-imagined to use [web-components](https://www.webcomponents.org/)!

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?](images/tangle.gif)

```html



  When you eat cookies,

  you consume  calories.


  That's  of your recommended daily calories.



```


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

```html

```

You can also download the [latest release](https://github.com/curvenote/components/releases) 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](https://www.npmjs.com/package/@curvenote/components):

```bash

>> npm install @curvenote/components

```

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

```javascript

import components from '@curvenote/components';

```

Note that the npm module does not setup the [@curvenote/runtime](https://github.com/curvenote/runtime) store, nor does it register the components. See the [curvenote.ts](/curvenote.ts) file for what the built package does to `setup` the store and `register` the components.

## Basic Components

* r-var

* r-display

* r-dynamic

* r-range

* r-action

* r-button

* r-switch

* r-checkbox

* r-radio

* r-select

* r-input

* r-visible

## Documentation

See https://curvenote.dev/components for full documentation.