Full reactivity with minimal code size.
Zog.js is a minimalist JavaScript library for building reactive user interfaces. It allows you to write clean, declarative templates directly in your HTML and power them with a simple, yet powerful, reactivity system. Inspired by the best parts of modern frameworks, Zog.js offers an intuitive developer experience with zero dependencies and no build step required.
ref (primitives only), reactive (objects/arrays), computedwatchEffect with automatic dependency tracking{{ }})z-if, z-for, z-text, z-html, z-show, z-model, z-on (shorthand @)createApp(...).mount(selector) and .unmount()app.use(plugin, options) for modular extensionsnpm install zogjs
<script type="module">
import { createApp, ref } from 'zog.js';
// or from CDN
import { createApp, ref } from 'https://cdn.zogjs.com/0.4.7/zog.js';
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zog.js Counter</title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>Current count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
<script type="module">
import { createApp, ref } from './zog.js';
createApp(() => {
const title = ref('Counter App');
const count = ref(0);
const increment = () => count.value++;
const decrement = () => count.value--;
return { title, count, increment, decrement };
}).mount('#app');
</script>
</body>
</html>
ref(primitive) — For primitive values onlyCreates a reactive reference for strings, numbers, and booleans only.
const count = ref(0);
count.value++; // Triggers reactive updates
// In templates, .value is automatically unwrapped:
// {{ count }} instead of {{ count.value }}
⚠️ Important (v0.4.7): ref() throws an error if passed an object or array. Use reactive() instead.
// ❌ WRONG - throws error
const user = ref({ name: 'John' });
// ✅ CORRECT
const user = reactive({ name: 'John' });
reactive(object) — For objects and arraysReturns a deep reactive proxy of an object or array.
const state = reactive({
user: { name: 'John', age: 30 },
todos: ['Learn Zog.js']
});
// All nested properties are reactive
state.user.age = 31;
state.todos.push('Build an app');
Array reactivity: All array methods are fully reactive:
push, pop, shift, unshift, splice, sort, reverse, fill, copyWithinmap, filter, find, findIndex, findLast, findLastIndex, every, some, forEach, reduce, reduceRight, flat, flatMap, values, entries, keys, includes, indexOf, lastIndexOfcomputed(getter)Creates a lazily evaluated, memoized reactive value.
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
console.log(fullName.value); // "John Doe"
firstName.value = 'Jane';
console.log(fullName.value); // "Jane Doe"
watchEffect(fn, opts?)Runs a reactive effect immediately and re-runs when dependencies change.
const count = ref(0);
const stop = watchEffect(() => {
console.log('Count is:', count.value);
});
count.value++; // Logs: "Count is: 1"
stop(); // Stop watching
Text nodes containing {{ expression }} are automatically reactive:
<p>Hello, {{ name }}!</p>
<p>You have {{ items.length }} items.</p>
<p>Total: {{ price * quantity }}</p>
z-if, z-else-if, z-else: Conditionally render elements.
<div z-if="score >= 90">Excellent!</div>
<div z-else-if="score >= 70">Good job!</div>
<div z-else>Keep trying!</div>
z-for: Repeat elements for each item in an array.
<!-- Simple iteration -->
<li z-for="item in items">{{ item }}</li>
<!-- With index -->
<li z-for="(item, index) in items">
{{ index + 1 }}. {{ item.name }}
</li>
<!-- With key (recommended) -->
<li z-for="item in items" :key="item.id">
{{ item.name }}
</li>
z-for behavior (v0.4.7):
:key with unique IDs for performance<p z-text="message"></p> <!-- Safe textContent -->
<div z-html="htmlContent"></div> <!-- innerHTML (⚠️ XSS risk) -->
<div z-show="isVisible">...</div> <!-- Toggle display -->
z-model: Bind form inputs bidirectionally.
<input z-model="username" />
<textarea z-model="bio"></textarea>
<input type="checkbox" z-model="agreed" />
<input type="radio" z-model="color" value="red" />
<select z-model="country">
<option value="us">United States</option>
</select>
@event or z-on:event: Attach event listeners.
<!-- Method handler (recommended) -->
<button @click="handleClick">Click me</button>
<!-- Inline expression (need .value for refs) -->
<button @click="count.value++">Increment</button>
:attribute: Dynamically bind any attribute.
<img :src="imageUrl" :alt="imageAlt" />
<button :disabled="isDisabled">Submit</button>
<div :class="{ active: isActive, error: hasError }">Content</div>
<div :style="{ color: textColor, fontSize: size + 'px' }">Text</div>
import { onHook } from './zog.js';
// Available hooks: beforeCompile, afterCompile, onError
onHook('beforeCompile', (el, scope, cs) => {
console.log('Compiling:', el.tagName);
});
onHook('onError', (error, context, details) => {
console.error(`Error in ${context}:`, error);
});
// my-plugin.js
export const MyPlugin = {
install(api, options) {
// api contains: app, reactive, ref, computed, watchEffect,
// onHook, compile, Scope, evalExp
api.onHook('beforeCompile', (el, scope, cs) => {
// Custom directive example
if (el.hasAttribute('z-focus')) {
el.removeAttribute('z-focus');
setTimeout(() => el.focus(), 0);
}
});
}
};
import { createApp } from './zog.js';
import { MyPlugin } from './my-plugin.js';
createApp(() => ({ /* ... */ }))
.use(MyPlugin, { debug: true })
.mount('#app');
<div id="app">
<input z-model="newTodo" @keyup.enter="addTodo" placeholder="Add todo" />
<button @click="addTodo">Add</button>
<ul>
<li z-for="(todo, index) in todos" :key="todo.id">
<input type="checkbox"
:checked="todo.done"
@change="toggleTodo(todo.id)" />
<span :class="{ done: todo.done }">
{{ index + 1 }}. {{ todo.text }}
</span>
<button @click="removeTodo(todo.id)">×</button>
</li>
</ul>
<p z-show="todos.length === 0">No todos yet!</p>
<p>{{ remaining }} of {{ todos.length }} remaining</p>
</div>
<script type="module">
import { createApp, ref, reactive, computed } from './zog.js';
createApp(() => {
const newTodo = ref('');
const todos = reactive([]);
let nextId = 1;
const remaining = computed(() => todos.filter(t => !t.done).length);
function addTodo() {
if (!newTodo.value.trim()) return;
todos.push({ id: nextId++, text: newTodo.value, done: false });
newTodo.value = '';
}
function removeTodo(id) {
const idx = todos.findIndex(t => t.id === id);
if (idx > -1) todos.splice(idx, 1);
}
function toggleTodo(id) {
const todo = todos.find(t => t.id === id);
if (todo) todo.done = !todo.done;
}
return { newTodo, todos, remaining, addTodo, removeTodo, toggleTodo };
}).mount('#app');
</script>
| Function | Description |
|---|---|
ref(primitive) | Reactive reference for primitives only |
reactive(object) | Deep reactive proxy for objects/arrays |
computed(getter) | Cached computed value |
watchEffect(fn, opts?) | Auto-tracking reactive effect |
createApp(setup) | Create app with .mount(), .unmount(), .use() |
nextTick(fn) | Execute after DOM update |
onHook(name, fn) | Register lifecycle hook |
| Directive | Example |
|---|---|
{{ expr }} | <p>{{ message }}</p> |
z-if / z-else-if / z-else | <div z-if="show">Text</div> |
z-for | <li z-for="item in items" :key="item.id"> |
z-model | <input z-model="value" /> |
z-show | <div z-show="visible"> |
z-text / z-html | <p z-text="msg"></p> |
@event | <button @click="handler"> |
:attr | <img :src="url" /> |
:class | <div :class="{ active: isActive }"> |
:style | <div :style="{ color: c }"> |
Requires ES6 Proxy support:
Breaking Changes:
ref() now only accepts primitive values (string, number, boolean)reactive() for objects and arraysBug Fixes:
Improvements:
reactive, ref, computed, watchEffect, onHook, compile, Scope, evalExpref (primitives) and reactive (objects)beforeCompile, afterCompile, beforeEffect, onError)Breaking Change: ref() no longer accepts objects/arrays.
// Before (v0.3.x)
const user = ref({ name: 'John' });
user.value.name = 'Jane';
// After (v0.4.x)
const user = reactive({ name: 'John' });
user.name = 'Jane';
MIT License - Free to use in commercial and non-commercial projects.
Made with ❤️ for simplicity.
FAQs
MiniVue: A minimal reactive framework inspired by Vue.js
The npm package zogjs receives a total of 17 weekly downloads. As such, zogjs popularity was classified as not popular.
We found that zogjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.