Installation

Ripl is split into focused packages so you only ship what you need. Drawing shapes on a canvas needs one package; charts, SVG, 3D, terminal output and Node bindings are each additive. Every package is written in TypeScript with zero runtime dependencies.

Packages

Package	Description
@ripl/web	Main browser entry point that re-exports core + canvas context with browser platform bindings
@ripl/core	Core rendering internals: elements, scene, renderer, animation, scales, math, color, interpolation
@ripl/canvas	Canvas 2D rendering context
@ripl/svg	SVG rendering context; swap Canvas for SVG with a single import change
@ripl/webgpu	WebGPU-accelerated 3D rendering context with hardware depth testing and WGSL shaders
@ripl/charts	Pre-built chart components: bar, line, area, pie, scatter, stock, gantt, and 10+ more
@ripl/3d	3D rendering: shapes, camera, shading, and projection onto 2D contexts
@ripl/terminal	Terminal rendering context with braille-character output and ANSI truecolor
@ripl/node	Node.js runtime bindings that configure the platform factory for headless environments
@ripl/devtools	Runtime bridge connecting Ripl contexts, scenes, and renderers to the Ripl Devtools browser extension
@ripl/dom	DOM utilities used internally by browser contexts
@ripl/utilities	Shared typed utility functions used across all packages

TIP

Working in Vue? @ripl/vue wraps all of the above as components, with @ripl/vue-3d and @ripl/vue-charts alongside it. See the Vue docs. A React adapter is on the way.

What to Install

Most projects only need one or two packages. Here's a quick guide:

• Drawing shapes in the browser → @ripl/web (includes core + canvas automatically)
• SVG rendering → @ripl/web + @ripl/svg
• Charts → @ripl/web + @ripl/charts
• 3D (Canvas) → @ripl/web + @ripl/3d
• 3D (WebGPU) → @ripl/web + @ripl/3d + @ripl/webgpu
• Terminal / CLI → @ripl/terminal + @ripl/node
• Terminal charts → @ripl/terminal + @ripl/node + @ripl/charts
• Debugging → @ripl/devtools (pairs with the Ripl Devtools browser extension)

TIP

Internal packages (@ripl/core, @ripl/canvas, @ripl/dom, @ripl/utilities) are installed automatically as dependencies, so you never need to install them directly.

Install

Install the main package to get started:

npm install @ripl/web

Additional Packages

Install any combination of additional packages as needed:

# SVG rendering
npm install @ripl/svg

# Charts
npm install @ripl/charts

# 3D
npm install @ripl/3d

TIP

All packages depend on @ripl/core internally, so the core library is always shared automatically. There is no need to install it separately.

CDN

You can also load Ripl directly from a CDN for quick prototyping or non-bundled environments:

<!-- Core + Canvas -->
<script type="module">
import { createContext, createCircle } from 'https://esm.sh/@ripl/web';

const context = createContext('#canvas');
createCircle({ fill: '#3a86ff', cx: 100, cy: 100, radius: 40 }).render(context);
</script>

<!-- Charts -->
<script type="module">
import { createBarChart } from 'https://esm.sh/@ripl/charts';
</script>

<!-- SVG -->
<script type="module">
import { createContext } from 'https://esm.sh/@ripl/svg';
</script>

TIP

CDN imports work best for prototyping. For production apps, use a bundler to benefit from tree-shaking and smaller bundle sizes.

TypeScript

Ripl is written in TypeScript and ships its own type definitions, so no @types packages are needed. The library targets ES2023 and uses strict mode throughout.

Next Steps

Head over to the Tutorial to start drawing your first elements, or jump straight to Charts if you're building data visualizations.