{"id":21634603,"url":"https://github.com/curvenote/components","last_synced_at":"2025-04-11T15:32:37.586Z","repository":{"id":37339322,"uuid":"255953812","full_name":"curvenote/components","owner":"curvenote","description":"Components for interactive scientific writing, reactive documents and explorable explanations.","archived":false,"fork":false,"pushed_at":"2023-03-05T00:21:33.000Z","size":2739,"stargazers_count":34,"open_issues_count":13,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T18:41:46.543Z","etag":null,"topics":["explorable-explanations","material-ui","material-web-components","reactive-documents","scientific-writing","web-components","writing"],"latest_commit_sha":null,"homepage":"https://curvenote.dev/components","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/curvenote.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-04-15T15:09:03.000Z","updated_at":"2023-12-27T03:38:52.000Z","dependencies_parsed_at":"2023-07-17T15:55:16.555Z","dependency_job_id":null,"html_url":"https://github.com/curvenote/components","commit_stats":{"total_commits":191,"total_committers":2,"mean_commits":95.5,"dds":0.005235602094240788,"last_synced_commit":"928a919088f1cec36725115619038cd4376bfe4e"},"previous_names":["iooxa/ink-basic","iooxa/components"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curvenote%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/curvenote","download_url":"https://codeload.github.com/curvenote/components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248431334,"owners_count":21102184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["explorable-explanations","material-ui","material-web-components","reactive-documents","scientific-writing","web-components","writing"],"created_at":"2024-11-25T03:17:27.854Z","updated_at":"2025-04-11T15:32:37.557Z","avatar_url":"https://github.com/curvenote.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://curvenote.dev\"\u003e\u003cimg src=\"https://curvenote.dev/images/logo.png\" alt=\"curvenote.dev\" width=\"150\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# @curvenote/components\n\n[![iooax/components on npm](https://img.shields.io/npm/v/@curvenote/components.svg)](https://www.npmjs.com/package/@curvenote/components)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/components/blob/master/LICENSE)\n[![Documentation](https://img.shields.io/badge/curvenote.dev-Docs-green)](https://curvenote.dev)\n\nThe 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.\n\nThe [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/)!\nThis means you can declaratively write your variables and how to display them in `html` markup.\nTo get an idea of what that looks like, let's take the canonical example of *Tangled Cookies* - a simple reactive document.\n\n![How many calories in that cookie?](images/tangle.gif)\n\n```html\n\u003cr-var name=\"cookies\" value=\"3\" format=\".4\"\u003e\u003c/r-var\u003e\n\u003cr-var name=\"caloriesPerCookie\" value=\"50\"\u003e\u003c/r-var\u003e\n\u003cr-var name=\"dailyCalories\" value=\"2100\"\u003e\u003c/r-var\u003e\n\n\u003cr-var name=\"calories\" :value=\"cookies * caloriesPerCookie\" format=\".0f\"\u003e\u003c/r-var\u003e\n\u003cr-var name=\"dailyPercent\" :value=\"calories / dailyCalories\" format=\".0%\"\u003e\u003c/r-var\u003e\n\n\u003cp\u003e\n  When you eat \u003cr-dynamic bind=\"cookies\" min=\"2\" max=\"100\"\u003ecookies\u003c/r-dynamic\u003e,\n  you consume \u003cr-display bind=\"calories\"\u003e\u003c/r-display\u003e calories.\u003cbr\u003e\n  That's \u003cr-display bind=\"dailyPercent\"\u003e\u003c/r-display\u003e of your recommended daily calories.\n\u003c/p\u003e\n```\n\n## Getting Started\n\nInk is based on web-components, which creates custom HTML tags so that they can make writing documents easier.\nTo get started, copy the built javascript file to the head of your page:\n\n```html\n\u003cscript src=\"https://unpkg.com/@curvenote/components\"\u003e\u003c/script\u003e\n```\n\nYou 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):\n\n```bash\n\u003e\u003e npm install @curvenote/components\n```\n\nYou should then be able to extend the package as you see fit:\n\n```javascript\nimport components from '@curvenote/components';\n```\n\nNote 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.\n\n## Basic Components\n\n* r-var\n* r-display\n* r-dynamic\n* r-range\n* r-action\n* r-button\n* r-switch\n* r-checkbox\n* r-radio\n* r-select\n* r-input\n* r-visible\n\n## Documentation\n\nSee https://curvenote.dev/components for full documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurvenote%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcurvenote%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurvenote%2Fcomponents/lists"}