BlokJS - Zero-Build, Zero-Dependency, Standalone, Reactive, Lightweight UI Framework
New project, new frontend. Install Node. Pick a bundler. Configure TypeScript. Install a router package. Install a state management package. Set up hot reload. Debug the config. Twenty minutes later you still haven't written a single line of UI code.
BlokJS is a reactive UI framework that skips all of that.
One <script> tag. 9 KB gzipped. Zero dependencies. No virtual DOM, no JSX, no template compiler. Your views are plain JavaScript objects - the browser runs them directly.
<script src="https://cdn.jsdelivr.net/npm/@maleta/blokjs/dist/blokjs.min.js"></script>
That's your entire setup.
Philosophy
BlokJS is built around a few ideas:
No build step required. A framework that needs a compiler before it can run has already added complexity. BlokJS app is plain JavaScript object - it run directly in the browser. You can still use a bundler if you want to have code well organized in files , but it's never a requirement.
Batteries-included, not batteries-heavy. Reactive state, components, routing, stores, and async tracking are all built in. One 9 KB package instead of assembling five separate libraries. But "included" doesn't mean "bloated" - the goal is to cover common needs without unnecessary weight.
Simplicity over cleverness. The API surface is small on purpose. There are no special directives, no lifecycle alphabet soup, no framework-specific syntax to learn. If you know JavaScript objects and functions, you already know most of the BlokJS.
Direct DOM updates, no virtual DOM. Instead of diffing a virtual tree and patching the real DOM, BlokJS tracks exactly which state each binding depends on and updates only that binding when the state changes. This avoids the overhead of a full diff/patch cycle, making targeted updates fast and predictable.
Counter in 15 Lines
Let's start with the most basic example - a counter. No install, no config, no build:
<script src="https://cdn.jsdelivr.net/npm/@maleta/blokjs/dist/blokjs.min.js"></script>
<div id="app"></div>
<script>
blok.mount('#app', {
state: { count: 0 },
methods: {
inc() { this.count++ },
dec() { this.count-- },
},
view: ($) => ({
div: { children: [
{ h1: { text: $.count } },
{ button: { click: 'dec', text: '-' } },
{ button: { click: 'inc', text: '+' } },
] }
})
})
</script>
That's it. state is reactive. When count changes, the h1 updates automatically. The $ proxy creates reactive references that the framework resolves at render time. No useState, no useEffect, no ref(). Just state and a view.
Why Objects Instead of JSX or Templates?
Instead of <div class="card"> or React.createElement('div'), BlokJS uses plain objects:
// This...
{ div: { class: 'card', children: [
{ h1: { text: $.title } },
{ p: { text: $.description } }
] } }
// ...renders this:
// <div class="card">
// <h1>My Title</h1>
// <p>Some description</p>
// </div>
Why? Because it's just JavaScript. No parser. No compiler. No template language to learn. You can refactor with standard tools, and there's nothing between your code and the browser.
The key elements of the view DSL:
-
text- text content, static or reactive ({ text: $.name }) -
children- array of child elements -
class- string, object, or array ({ class: { active: $.isActive } }) -
model- two-way binding for inputs ({ input: { model: $.search } }) -
when- conditional rendering ({ when: $.isVisible, children: [...] }) -
each- list rendering ({ each: $.items, as: 'item', children: [...] }) -
Events - just the event name as key (
{ button: { click: 'save' } }) with optional arguments ({ click: 'remove(item)' })
Negation works too. $.not.isLoggedIn evaluates to true when isLoggedIn is falsy. No ternaries, no ! operators in templates.
Components - Not a Toy
BlokJS has a component system with props, events, slots, and lifecycle hooks:
blok.component('TodoItem', {
props: ['todo'],
methods: {
remove() { this.emit('remove', this.todo) }
},
view: ($) => ({
li: { children: [
{ input: { type: 'checkbox', model: $.todo.done } },
{ span: { text: $.todo.text } },
{ button: { click: 'remove', text: 'x' } },
] }
})
})
Use it in a parent by name. Pass props, listen to events with the on_ prefix:
{ each: $.todos, as: 'todo', key: 'id', children: [
{ TodoItem: { todo: $.todo, on_remove: 'handleRemove' } }
] }
Components also support slots for content projection, computed properties, watchers, and mount/unmount lifecycle hooks.
Stores - Global State with Automatic Async Tracking
Most frameworks require you to manually wire up loading spinners and error messages for every async operation. BlokJS handles this automatically.
Define a store:
blok.store('auth', {
state: { user: null },
computed: {
isLoggedIn() { return this.user !== null }
},
methods: {
async login(email, password) {
const res = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
})
this.user = await res.json()
},
logout() { this.user = null }
}
})
Now in your template, you get loading and error on the spot:
// Loading spinner - appears automatically while login() runs
{ when: $.store.auth.loading.login, children: [
{ p: 'Signing in...' }
] }
// Error message - appears automatically if login() throws
{ when: $.store.auth.error.login, children: [
{ p: { class: 'error', text: $.store.auth.error.login } }
] }
// Logged in state
{ when: $.store.auth.isLoggedIn, children: [
{ p: { text: $.store.auth.user.name } }
] }
Any method that returns a Promise is tracked. The framework wraps it, sets loading.methodName = true, and if it throws, captures the error into error.methodName. You just bind it. This works for both store methods and component methods.
Routing - Built In
No separate router package. Routes, dynamic params, guards, hash and history modes are all included:
blok.mount('#app', {
routes: [
{ path: '/', component: 'Home' },
{ path: '/product/:id', component: 'ProductDetail' },
{ path: '/admin', component: 'Admin', guard: 'requireAuth' },
{ path: '*', component: 'NotFound' },
],
guards: {
requireAuth(to, from) {
if (!this.store.auth.isLoggedIn) return '/login'
return true
}
},
view: ($) => ({
div: { children: [
{ a: { href: '/', link: true, text: 'Home' } },
{ a: { href: '/admin', link: true, text: 'Admin' } },
{ div: { route: true } },
] }
})
})
Inside components, access route data via this.route.params, this.route.query, and navigate programmatically with this.navigate('/path'). Guards can return true (allow), false (block), or a redirect path string.
Security
I wrote about CORS, XSS and CSRF before, and web security was on my mind when building BlokJS.
The text binding is always safe - it uses textContent, so HTML in user input is rendered as literal text, not parsed. The html binding sets innerHTML directly without sanitization, same as Vue's v-html. If you need to render HTML, make sure you trust the source - never pass unsanitized user input to html.
URL attributes (href, src, action) are validated - javascript: and data: URIs are blocked.
What BlokJS is Not
BlokJS is not trying to replace React, Angular or Vue for enterprise dashboards with hundreds of components. It doesn't have SSR yet - though since views are plain objects rather than DOM-dependent templates, server-side rendering is a natural future addition. It doesn't have a virtual DOM (by design - fine-grained reactivity means direct DOM updates, which works well for most use cases).
Where it fits:
- Prototypes and MVPs where you want something running quick
- Internal tools and admin panels
- Small to medium apps - todo lists, dashboards, forms
- Learning - the entire API fits in your head in an afternoon
- Embedding - drop reactive UI into any existing page
LLM-Friendly by Design
BlokJS ships with a dedicated LLM reference document - a condensed version of the entire API optimized for LLM consumption.
The document is ~2,900 tokens (measured using Anthropic's official token counting API). That's small enough to paste into any LLM's context window - less than 1.5% of a 200K context window.
The idea: include it in your prompt, and an LLM can write working BlokJS code with accurate API usage. The reference is part of the npm package (llm-reference.md), so it's always available alongside the framework itself.
Getting Started
CDN (zero setup):
<script src="https://cdn.jsdelivr.net/npm/@maleta/blokjs/dist/blokjs.min.js"></script>
Without a bundler, you have full control over what loads and when. Split components into separate files, load them conditionally, defer what isn't needed on first render - the browser handles it natively.
npm:
npm install @maleta/blokjs
With Vite:
npm create blokjs my-app
cd my-app
npm install
npx vite
The Vite plugin adds automatic component and store registration from file directories, bundled output, and hot module replacement during development.
Links:
BlokJS is MIT licensed. If you try it, I'd love to hear what you build.
Top comments (0)