@ripl/core

Core rendering library for Ripl: a unified API for 2D graphics rendering across Canvas, SVG, and Terminal contexts.

Installation

npm install @ripl/core

Features

• Unified rendering API: One API surface for both Canvas and SVG contexts
• Built-in elements: Arc, circle, rect, line, polyline, polygon, ellipse, path, text, and image
• Scene management: Scenegraph with grouping, property inheritance, and element querying
• Animation: High-performance async transitions with CSS-like keyframe support and custom interpolators
• Event system: Event bubbling, delegation, and stop propagation (mimics the DOM)
• Scales: 14 scale types for data mapping: continuous, discrete, ordinal, band, point, diverging, logarithmic, symmetric-log, power, radial, quantile, quantize, threshold, and time
• Color: Color parsing, interpolation, and conversion (RGB, HSL, HSV, Hex, and the CSS named colors)
• Math: Geometry utilities, vector operations, and easing functions
• Zero dependencies: Fully self-contained
• Tree-shakable: Only ship what you use

Usage

import {
    createCircle,
    createContext,
    createRenderer,
    createScene,
} from '@ripl/web';

const context = createContext('.mount-element');

const circle = createCircle({
    fill: 'rgb(30, 105, 120)',
    cx: context.width / 2,
    cy: context.height / 2,
    radius: 50,
});

const scene = createScene(context, {
    children: [circle],
});

const renderer = createRenderer(scene, {
    autoStart: true,
    autoStop: true,
});

await renderer.transition(circle, {
    duration: 1000,
    state: {
        radius: 100,
        fill: '#FF0000',
    },
});

Switching to SVG

Replace the createContext import with @ripl/svg and everything else stays the same:

import {
    createContext,
} from '@ripl/svg';

Documentation

Full documentation and interactive demos are available at ripl.run.

License

MIT