v1.4.0

Modern TypeScript libraries for high-quality web apps

Lightweight · Type-safe · Framework agnostic · Tree-shakeable

Get Started

Browse Packages

GitHub

Lightweight

Only import what you use. Tree-shakeable packages with no monolithic SDK.

TypeScript first

Designed for excellent DX — typed APIs, clear contracts, predictable errors.

Framework agnostic

React, Vue, Angular, Svelte, or vanilla — the same headless cores everywhere.

Modular

Every package works independently, and composes cleanly when you need more.

Why JOC

Build once. Use everywhere.

JOC is a collection of modern, modular, headless TypeScript libraries that solve common frontend engineering problems — without locking you into a framework.

Ecosystem

JOC packages

Independently installable libraries under @jayoncode/*. Start with a live package, or explore what is coming next.

3Live on npm

Live

Browser Lifecycle

@jayoncode/browser-lifecycle

Observe browser session lifecycle with a unified typed API.

Documentation

Live

Form Intelligent

@jayoncode/form-intelligent

Headless form workflow engine — validation, submission, and orchestration.

Documentation

Live

Object Diff

@jayoncode/object-diff

Fast deep comparison, change records, and JSON Patch generation.

Documentation

Why choose JOC

Problems first. Packages second.

Problem	JOC solution
Browser lifecycle is inconsistent across APIs and frameworks	Browser Lifecycle
Form logic becomes complex as validation, drafts, and wizards grow	Form Intelligent
Object comparison and patching is verbose and error-prone	Object Diff

Design philosophy

Learn once. Reuse everywhere.

Every JOC package follows the same architecture, API philosophy, documentation structure, and development standards — so the second package feels familiar.

Write less

Shared patterns instead of one-off utilities per app.

Ship less

Install only the @jayoncode/* packages you need.

Learn once

Same docs journey and API philosophy across the ecosystem.

Reuse everywhere

Headless cores that adapt to your UI stack.

Architecture

Ecosystem layers

Packages stay independent at the TypeScript core, then plug into any application layer.

Applications

ReactVueAngularSvelteVanilla

JOC packages

Browser LifecycleForm IntelligentObject Diff

TypeScript core

Headless, typed, tree-shakeable modules

Package comparison

Status at a glance

Package	Purpose	Status
Browser Lifecycle	Browser lifecycle	Released
Form Intelligent	Headless forms	In development
Object Diff	Object comparison	Released

Quick start

Install a package. Start building.

Pick any live package — the install path is the same across the ecosystem.

browser-lifecycleLive

pnpm add @jayoncode/browser-lifecycle

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

const lifecycle = createBrowserLifecycle({ autoStart: true });

Package docs

form-intelligentLive

pnpm add @jayoncode/form-intelligent

import { createForm } from "@jayoncode/form-intelligent";

const form = createForm({
  initialValues: { email: "" },
});

Package docs

Package showcase