Guide

Architecture

How Zumly is built, explored with Zumly. The library is a stack of seven layers: the toolchain at the bottom, the engine in the middle, the DOM the browser paints at the top. Open a layer to see its files, open a file to see what it exposes and what it depends on, and follow a navigation step by step through the layers it crosses.

Live map · runs on ZumlyOpen ↗

Click a card to enter. Click outside the current view, scroll, press ← or swipe to go back. The breadcrumb at the top jumps to any level.

How to read it

  • The stack. Every layer uses the ones below it. Z0 is packaging, build, tests and docs; Z1 the entry points of the package; Z2 the Zumly class and its helpers; Z3 turns a value in views into a DOM node; Z4 the transition drivers; Z5 the optional rasterize and WebGL renderers; Z6 what is in the document while an app runs.
  • The strip. Each sheet shows the seven layers as a strip. The bright one is where you are; the medium ones are the layers that sheet is wired to.
  • Across the layers. Flows, Options and API are not layers: they say how the layers work together, and every chip in them links back to a file in the stack. Chips carry the number of their layer.
  • Lines. The number on a file is its line count in src/ at the version shown on the root view.

What the map itself uses

The page is a plain Zumly app: one views object whose entries are functions that build each sheet from a small data set, triggers with data-to and data-title, and the built-in controls.

new Zumly({
  mount: '#app',
  initialView: 'root',
  views,
  transitions: {
    duration: '750ms',
    ease: 'cubic-bezier(.2,.8,.2,1)',
    hideTrigger: 'fade',
    effects: ['brightness(.8)', 'brightness(.55)']
  },
  depthNav: { style: 'title' },
  lateralNav: { arrows: true, dots: true },
  gestures: { follow: true },
  inputs: { pinch: true }
})

Two details worth copying. The chips inside a sheet carry data-sibling="false", so only the cards of a layer form the sibling bar and a link does not become a dot. And the effects behind use brightness without blur: a chain of small triggers scales the views behind many times over, and a blur on a layer that large costs the whole frame budget.

Keep reading

The API reference lists every option, method and event. DRIVER_API.md describes the contract a driver receives, and Heavy views covers the rasterize and WebGL layers in depth.