Meet BlokJS - 9 KB, No Build Step, Standalone, Full FE Framework

## 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. ```html <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: ```html <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: ```js // 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: ```js 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: ```js { 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: ```js 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: ```js // 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: ```js 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](https://dev.to/maleta/cors-xss-and-csrf-with-examples-in-10-minutes-35k3) 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](https://github.com/maleta/blokjs/blob/main/packages/blokjs/llm-reference.md) - 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](https://platform.claude.com/docs/en/build-with-claude/token-counting)). 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):** ```html <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:** ```bash npm install @maleta/blokjs ``` **With Vite:** ```bash 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:** - [Documentation](https://maleta.github.io/blokjs/) - [GitHub](https://github.com/maleta/blokjs) - [npm](https://www.npmjs.com/package/@maleta/blokjs) - [LLM Reference (~2,900 tokens)](https://github.com/maleta/blokjs/blob/main/packages/blokjs/llm-reference.md) --- *BlokJS is MIT licensed. If you try it, I'd love to hear what you build.*