Zog.js - Full Reactivity with Minimal Code Size | Minimalist JavaScript Framework

Why Choose Zog.js?

Modern reactivity without the complexity

⚡

Lightning Fast

Ultra-lightweight at 8KB minified (3.50KB gzip). No build step, no dependencies, just pure reactivity.

🎯

Reactive Primitives

Powerful ref, reactive, computed, and watchEffect APIs inspired by modern frameworks.

🔌

Zero Dependencies

No external libraries needed. Works directly in the browser with ES modules.

Quick Start

Get up and running in seconds

Install via NPM

npm install zogjs

<script type="module">
  import { createApp, ref } from 'zogjs';
</script>

Usage by CDN

<script type="module">
  import { createApp, ref } from 'https://cdn.zogjs.com/zog.es.js';
</script>

Define Your HTML

Create a container element with reactive template syntax

Import zogjs

Load the library via CDN or local ES module

Create Your App

Use createApp with reactive state and mount it

Core Concepts

Everything you need to build reactive applications

Reactivity Primitives

ref(value) - Creates a reactive reference with .value
reactive(object) - Returns a reactive proxy of an object
computed(getter) - Memoized reactive value
watchEffect(fn) - Run reactive effects automatically

Template Directives

z-if / z-else-if / z-else - Conditional rendering
z-for - Loop through lists
z-model - Two-way data binding
z-show - Toggle visibility
@event - Event listeners

Template Interpolation

Use double curly braces for reactive data binding:

<p> Hello, {{ name }} </p>

Examples

See Zog.js in action

<div id="counter">
  <p>Count: <span z-text="count"></span></p>
  <button @click="inc">+1</button>
</div>

<script type="module">
import { createApp, ref } from './zog.js';

createApp(() => {
  const count = ref(0);
  const inc = () => count.value++;
  return { count, inc };
}).mount('#counter');
</script>

<div id="todo">
  <input z-model="newItem" placeholder="Add todo" />
  <button @click="add">Add</button>

  <ul>
    <li z-for="(item, i) in todos">
      {{ i + 1 }}. {{ item }}
      <button @click="remove(i)">remove</button>
    </li>
  </ul>
</div>

<script type="module">
import { createApp, reactive, ref } from './zog.js';

createApp(() => {
  const state = reactive({ todos: ['Buy milk'] });
  const newItem = ref('');

  function add() {
    if (newItem.value.trim()) {
      state.todos.push(newItem.value.trim());
      newItem.value = '';
    }
  }

  function remove(i) {
    state.todos.splice(i, 1);
  }

  return { todos: state.todos, newItem, add, remove };
}).mount('#todo');
</script>

<div id="cond">
  <button @click="toggle">Toggle</button>
  <template z-if="show">
    <p z-html="htmlContent"></p>
  </template>
</div>

<script type="module">
import { createApp, ref } from './zog.js';

createApp(() => {
  const show = ref(true);
  const htmlContent = ref('<em>Rendered HTML</em>');
  const toggle = () => show.value = !show.value;
  return { show, htmlContent, toggle };
}).mount('#cond');
</script>

Template Directives

Quick reference guide

Directive	Purpose	Example
`{{ expr }}`	Interpolate JS expression from scope	`<p>Hello, {{ name }}</p>`
`z-if` / `z-else`	Conditional rendering	`<div z-if="isOpen">Open</div>`
`z-for`	Loop through arrays	`<li z-for="item in items">{{ item }}</li>`
`z-text`	Set textContent	`<p z-text="message"></p>`
`z-html`	Set innerHTML	`<div z-html="rawHtml"></div>`
`z-show`	Toggle display style	`<div z-show="visible">...</div>`
`z-model`	Two-way binding	`<input z-model="value" />`
`@event`	Event listener	`<button @click="handler">Click</button>`

Why Choose Zog.js?

Lightning Fast

Reactive Primitives

Zero Dependencies

Quick Start

Install via NPM

Usage by CDN

Define Your HTML

Import zogjs

Create Your App

Core Concepts

Reactivity Primitives

Template Directives

Template Interpolation

Examples

Template Directives

When Zog.js is NOT the Right Choice