Interactivity
Engine
for the Web

SnapEngine is a toolkit for building interactive UI for web applications, framework-agnostic, zero-dependency, and style-less.

Explore assets

Drag pads to reorder, tap to play.

Choose an asset to get started

Assets built on top of SnapEngine provide a wide variety of interactive UI components for popular front-end frameworks, from node UI to drag-and-drop lists.

SnapSort

Unstyled components for sortable lists, kanban boards, and more.

Learn more

SnapZap

Zoom and pan made simple

SnapLine

Node-based UI

Learn more

One foundation for all UI

All assets are built on the SnapEngine Core, which takes care of low-level handling like processing inputs and detecting collision, playing animation, etc. This allows for maintainable code and high interoperability.

Why use an engine model?
    • SnapSort
    • SnapLine
    • SnapZap
  2. SnapEngine Core
  3. DOM + browser APIs

What’s included:

Input Handling

A standardized API for mouse, touch, and stylus inputs. Includes support for basic mouse and touch gestures like drag and pinch. It also handles edge cases like tracking drag gestures even while mouse leaves the browser window.

Input system docs
pointerMove(x:null y:null)
dragStart(x:null y:null)
drag(x:null y:null)
pinch(d:null)

Drag to pan · Ctrl + scroll to zoom Pinch to zoom · Drag with two fingers to pan

Animation Engine

Lightweight WAAPI (Web Animations API) based animation engine that can animate not only CSS properties but also arbitrary JavaScript variables. Deep integration with the engine allows maximal performance.

Animation docs

DOM Optimization

The task queue system allows DOM read and write operations to be batched together to reduce layout thrashing. This allows for higher framerates when multiple elements are being mutated on screen.

Render queue docs

Unbatched DOM access interleaves 4 reads and 4 writes, forcing 4 separate layouts and taking 18.1 milliseconds — over the 16.7 millisecond frame budget. Batching the same operations performs every read, then a single layout, then every write, taking 7.9 milliseconds.

Synthetic figures illustrating the effect of batching DOM access — not benchmark results.

Get Started

Learn how SnapEngine and its assets work.

Read the Documentation