KT.js

A lightweight, manual‑control web framework that creates real DOM elements with built‑in reactive state management.


Changelog

Features

- Real DOM – JSX compiles directly to HTMLElement creation, with zero virtual‑DOM overhead.
- Manual Updates – You decide when the DOM updates; no automatic re‑renders.
- Reactive State – Built‑in ref() and computed() for reactive values with change listeners.
- Zero Forced Re‑renders – Update only what changes; avoid full‑component repaints.
- Full TypeScript Support – Accurate type inference and JSX/TSX integration.
- Lightweight – Small bundle size, no unnecessary dependencies.

Quick Start

$3

``bash


Full package (includes core)

pnpm add kt.js

Individual packages

pnpm add @ktjs/core @ktjs/router
`

$3

`tsx
import { ref } from 'kt.js';

function Counter() {
const count = ref(0);

// Reactive binding ↓
const button = count.value++}>Count: {count};

return button;
}

// Mount to DOM
document.body.appendChild(Counter());
`

$3

For JSX/TSX support, set your tsconfig.json:

`json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "kt.js"
}
}
`

Core Features

$3

`tsx
import { ref, computed } from 'kt.js';

// Reactive references
const count = ref(0);
// manually set dependencies ↓
const double = computed(() => count.value * 2, [count]);

// Listen to changes
count.addOnChange((newVal, oldVal) => {
console.log(Count changed from ${oldVal} to ${newVal});
});

// Update triggers change listeners
count.value = 10;
`

$3

`tsx
const show = ref(true);

const element =

;

// Toggle visibility
show.value = false; // Element becomes a comment placeholder
`

$3

`tsx
import { KTFor, ref } from 'kt.js';

const items = ref([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
]);

const list = item.id} map={(item) =>

} />;

// Update list
items.value = [...items.value, { id: 3, name: 'Item 3' }];
`

$3

`tsx
function InputComponent() {
const text = ref('');

return ;
}
`

$3

`tsx
import { createRedrawable, ref } from 'kt.js';

function DynamicCounter() {
const count = ref(0);

const counter = createRedrawable(() => (


));

// Redraw when count changes
count.addOnChange(() => counter.redraw());

return counter;
}
`

Package Structure

- @ktjs/core – Core framework with JSX, reactivity, and DOM utilities.
- @ktjs/router – Client‑side router with navigation guards.
- @ktjs/mui – Material UI components built on top of KT.js.

Philosophy

KT.js follows one rule: full control of the DOM and avoid unnecessary repainting.

As a web framework, repeatedly creating a large number of variables and objects is unacceptable. That’s why KT.js was built.

Advanced Usage

$3

`tsx
import { surfaceRef } from 'kt.js';

const user = surfaceRef({
name: 'John',
age: 30,
});

// Access reactive properties
user.name.value = 'Jane';

// Get the original object
const original = user.kcollect();
`

$3

`tsx
const handleClick = (event) => {
console.log('Clicked!', event);
};

const button = Click me;
``

Performance Benefits

- No Virtual DOM – Direct DOM manipulation eliminates reconciliation overhead.
- Manual Updates – Only update what you need, when you need it.
- Minimal Abstraction – Close to native DOM APIs for maximum performance.
- Small Bundle – Minimal runtime overhead.

Browser Support

KT.js supports all modern browsers and IE11+ with appropriate polyfills.

License

MIT