Live demos — fork any example

Built with
EdgeLiteDB.

Real, runnable examples. From a 20-line counter to a fully adaptive dashboard — study the pattern, fork the code, ship faster.

Featured
Interactive demos — run them right here.
live
0
Reactive counter

The canonical EdgeLiteDB hello-world. edge() + sync() wired together. 18 lines of code, zero dependencies.

edge()sync()
full source →
live
// todo list — edge()
install edgelitedb
define first component
mount to the DOM
ship to the edge
Adaptive todo list

A todo list that compacts on mobile using adapt.compact(). Tap targets auto-expand on touch. Click the third item.

adapt.compact()adapt.tapTarget()
full source →
live
/
/about
/user/42
Home
You are at the root route.
SPA with router

Client-side routing with @edgelitedb/router. History API, :param segments, and catch-all routes — under 1kb.

router()edge()
full source →
live signals
tap misfire
12%
scroll jank
4%
layout shift
7%
adapt triggers
28%
Signal mesh visualiser

Watch EdgeLiteDB's anonymous telemetry pipeline in real time. Signals fluctuate to show how the adaptive engine responds to real device data.

SignalBusadapt
full source →
beginner
const Btn = edge({
template: `<button>${label}</button>`,
adaptive: adapt.tapTarget()
});
Adaptive button

A single button that auto-enlarges on touch devices using adapt.tapTarget(). The simplest possible adaptive component.

edge()adapt.tapTarget()
open →
intermediate
adaptive: adapt.compose(
adapt.compact(),
adapt.tapTarget(),
adapt.retina()
)
Multi-rule card

A card that adapts tap targets, compacts on narrow viewports, and swaps @2x images on retina screens — simultaneously.

adapt.compose()adapt.retina()
open →
intermediate
const r = router({
'/': Home,
'/u/:id': User,
'*': NotFound
});
r.init();
SPA router

Multi-route SPA using edgelitedb-router. History API push state, param extraction, nested layouts.

router()edge()
open →
intermediate
hooks: {
mounted(el) {
// runs after DOM insert
el.querySelector('input')
.focus();
}
}
Lifecycle hooks

Using beforeRender, afterRender, mounted, and updated to run imperative side effects around the render cycle.

hooksedge()
open →
advanced
// Deno edge function
import { renderToString }
from 'edgelitedb/ssr';

const html = renderToString(
Page, props
);
Edge SSR

Server-rendering components in a Deno Deploy edge function. Hydrates on the client with zero overhead for static routes.

@edgelitedb/ssrDeno
open →
advanced
EdgeLiteDB.rule('dark-mode',
(meta, env) => ({
theme: matchMedia(
'(prefers-color-scheme: dark)'
).matches ? 'dark' : 'light'
}));
Custom adapt rule

Register a global adaptive rule that injects OS-level dark mode preference into every component tree automatically.

EdgeLiteDB.rule()adapt
open →
advanced
// TypeScript
interface CardProps {
title: string;
compact?: boolean;
}
const Card = edge<CardProps>({...});
TypeScript setup

Full type safety with EdgeLiteDB's generic edge() overloads. Prop types, adapt rule types, and store generics all included.

TypeScriptedge()
open →
beginner
const store = sync({ user: null });
store.set('user', { name: 'ada' });
// all subscribers notified
store.subscribe(s =>
console.log(s.user.name)
);
State with sync()

Walkthrough of the sync() store: get, set, patch, subscribe, and reset. The entire reactive foundation of EdgeLiteDB.

sync()
open →