Docs / Core Concepts
ven.js
Core Concepts
Everything in VenJS hangs off one global object: venjs (also aliased as venX, venjs.render = venjs.mount).
The venjs object
After the engine script loads, a single venjs instance is created and attached to window. It is wrapped in a Proxy so that any unknown property becomes a VNode factory — that is how venjs.div(), venjs.h1(), and custom tags like venjs.my-card() all work.
// These all exist on the core object:
venjs.signal(0) // reactive value
venjs.effect(fn) // reactive effect
venjs.createElement(...) // build a VNode (also window.v)
venjs.render(el, factory) // mount + patch into the DOM
venjs.createRouter(...) // client-side router
venjs.createStore({...}) // global store
venjs.api.connect(...) // fetch wrapper
venjs.db.connect(...) // secure DB client
venjs.animate(...) // scroll animations
venjs.notification.* // push notifications
// Any other tag is created on demand:
venjs.section({ class: "x" }, "hi") // -> VNode(tag:"section")
venjs.svg({ viewBox: "0 0 10 10" }) // -> VNode(tag:"svg")Mental model
1
One page per file. Each route lives in
components/<page>.js (e.g. home.js, about.js). The router maps paths to these page components.2
Separate logic from UI. Keep API calls and workflows in
logic/<feature>.js (e.g. logic/login.js). Import them into your page components.3
Describe UI as functions. A component is a function returning a VNode tree built from
venjs.<tag>().4
Read signals inside components. Accessing
signal.value registers the current effect as a subscriber.5
Render reactively.
venjs.effect(() => venjs.render(el, Component)) re-runs and patches only changed nodes.6
Talk to the backend.
venjs.api for generic fetch, venjs.db for the secure ven.php endpoint.Environment detection
venjs.isWeb is true when running in a browser (window + document exist). Rendering, router and notification features no-op safely outside the browser, so the engine can also be required in Node for testing.
if (typeof module !== "undefined") module.exports = venjs; // CommonJS exportCore API map
| Area | API | Docs |
|---|---|---|
| Reactivity | signal, effect | Signals & Effects |
| Rendering | render, createElement, venjs.<tag> | Rendering & VNodes |
| Routing | createRouter | Router |
| State | createStore | Store |
| Networking | api.connect, api.query | API Client |
| Animation | animate | Animate |
| Push | notification.* | Notifications |