Portable documents
Scene
@versytl/sceneA versioned scene graph with layers, semantic connectors, reusable components, validation, and SVG round-tripping.
Source & documentation ↗Portable vector interface framework
A versatile family of
vector-driven modules.
Build expressive graphical interfaces across domains with composable tools for layout, motion, simulation, rendering, and shared state—then carry the same editable document wherever the work needs to live.
Versytl /ˈvɜːrsətl/ — pronounced “versatile.”
Built with @versytl/core and animated by @versytl/tween.
One model, purposeful layers
A framework made
of smaller, useful parts.
Start with a scene and a renderer. Add layout, controls, motion, simulation, or shared state when the interface calls for them.
- 01@versytl/scene
Describe meaning
Versioned scenes preserve identity, layers, semantic connectors, and application components inside portable SVG documents.
- 02adapters
Compose behavior
Compose graphical controls, deterministic motion, physics, and field-level shared records as independent layers.
- 03renderers
Choose the surface
Render the same scene through browser-native SVG or a portable CTX target—with room for what comes next.
Built with Versytl
Trickle Task
A standalone task planner that brings priorities and dependencies into one map, with portable SVG projects and shared task and checklist edits.
Task planning / trickle-task.com
- See what connects.
- Map dependencies so you can follow the work that leads to the next task.
- Keep priorities in view.
- Arrange tasks by priority and explore the project from the full map or a mobile task list.
- Take the project with you.
- Export an editable SVG with the task map and project data together in one portable file.
The foundation
@versytl/core@versytl/scene@versytl/clay@versytl/shipkit@versytl/tween@versytl/yjsExplore how Versytl
Small systems.
One visual language.
Every panel is a real Shipkit card containing a small scene. Together they show how the framework’s focused libraries compose without collapsing into one inseparable engine.
New / @versytl/yjs
One idea. More than one view.
Edit together, disconnect, and merge changes. Try a pair of independent views and a persistent board shared across browser tabs.
The package family
Choose the pieces
your interface needs.
Explore each package’s source, API, and examples. Scene documents carry meaning; layout, rendering, simulation, and shared state compose around them.
SVG rendering
Core
@versytl/coreVue SVG primitives and a scene renderer with pointer interaction, shapes, and connectors.
Source & documentation ↗Layout geometry
Clay
@versytl/clayClay/WASM measurements for responsive grids and timelines. Applications own their state and artwork.
Source & documentation ↗Reusable controls
Shipkit
@versytl/shipkitScene cards, flow controls, export menus, dashboard gauges, and railroad diagrams.
Source & documentation ↗Deterministic motion
Tween
@versytl/tweenSample time-based motion and compose animation without tying the model to a rendering loop.
Source & documentation ↗Shared state
Yjs
@versytl/yjsField-level shared records, reactive Vue bindings, tab communication, and optional persistence and network providers.
Source & documentation ↗Try two sync examples →Visual assemblies
Objects
@versytl/objectsReusable physical artwork that produces scene nodes independently of the physics engine.
Source & documentation ↗Simulation contracts
Physics
@versytl/physicsRenderer-neutral body, surface, and soft-body contracts shared by engine adapters.
Source & documentation ↗Physics adapter
Rapier
@versytl/rapierRapier runtime and simulation integration behind the shared physics contracts.
Source & documentation ↗Physics adapter
Box2D
@versytl/box2dA Box2D/WASM runtime for bodies and simulation behind the same engine boundary.
Source & documentation ↗Isometric projection
ISO
@versytl/isoProject world geometry, platforms, and objects into renderer-neutral isometric scenes.
Source & documentation ↗Portable rendering
CTX
@versytl/ctxTranslate scene artwork for a CTX drawing target alongside the browser SVG renderer.
Source & documentation ↗External data
Bridge
@versytl/bridgeAn explicit adapter registry and a Go Getter pipeline source. Hosts control credentials, polling, and lifecycle.
Source & documentation ↗Dashboard documents
Stasis
@versytl/stasisHeadless parsing, validation, bindings, and serialization for SVG dashboards shared by Stasis Builder and Pages.
Source & documentation ↗Built to stay understandable
Portable by structure.
Expressive by design.
The document is more than a picture.
Semantic components travel with the artwork, preserving the facts an application needs.
Engines stay in their own lanes.
Renderers draw. Layout measures. Physics simulates. Shared records merge edits. Applications choose how the pieces work together.
What you see remains yours.
Open formats and visible controls make graphical applications easier to understand, edit, and carry forward.