Kopular logo

Kopular

The AI-optimized frontend framework

Built on KopScript, a strongly-typed language designed to be generated correctly the first time — no DI container, no hidden framework magic, and templates that compile to real, type-checked code instead of running through a separate interpreted layer. Just the conventions an AI (or you) can read straight off the page.

View on npm

Built for AI-assisted development

Every design choice below has the same goal: an AI coding agent (or a human skimming a diff) should be able to look at Kopular code once and know exactly what it does — and get a compile error, not a production surprise, the moment it doesn't.

Unambiguous by design

Every declaration is explicitly typed — no inference, no implicit conversions, one obvious way to write a thing. An AI generating KopScript isn't guessing between five equally-plausible forms; there's exactly one.

Mistakes caught before they run

Nullable types, generics, and strict typing turn "the AI wrote a plausible-looking bug" into a red squiggle at generation time, not a runtime crash a user finds first. ks check --json gives an agent that feedback in structured form, not scraped text.

No hidden framework magic

No decorators, no DI reflection. Even a template compiles into the exact same code you'd hand-write — one compiler, one set of diagnostics, nothing an AI has to intuit from a framework's internals or half-remember from training data.

One way to do things

No hooks vs. classes, no state-management-library-of-the-month. Fewer conventions to memorize means less hallucinated API surface — and code that looks the same no matter which agent (or teammate) wrote it.

Machine-readable tooling, built in

A dense LLM.md reference ships with the package for any agent to load directly — not reconstructed by pattern-matching a tutorial — plus live diagnostics and hover in the editor.

Compiles to code you can actually read

What ships is plain, unminified ES2020 — no bundler output to decode. Reviewing what an AI actually generated takes seconds, not a source-map hunt. This isn't just a design goal: the compiler's own output gets audited for stray noise (like unnecessary generated punctuation) the same way any other code review would.

Scaffolding that's actually correct

npx kp new generates a real, working project — the ambient bindings, vendor/serve scripts, and a starter component every app needs — instead of an agent reconstructing that boilerplate from memory and getting some small piece of it subtly wrong.

A complete feature set, not a toy

Route guards, dynamic route segments, form validation, and component-level error recovery are all real, shipped features — each with end-to-end tests run against a live DOM, not just type-checked. kopular/testing packages that same test harness for your own app's tests, too.

Reactive state, no RxJS

state<T> is a small reactive box — .Value get/set, .Subscribe firing on change. No Observables, no operators, no manual unsubscribe bookkeeping.

Services, no DI container

A service is a plain class. "Injecting" it is just passing it as a constructor argument — no injector hierarchy, no provider tokens, no decorators.

Real routing, no config DSL

Real URLs via the History API, registered with plain method calls. Pages stay alive across navigation, so their state survives.

Compiles to readable JS

No bundler, no runtime framework overhead — just plain ES2020 output you can read start to finish.

Nullable types, compiler-enforced

T? can't be used where a T is expected without a null check first — caught at compile time, not discovered in production.

Templates, compiled not interpreted

Markup in its own .html file — {{ }}, (click)="...", *if/*for — desugars to real, type-checked KopScript before it ever runs, not a separate runtime template engine.

See It In Action

This button is a real Counter component, backed by a constructor-injected CounterService and state<number> — click it, then check the Framework Docs to see the exact source.