EdgeLiteDB
documentation.

Everything you need to build adaptive, edge-first UIs. Start with the quick start, dive into the API reference, or jump straight to a guide.

Installation

EdgeLiteDB ships from https://edgelitedb.io/v1/ as native ES modules. No build step required — import directly in the browser or any modern runtime.

CDN (zero install)

any .js or .html file
import EdgeLiteDB from 'https://edgelitedb.io/v1/core.js';
import { edge, adapt, sync } from 'https://edgelitedb.io/v1/runtime.js';

npm / pnpm / bun

terminal
# pick your package manager
npm  install edgelitedb
pnpm add     edgelitedb
bun  add     edgelitedb

EdgeLiteDB targets ES2020+. For legacy browser support, run the output through your existing transpile pipeline — EdgeLiteDB itself ships untranspiled ESM.

Quick start

Define a component with edge(), create reactive state with sync(), mount it, and subscribe to re-render on changes.

app.js
import { edge, adapt, sync } from 'https://edgelitedb.io/v1/runtime.js';

// 1. Define an adaptive component
const Card = edge({
  template: `
    <div class="card ${compact ? 'card--sm' : ''}">
      <h2>${title}</h2>
      <p>${body}</p>
    </div>
  `,
  props: ['title', 'body'],
  adaptive: adapt.compact({ breakpoint: 480 }),
  styles: `.card { padding: 2rem; border: 1px solid #ccc; }
           .card--sm { padding: 1rem; font-size: .9rem; }`
});

// 2. Create reactive state
const store = sync({ title: 'Hello edge', body: 'Rendered at the edge.' });

// 3. Mount and subscribe
Card.mount('#app', store.get());
store.subscribe(state => Card.update('#app', state));

// 4. Trigger a re-render
store.set('title', 'Updated!');

Core concepts

Templates

Templates are standard JavaScript template literal strings. Every prop in the props array is available as a bare variable inside the template. EdgeLiteDB compiles them to a cached render function at component definition time — not on every render.

Adaptive layer

The adaptive option accepts any adapt.* rule or a composed set of rules. At render time, the adaptive layer reads the current ENV snapshot and injects additional props into the template. No manual device detection needed.

Signal mesh

EdgeLiteDB silently collects anonymous UI error signals (tap misfires, scroll jank, layout shift) and forwards them to the edge aggregator. These signals inform future adaptive rule updates. All signals are hashed and stripped of PII at the device before transmission.

edge( definition ) → Component

The primary factory for creating EdgeLiteDB components.

Option	Type	Required	Description
template	string	Yes	Template literal string. Props are injected as bare variables.
props	string[]	No	Documented prop names. Used for type hints and devtools.
adaptive	AdaptRule	No	An adapt.* rule or adapt.compose(...rules). Runs before every render.
hooks	object	No	Lifecycle hooks: beforeRender, afterRender, mounted, updated.
styles	string	No	CSS string injected once into document head. Scoped by a generated ID.

The returned Component has three methods: .render(props) returns an HTML string, .mount(selector, props) writes into the DOM, .update(selector, props) diffs and re-writes only when output changes.

adapt.*

All adapt helpers return an object with a .resolve(meta, env) method that merges additional props into the component at render time.

adapt.tapTarget( options )

Injects _tapMin on touch devices. Use it in templates to conditionally apply minimum touch target sizing.

minSize — minimum pixel size (default: 44)
signal — signal name to watch (default: 'misfire-rate')

adapt.compact( options )

Injects compact: true when the viewport is narrower than breakpoint (default: 480px).

adapt.retina( options )

Injects _retinaMode: true and _suffix when devicePixelRatio >= 2. Use to swap in @2x images.

adapt.compose( ...rules )

Merges multiple adapt rules into one. Rules are applied left-to-right; later rules can override earlier ones.

example
const MyBtn = edge({
  template: `<button style="min-width:${_tapMin ?? 0}px" class="${compact ? 'sm' : ''}">${label}</button>`,
  adaptive: adapt.compose(
    adapt.tapTarget(),
    adapt.compact({ breakpoint: 600 })
  )
});

sync( initialState ) → Store

A minimal reactive state container. Designed to be used alongside edge() for fully reactive component trees.

Method	Description
.get(key?)	Read one key or the entire state object.
.set(key, value)	Update a single key, notifies all subscribers.
.patch(partial)	Shallow-merge a partial object into state.
.subscribe(fn)	Called with the full state after every update. Returns unsubscribe fn.
.reset()	Restore initial state and notify subscribers.

router( routes ) → Router

Hash/history API router. Route keys are path strings supporting :param segments. A * key acts as a catch-all.

router example
import { router } from 'https://edgelitedb.io/v1/router.js';

const r = router({
  '/':           HomeView,
  '/user/:id':  UserView,
  '*':          NotFoundView
});

r.on(({ handler, params }) => handler.mount('#app', params));
r.init();  // attach to browser history

ENV

A read-only object resolved at import time. Useful for any manual device branching outside of the adaptive layer.

Property	Type	Values
ENV.platform	string	'browser' \| 'node' \| 'deno' \| 'bun' \| 'edge'
ENV.device	string	'mobile' \| 'tablet' \| 'desktop'
ENV.touch	boolean	true if ontouchstart is available
ENV.dpr	number	devicePixelRatio (1, 1.5, 2, 3…)
ENV.ua	string	Full user agent string

Telemetry & privacy

EdgeLiteDB's adaptive engine learns from anonymous device signals. Here's exactly what is and isn't collected:

Tap misfire rate (did the user hit the target?)
Scroll jank events (frame drops during scroll)
Layout shift score (CLS events)
Device class and DPR (mobile/tablet/desktop, not fingerprinted)

No URLs, no user identifiers, no session data, and no content is ever transmitted. To opt out entirely:

opt out
import EdgeLiteDB from 'https://edgelitedb.io/v1/core.js';
EdgeLiteDB.configure({ telemetry: false });

Next → Examples

EdgeLiteDBdocumentation.

Installation

CDN (zero install)

npm / pnpm / bun

Quick start

Core concepts

Templates

Adaptive layer

Signal mesh

edge( definition ) → Component

adapt.*

adapt.tapTarget( options )

adapt.compact( options )

adapt.retina( options )

adapt.compose( ...rules )

sync( initialState ) → Store

router( routes ) → Router

ENV

Telemetry & privacy

EdgeLiteDB
documentation.