Build on the supported package contract
Use absolutejs-sync-example through its supported public entry points.
absolutejs-sync-example
absolutejs-sync-examplev0.0.1betaDev ToolsThe @absolutejs/sync Tier 3 sync engine, shown across every framework AbsoluteJS supports. A shared task list is a live collection: each page hydrates once over a WebSocket, then the server pushes { added, removed, changed } diffs — no polling. Edits apply optimistically and reconcile when the server confirms. Open two tabs (or two frameworks) and every open client stays in sync.
#Installation
BASH
# Private workspace project: ~/abs/examples/sync#Capabilities
Overview
The @absolutejs/sync Tier 3 sync engine, shown across every framework AbsoluteJS supports. A shared task list is a live collection: each page hydrates once over a WebSocket, then the server pushes { added, removed, changed } diffs — no polling. Edits apply optimistically and reconcile when the server confirms. Open two tabs (or two frameworks) and every open client stays in sync.
How it works
Server (src/backend/sync.ts): createSyncEngine() registers a tasks
collection and addTask/toggleTask/removeTask mutations, exposed over one Elysia WebSocket via syncSocket at /sync/ws. A mutation writes the in-memory store and emits the row change; the engine turns it into a diff for every subscriber.
Client — one idiomatic binding per framework, all over the same socket:
Show 7 more
React (/): useSyncCollection from @absolutejs/sync/react
Vue (/vue): useSyncCollection from @absolutejs/sync/vue
Svelte (/svelte): createSyncCollectionStore from @absolutejs/sync/svelte
Angular (/angular): SyncCollectionService from @absolutejs/sync/angular
HTML & HTMX (/html, /htmx): a native WebSocket speaking the engine's
frame protocol directly — no framework runtime needed.
All of them return the same { data, status, error, mutate } and open the socket on the client only (SSR-safe).
Sandboxed handlers
This example keeps mutation handlers in-process so the sync surfaces are easy to inspect. For customer-authored mutations, AI-generated transforms, or plugin code, install @absolutejs/isolated-jsc@0.8.0 and use sync's sandboxedHandler; the engine now routes those handlers through isolated-jsc's createIsolatedRunner() + tenant-script policy instead of calling them directly in the app process.
Use backend: "ffi" for hostile-code production paths on macOS/Linux where JavaScriptCore is available.
Use backend: "auto" for local development, CI, and demos so the Worker fallback keeps the example portable.
Show 3 more
If you must rely on the Worker fallback for arbitrary third-party code, add process/container isolation and avoid sharing host secrets or broad network/file permissions.
Expose host powers through narrow actions. bridges: validate inputs, set timeouts, and audit calls.
The hosted AbsoluteJS sync path uses this shape for sandboxed per-tenant mutation handlers; this example stays unsandboxed to keep the framework bindings and reactive collections front and center.
Run
Open and a second tab on /vue (or any framework). Add, toggle, or delete a task in one — they all update together.
One page per framework
Route — Framework — Binding
/ — React — useSyncCollection (/react)
/vue — Vue — useSyncCollection (/vue)
Show 4 more
/svelte — Svelte — createSyncCollectionStore (/svelte)
/angular — Angular — SyncCollectionService (/angular)
/html — HTML — native WebSocket
/htmx — HTMX — native WebSocket
Outcomes
What you can build
Hardening checklist
Production guidance
Make every external boundary explicitPin the deployed absolutejs-sync-example version, replace example or memory-backed dependencies with durable implementations, bound external calls, protect credentials, and emit enough evidence to retry or recover safely.
Follow in order
Troubleshooting path
1
Trace from the first failed boundary
Reproduce the smallest canonical absolutejs-sync-example example, confirm the supported entry point and version in the API explorer, then inspect the first boundary that did not produce its documented result.
#Run
Partial snippetWorking example for Run.
BASH
bun install
bun run dev#Package commands
Scripts declared by this package manifest.
bun run devabsolute dev
bun run formatabsolute prettier --write
bun run lintabsolute eslint
bun run startabsolute start
bun run testplaywright test
bun run typecheckabsolute typecheck
Private workspace project
This project is maintained inside the workspace and is not published as a standalone npm package.