Framework-Free Client Web Apps Available · NPM Package

Vanilla JS · Web Components · State Proxy

Full-featured client SPAs
with pure Vanilla JS and zero frameworks.

A production-grade engineering track instructing AI agents to build real client-side SPAs (state, client-side routing, Web Components, data fetching) with framework-free modern JavaScript and zero runtime bloat.

npm Install via NPM open_in_new menu_book Vanilla JS Guide GitHub

check_circle Zero Dependencies check_circle < 10KB Payload check_circle W3C Web Standards

javascript app.vanilla.js

JS <smart-dashboard>

Shadow DOM

const state = new Proxy({ count: 0 }, handler);

customElements.define('smart-dashboard', Dashboard);

8.4 KB

Total Size

0 NPM

Dependencies

1.2 ms

Boot Time

memory

Zero Runtime Dependencies

Eliminate fragile dependency trees. Runs purely on standard browser APIs with zero framework maintenance churn.

electric_bolt

Tiny < 10KB Bundle Payload

Instant browser parsing and execution under 2ms. No massive 500KB framework hydration penalty.

all_inclusive

Web Standards Forever Code

Built strictly on W3C web standards (Custom Elements, Shadow DOM, Proxies) that will run reliably for decades.

THE JAVASCRIPT BLOAT TRAP

WHY SHIP 500KB OF FRAMEWORK CODE FOR A SIMPLE APP?

Modern frameworks demand massive bundle payloads, brittle build toolchains, and heavy memory usage. Modern JavaScript now natively handles state, routing, and components.

cancel

Heavy Framework Bloat & Churn

✕ Bloated 500KB+ bundles degrading mobile page responsiveness.
✕ Hundreds of fragile NPM dependencies creating security risks.
✕ Fragile Webpack/Babel toolchains breaking after a few months.
✕ Vendor lock-in into fast-evolving frameworks requiring frequent rewrites.

check_circle

The TidyFactor Vanilla JS Standard

✓ Ultra-lean < 10KB total payload with sub-2ms instant boot times.
✓ Zero third-party runtime dependencies and zero supply-chain vulnerabilities.
✓ Pure ES Modules running natively in all modern browsers without build lag.
✓ Standard W3C APIs (Web Components, Proxies) guaranteed to run forever.

REAL-WORLD USE CASES

WHAT CAN YOU BUILD WITH TIDYFACTOR JS?

Complete browser-native applications combining maximum speed with total longevity.

web

Framework-Free Client SPAs

Full-featured client applications with client-side routing, shared state, and view transitions.

extension

Autonomous Web Components

Encapsulated, reusable UI widgets running natively across any tech stack without framework lock-in.

insights

Lightweight Embedded Dashboards

Fast data visualization widgets and admin tools embeddable anywhere without bloating load times.

wifi_off

Offline-First & Local Web Tools

Fast client-side tools, converters, and editors functioning completely offline inside the user browser.

CORE PILLARS

THE 4 PILLARS OF TIDYFACTOR JS

Engineering principles ensuring zero-bloat execution and permanent maintainability.

Zero-Dependency Architecture

100% native browser APIs eliminating supply chain vulnerabilities and bloated node_modules.

Reactive State via Native Proxies

Fine-grained reactive state management using native JavaScript Proxies with zero Virtual DOM overhead.

Encapsulated Web Components

True style and logic encapsulation via Custom Elements and Shadow DOM without CSS leakage.

Client Routing & Native ES Modules

History API and Hash router implementations running directly on browser ES Modules without a bundler.

TIDYFACTOR ECOSYSTEM INTEGRATION

VANILLA JS POWERS THE LOGIC. STYLER CRAFTS THE UI.

Seamless synergy: Engineer zero-framework logic with TidyFactor JS, style components with TidyFactor Styler, and execute marketing with TidyFactor Marketing.

Explore All Products arrow_forward

terminal Installation Options & AI Agent Slash Commands

expand_more

Installation command for framework-free SPAs and reactive Web Components. Recognized natively by AI coding agents (Antigravity, Claude Code, Cursor, Codex, Windsurf).

$ npx skills add @alwkala/tidyfactor-js

Available Slash Commands in AI Agent IDEs:

/component

Build custom Web Component.

/router

Client-side routing engine.

/store

Proxy-based reactive state.

/build

Audit & zero-build output.

Read Full Documentation → Explore Repository on GitHub →

Full-featured client SPAs with pure Vanilla JS and zero frameworks.