A simple and easy-to-use web framework, never re-render. Abbreviation of Kasukabe Tsumugi.
npm install kt.jsA lightweight, manual‑control web framework that creates real DOM elements with built‑in reactive state management.



- 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.
``bashFull package (includes core)
pnpm add kt.js
$3
`tsx
import { ref } from 'kt.js';function Counter() {
const count = ref(0);
// Reactive binding ↓
const button = ;
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 =
This content is conditionally rendered;// 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) => {item.name}} />;
// 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(() => (
Count: {count.value}
)); // 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 = ;
``- 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.
KT.js supports all modern browsers and IE11+ with appropriate polyfills.
MIT