How to integrate @curvenote/article with React or Vue?

Since it's web-component based, you can use it in React or Vue by importing the components and handling custom elements, but state management might require bridging with the library's runtime store. Refer to the setup notes in the README for guidance.

What's the difference between @curvenote/article and tangle.js?

@curvenote/article re-imagines tangle.js using web-components for a more declarative, modern approach with better HTML integration. However, it requires understanding web-components and has a steeper initial setup compared to tangle.js's simpler script-based method.

How to add custom data visualizations beyond the built-in charts?

You can extend the library by creating custom web-components or integrating with other charting libraries, but this requires familiarity with the @curvenote runtime and web-component APIs, as the documentation doesn't provide detailed examples.

Is @curvenote/article good for non-scientific interactive documents?

While its reactive variables can be used for any dynamic content, the components are optimized for science, so you might need additional styling and elements for general use. It's possible but not the primary focus.

How to deploy @curvenote/article on a static site like GitHub Pages?

Include the CDN script and CSS in your HTML, as shown in the getting started section. Ensure all files are hosted correctly and test for browser compatibility, as web-components may need polyfills for older browsers.

@curvenote/article or Jupyter Notebooks for interactive science?

@curvenote/article is better for lightweight, web-native articles with declarative HTML, while Jupyter Notebooks offer a richer, code-execution environment but are heavier and less integrated into standard web pages. Choose based on your need for simplicity vs. computational power.

Open-Awesome

iooxa

MITTypeScriptv0.2.7

Web-components for creating interactive scientific articles with reactive variables, equations, and charts.

Visit Website GitHub

198 stars12 forks0 contributors

What is iooxa?

@curvenote/article is a JavaScript library that provides web-components for building interactive scientific articles and reactive documents. It allows authors to embed dynamic variables, equations, and charts directly into HTML, enabling readers to manipulate parameters and see updates in real‑time. The project aims to make scientific writing more engaging and accessible through explorable explanations.

Target Audience

Scientific writers, educators, and developers creating interactive educational content or research communications that require dynamic, data‑driven documents.

Value Proposition

It offers a declarative, web‑component‑based approach to reactive documents, simplifying the creation of interactive scientific content without complex frameworks. Its inspiration from tangle.js and modern web standards provides a lightweight yet powerful tool for explorable explanations.

Overview

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

Use Cases

Best For

Creating interactive scientific papers with adjustable parameters
Building educational content where learners can explore cause‑and‑effect relationships
Embedding reactive charts and equations in research blogs or documentation
Developing explorable explanations for complex scientific concepts
Prototyping data‑driven narratives with real‑time visual feedback
Enhancing static articles with dynamic, user‑controllable elements

Not Ideal For

Projects requiring full server-side rendering without client-side JavaScript fallback
Teams needing a comprehensive UI component library for general web applications beyond scientific content
Applications already built on state-heavy frameworks like React or Vue that prefer integrated solutions

Pros & Cons

Pros

Declarative Reactive Variables

Allows embedding dynamic variables directly in HTML with bindings, as shown in the cookie example, enabling straightforward real-time updates without complex JavaScript.

Easy Web Integration

Can be added via a simple script tag from a CDN, making it quick to start without build tools, per the getting started instructions for minimal setup.

Scientific-Focused Interactivity

Provides built-in components for interactive equations and charts that respond to user inputs, specifically tailored for educational and research content.

Modern Standards-Based

Leverages web-components, ensuring compatibility with evolving web standards and reducing dependency on specific frameworks, as highlighted in the philosophy.

Cons

Manual Configuration Required

The npm package doesn't auto-setup the runtime store or register components, requiring additional code as admitted in the README, which adds complexity.

Potentially Outdated Documentation

Documentation links point to 'old.curvenote.dev', suggesting infrequent updates or lack of current support, which could hinder troubleshooting.

Niche Application Scope

Primarily designed for scientific writing, so it lacks general-purpose UI elements, forcing integration with other libraries for broader use cases.

Frequently Asked Questions

Related Projects

A curated list of awesome lists - @sindresorhus

😎 Awesome lists about all kinds of interesting topics

Stars488,229

Forks36,016

Last commit24 days ago

javascript-algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

Stars196,317

Forks31,049

Last commit28 days ago

You Don't Know JS

A book series (2 published editions) on the JS language.

Stars184,616

Forks33,466

Last commit5 months ago

Clean Code JavaScript

Clean Code concepts adapted for JavaScript

Stars94,733

Forks12,513

Last commit2 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub