Okalit
Okalit Framework v0.1.7

The power of Signals meet standards.

A progressive Web Components framework built on top of Lit, supercharged with signal-based reactivity via uhtml, modern TC39 decorators, and clean modular architecture. No virtual DOM overhead. Zero boilerplate. Absolute control.

Documentation
npx @okalit/cli new app-name
< 3KB
Library overhead
0ms
VDOM Diffing
100
Lighthouse Score
my-counter.js
100% JS / ESM 
import { Okalit, html, defineElement } from '@okalit/core';
import styles from './my-counter.scss?inline';

@defineElement({
  tag: 'my-counter',
  styles: [styles],
  props: [
    { count: { type: Number, value: 0 } }
  ]
})
export class MyCounter extends Okalit {
  render() {
    return html`
      <p>Count: ${this.count.value}</p>
      <button @click=${() => this.count.value++}>+1</button>
    `;
  }
}

Framework Philosophy

What is Okalit?

Okalit is a progressive Web Components framework built on Lit, enhanced with signal-based reactivity via uhtml, modern TC39 decorators, and a modular enterprise architecture. Uncompromised performance meets absolute control.

Native Web Components

Built on Lit's secure, modern browser native baseline. Write clean, platform-compliant components in pure JS that run inside any HTML page without complex compiler transformations.

Signal-Based Reactivity

Powered by uhtml's fine-grained signal primitives, state changes propagate directly to DOM nodes through Lit's rendering engine. No virtual diffing — only what truly changes gets updated.

TC39 Stage-3 Decorators

Utilize standard and standard-compliant JavaScript decorators. Clean class definitions, autowired states, and service-injection parameters make codebase maintenance a breeze.

Power Features

Opinionated Enterprise Architecture

Discover why Okalit is ready for complex, scalable web platforms right out of the box. Click each architectural feature to interact with its live simulator below.

Okalit Architecture Explorer
How it works:

Traditional VDOM frameworks recalculate whole virtual trees and patch differences. **Okalit Signals** target precise HTML text nodes or attributes.

Virtual DOM Approach Renders: 0
<div class="card">
<h3>My Profile</h3>
<p>Active user: 254</p>
</div>

Re-executes layout functions & checks children tags on every keystroke.

Okalit Direct Signal Updates: 0
<div class="card">
<h3>My Profile</h3>
<p>Active user: 254</p>
</div>

Fires pointer-bound node updates directly without re-rendering parent tag.

Click to trigger comparative redraw metrics.
Underlying Library API:
import { signal } from '@okalit/core'; // uhtml 5.x signals

Developers First

Write less code. Get more performance.

Okalit eliminates the bloat from standard state containers and component boilerplates. Let's look at how intuitive a routed multi-state container app looks.

Enterprise Project Structure
src/main-app.js 
import { AppMixin, defineElement, html, Okalit } from '@okalit/core';
import routes from './app.routes.js';

@defineElement({ tag: 'main-app' })
export class MainApp extends AppMixin(Okalit) {
  static config = {
    routes,
    modeDebug: true,
    obfuscateChannels: true,
    i18n: { locales: ['en', 'es'], default: 'en' },
    template: (content) => html`${content}`,
  };
}
Quickstart

Get running in 30 seconds

Generate ready-to-run microfrontends, modules, or complete SPA applications with our custom-tuned terminal CLI utility. Configure ES Modules, Sass, routing, and i18n modules out of the box.

1

Fire CLI Creator

Run the wizard and configure your styling, tooling, and backend connections.

2

Build Modules

Use standard decorators and signals to link clean architecture states fluidly.

View Github Code
bash - okalit-cli
Terminal
user@okalit-local:~$ npx @okalit/cli new app-nae
Press "Run Interactive CLI Mock" button to simulate full system initialization...
Exit code: 0 100% Native WebComponents compiler
1.2ms
First Input Delay (FID)

Near instantaneous interaction readiness thanks to lightweight baseline structures.

9KB
Baseline GZip Size

Combines base engine structure with Signals without bloating initial bundles.

100%
W3C Compliance

Runs in native Custom Elements registries and works flawlessly alongside React or Vue.

0ms
Virtual Diffing Work

Reactivity values skip structural updates to immediately access actual elements.

Build with Okalit Today

Ready to experience a modern, performance-first developer framework built natively for the web platform? Step up to Signals with zero virtual DOM overhead.

Start building View Source