Ripl

Appearance

Tutorial ​

This tutorial walks you through Ripl step-by-step, starting from the most basic use-case and progressively adding complexity. By the end, you'll understand how to draw elements, organize them into groups and scenes, and add interactivity and animation.

The Basics ​

Render a Basic Element ​

The most basic usage of Ripl involves 3 steps:

  1. Create a context — the rendering target (Canvas by default)
  2. Create an element — specify the element's properties
  3. Render — draw the element to the context

TIP

Ripl renders to a Canvas context by default. To render to SVG instead, import createContext from @ripl/svg instead of @ripl/core. Try toggling between Canvas and SVG using the buttons above the demo!

Change Element Properties ​

An element can be modified at any point by changing its properties and re-rendering. Use the slider below to change the circle's radius in real time.

Radius

Creating Structure ​

Using Groups ​

Groups let you organize elements into a hierarchy — just like the DOM. A group can hold any number of child elements and even other groups. Properties set on a group are inherited by its children, so you can set a shared fillStyle once on the group instead of on every element.

Groups also support querying elements using familiar DOM-like methods:

ts
group.getElementById('my-circle');
group.getElementsByType('circle');
group.getElementsByClass('highlighted');
group.query('circle.highlighted');
group.queryAll('.shape');

Using Scenes ​

A Scene is a special group that binds to a context. It manages the full rendering lifecycle — clearing the context, rendering all children in z-index order, and automatically re-rendering when the context resizes.

TIP

When you use a Scene, you don't need to manage context.clear() or context.markRenderStart()/markRenderEnd() yourself — the scene handles all of that.

Interactivity and Animation ​

Using Renderers ​

A Renderer provides an automatic render loop powered by requestAnimationFrame. It continuously re-renders the scene, which is essential for animations and interactive hover/click effects.

The renderer also provides a transition() method that smoothly animates element properties from their current values to new values.

Adding Animation ​

Transitions are awaitable, so you can chain animations sequentially. You can also animate multiple elements at once and use different easing functions.

Next Steps ​

Now that you understand the basics, explore the rest of the documentation:

  • Essentials — Deep dive into each core concept
  • Elements — Reference for all built-in elements
  • Advanced — Events, animations, gradients, and custom elements