Skip to content

JAYONCODEJOC Ecosystem

Headless TypeScript libraries for real frontend infrastructure — one package, one job. Install only what you need. Docs and playgrounds stay honest with the API.

4 flagship libraries 100% TypeScriptOpen Source
Official reference app Draft Desk See the four JOC packages working together in one resilient form experience. Launch Draft Desk
JayOnCode™ — JOC Ecosystem logo
Flagship libraries

Independent @jayoncode/* libraries — same docs, playgrounds, and SemVer discipline across the ecosystem.

Live

Browser Lifecycle

@jayoncode/browser-lifecycle

Observe browser state. Derive session intelligence. React with confidence.

  • Observe
  • Understand
  • React
  • Timeline
  • Insights
View docs →
Live

Form Intelligence

@jayoncode/form-intelligence

Declare the workflow. Keep the markup. Submit with confidence.

  • Declare
  • Orchestrate
  • Submit
  • Rules
  • Drafts
View docs →
Live

Object Diff

@jayoncode/object-diff

Stop guessing what changed. Get paths, patches, and review-ready output.

  • Compare
  • Review
  • Patch
  • Merge
  • DiffView
View docs →
Live

Storage

@jayoncode/storage

Namespace it. Expire it. Upgrade it — without localStorage glue.

  • Adapters
  • TTL
  • IndexedDB
  • Quota
  • Transforms
View docs →
Choose by problem

What are you trying to build?

Arrive with a problem — not a package name. Pick an intent and we’ll point you at the right library.

RecommendedLive

Browser Lifecycle

@jayoncode/browser-lifecycle

Pause work when the tab is hidden, idle, or the network drops

  • Observe
  • Understand
  • React
  • Timeline
  • Insights
Quick start

Real code. One screen.

Pause work when the tab is hidden

@jayoncode/browser-lifecycleLive
import { createBrowserLifecycle } from "@jayoncode/browser-lifecycle";

const lifecycle = createBrowserLifecycle({
  autoStart: true,
  idleTimeout: 60_000,
});

lifecycle.on("page:hidden", () => {
  pausePolling();
  pauseMedia();
});

lifecycle.on("page:visible", () => {
  resumePolling();
});

lifecycle.on("session:idle", () => {
  lockSensitiveScreen();
});

lifecycle.on("connection:reconnect", () => {
  flushOfflineQueue();
});
Ecosystem

How the pieces fit

Independent TypeScript cores, optional framework adapters, and shared docs — not a monolithic SDK.

Vision

What the JOC Ecosystem is becoming

An ecosystem of independent, headless TypeScript libraries — framework-agnostic cores, documentation as a product, and interactive playgrounds. Install only what you need. Compose when you need more.

New here?

Learning path

  1. What the JOC Ecosystem is
  2. Browse packages
  3. Quick start a package
  4. Try the playground
  5. See the roadmap
Interactive playground

Try packages before you install

Explore Browser Lifecycle, Form Intelligence, Object Diff, and Storage live — hide the tab, edit a form, diff two objects, or exercise persistence in the browser.

Package catalog

Available now

Three live packages on npm. More libraries will be announced as they enter development.

4Live on npm
Live

Browser Lifecycle

@jayoncode/browser-lifecycle

Observe browser state. Derive session intelligence. React with confidence.

View docs
Live

Form Intelligence

@jayoncode/form-intelligence

Declare the workflow. Keep the markup. Submit with confidence.

View docs
Live

Object Diff

@jayoncode/object-diff

Stop guessing what changed. Get paths, patches, and review-ready output.

View docs
Live

Storage

@jayoncode/storage

Namespace it. Expire it. Upgrade it — without localStorage glue.

View docs

An ecosystem of independent, headless TypeScript libraries engineered for modern web development. Every package includes interactive playgrounds and documentation that evolves alongside the code.