Getting Started

Add VenJS to your project — either clone the repo for full control, or use the CDN for quick prototyping.

1. Installation

Choose the method that fits your project size:

Clone the repo Recommended

Best for large applications where you want the full folder structure (components/, logic/, libs/) and local editing.

git clone https://github.com/Myxo-victor/venjs
cd venjs

CDN Simple apps

Drop a single script tag into any HTML page for lightweight, no-build usage. You won't get the libs/ folder or local ven.php, but the core engine works.

<script src="https://cdn.jsdelivr.net/gh/Myxo-victor/venjs@latest/ven.js"></script>

2. Serve the project

VenJS uses classic scripts and fetches a backend endpoint, so it must be opened over HTTP (not file://). Use any static server:

# PHP built-in server
php -S localhost:8000

# or Node
npx serve .

# or Python
python -m http.server 8000

Then open http://localhost:8000/venjs/ (the included venjs/ folder is a ready-made demo).

3. Understand the entry point

The launcher is venjs/index.html. It loads the engine, then your page components and business logic:

<div id="app"></div>
<script src="./ven.js"></script>
<script src="./components/home.js"></script>
<script src="./components/about.js"></script>
<script src="./components/router.js"></script>
<script src="./logic/app.js"></script>

4. Write your first page component

Create a component as a plain function that returns a VNode. Each page gets its own file:

// components/home.js
const HomePage = () => venjs.div({ class: "page" }, [
  venjs.h1({}, "Hello from VenJS"),
  venjs.p({}, "Edit me and watch the UI update.")
]);

window.HomePage = HomePage;

5. Add reactive state

Wrap a value in venjs.signal() and read it inside an venjs.effect(). The effect re-runs whenever the signal changes and the DOM is patched automatically.

// logic/app.js
const app = document.getElementById("app");
const name = venjs.signal("world");

const Greeting = () => venjs.div({}, [
  venjs.input({
    value: name.value,
    oninput: (e) => (name.value = e.target.value)
  }),
  venjs.p({}, `Hello, ${name.value}!`)
]);

venjs.effect(() => venjs.render(app, Greeting));

6. Next steps