Ripl

Appearance

RiplOne API. Any Context.

A unified, zero-dependency TypeScript library for drawing and animating 2D graphics, charts, and data visualizations across Canvas, SVG, Terminal, and WebGPU.

Get Started
Charts
3D
Demos

Charting library

25 animated, interactive chart types, including bar, line, area, pie, scatter, candlestick (OHLC), histogram, box plot, heatmap, radar, sankey, treemap, sunburst, gauge, gantt and force-directed, with axes, legends, tooltips and crosshairs.

Drawing & animation library

Ten drawing primitives, 13 curve algorithms, gradients, pattern fills and clip paths, animated with keyframes, 31 easing functions and type-aware interpolation across numbers, colours, points and paths.

One familiar API

Draw to any context through a single, DOM-like API. Ripl mirrors the DOM and CSSOM (hierarchy, property inheritance, events, styling, and CSS-like querying), so switching between Canvas and SVG is a one-line change.

Terminal & 3D rendering

Render the same scene to Unicode braille and ANSI colour in a terminal, to a Node process for server-side output, or as 3D geometry on Canvas and WebGPU — nine shapes, five light types, materials, textures, fog and raycasting.

Draw once, render anywhere ​

Ripl (pronounced "ripple") is a high-performance, zero-dependency graphics library for the web. It gives developers a single, unified API for 2D drawing, animation and interactive data visualization, and it renders the exact same scene to Canvas, SVG, or even the Terminal (as braille/ANSI), with WebGPU 3D. Build custom shapes, charts, and animations once, then choose the rendering context that fits your use case. No rewrites required.

A charting library ​

@ripl/charts ships 25 chart types on top of the core renderer: line, bar, area, trend, scatter, histogram, box plot, stock (candlestick/OHLC), realtime, pie and donut, polar area, polar scatter, radial bar, radar, gauge, heatmap, treemap, sunburst, packed circle, sankey, chord, arc diagram, force-directed, funnel and gantt. Each one animates its data transitions, responds to pointer events, resizes with its container, and renders to Canvas or SVG from the same options object. Browse the charts.

A drawing and animation library ​

Underneath the charts is a general-purpose 2D drawing API: arcs, circles, ellipses, images, lines, paths, polygons, polylines, rectangles and text, arranged in a scene graph that inherits styles and bubbles events the way the DOM does. Animate any property with keyframes, easing and awaitable transitions, or tween one outline into another. Read the tutorial.

Terminal rendering ​

@ripl/terminal rasterises the same scene into Unicode braille cells with ANSI colour, including transforms, clipping, hit testing and rotated text. Charts and drawings you already wrote run in a TUI or over SSH without changing your code. See the terminal context.

3D rendering ​

@ripl/3d builds 3D scenes from nine shapes — cubes, spheres, cylinders, cones, planes and tori, plus a mesh from an explicit face list, a parametric surface tessellated from a function of two parameters, and bicubic Bézier patches — under ambient, hemisphere, directional, point and spot lights. Surfaces carry materials and textures, scenes carry fog, and a raycast reports the exact point, face, normal and texture coordinate under the pointer, all driven by a perspective or orthographic orbit camera. @ripl/webgpu renders the same scenes on the GPU with WGSL shaders, hardware depth testing and 4× MSAA. Explore 3D.