Docs / Overview
README
Lightweight · Reactive · Full-Stack

VenJS 5.10.0 Documentation

A high-performance, lightweight JavaScript framework for building reactive, component-driven web interfaces — with a clean component API, signals, a fast reconciliation engine, animation helpers, native notifications, and a secure PHP backend.

Get Started Explore the Core Engine
🎉 New in VenJS 5.10.0: Introducing Smooth.js — a seamless, continuous infinite ticker slider powered by requestAnimationFrame delta-time rendering. Five visual libraries now ship in libs/.

What is VenJS?

VenJS is a single-file frontend engine (ven.js) plus an optional secure backend (ven.php) and a bundle of visual libraries (libs/). It gives you a declarative component model and fine-grained reactivity without a build step.

Reactivity

Signals & Effects

Fine-grained reactive state with automatic dependency tracking.

 Rendering

VNode Engine

Declarative DOM with a stable recursive reconciliation patch system.

 UI

Components

Prebuilt Button, Input, AppBar, SideBar, BottomNav and Card.

 Routing

Client Router

Hash and history modes with a tiny signal-driven router.

 Backend

Database Engine

Secure client-to-database CRUD over prepared statements.

 Libraries

Visual Libs

ScrollEcho, Racket, Orbit, Rinx and Smooth animation/scroller helpers.

Highlights

⚡
No build step. Drop ven.js into a script tag and start writing components.
🔁
Reactive signals. venjs.signal() + venjs.effect() re-render only what changed.
🧩
Declarative tags. venjs.div(), venjs.h1(), and any custom tag via the Proxy engine.
🔒
Secure backend. PDO prepared statements, identifier allowlists, CORS and timing-safe keys.
🎞️
Smooth ticker. New in 5.10.0 — a continuous, frame-rate-independent infinite ticker slider.
📣
Notifications. Service-worker push wired to a PHP device-registration endpoint.

A 30-second taste

const app = document.getElementById("app");
const count = venjs.signal(0);

const Counter = () => venjs.div({ class: "counter" }, [
  venjs.h1({}, `Count: ${count.value}`),
  venjs.button({ onclick: () => count.value++ }, "Increment")
]);

// Automatically patches the DOM on every state update
venjs.effect(() => venjs.render(app, Counter));