# Koras — Hybrid UI Component & Rendering System
**Koras** is a no-build, JSX-like UI system that runs directly in the browser, server, or worker without a virtual DOM or tagged templates.
It let you render JavaScript components with minimal overhead while keeping the mental model simple and flexible.
---
## Why Koras?
- Use JSX-like syntax anywhere JavaScript runs — browser, server, or worker
- Run components synchronously or asynchronously
- No compilation step required
- No virtual DOM diffing
- Works on both client and server
- Lightweight, fast rendering model
- Orchestrate agents and subagents using components.
- Simple learning curve
Koras is designed for direct execution and minimal runtime cost on both client and server.
---
## Syntax Overview
Koras looks similar to JSX but operates differently.
### Supported patterns
- Components: ``
- Self-closing tags: ``
- Spread props: `` not: ``
- Attributes: ``
- Renderer: `$render(Component, props)`
- Query helper: `$select('query')`
---
## Development Tools
Recommended VSCode extensions:
- Install **VS Code**
- Install **Template Literals** and **leet-html** VScode extension (syntax highlighter)
- Install **Auto Complete Tag** (auto close/rename tags)
---
## Installation
koras is published to npm, and accessible via the jsdelivr.net CDN:
```sh
npm i @codingnninja/koras
```
CDN (no build required)
```js
import {
$register,
$render,
} from "https://cdn.jsdelivr.net/npm/@codingnninja/koras/dist/esm/koras.min.js";
import { $select } from "https://cdn.jsdelivr.net/npm/@codingnninja/koras/dist/esm/query.min.js";
```
## Usage
### Quick Demo - Counter with $select (browser)
```html
`;
};
$register({ Counter });
$render(Counter);
```
### Quick Demo - Counter with $render (Browser)
```html
```
## Dynamic Component Example
Generating `id` of a component dynamically makes it repeatable on the same page.
```js
export function CopyToClipboard({
id = "clipboard",
text = "nictoma.com",
status = false,
} = {}) {
function copy() {
navigator.clipboard.writeText($select(`#copy-input`).value);
$render(CopyToClipboard, { id, text, status: !status });
setTimeout(() => $render(CopyToClipboard, { id, text, status }), 1500);
}
return `
`;
}
```
`App.js`
```js
export function App() {
return `
`;
}
$register({ App, CopyToClipboard });
await $render(App);
```
## Agent Orchestration Example
Koras components can coordinate agents and subagents naturally.
```js
async function ResearchAgent({ topic }) {
return `
Researching: ${topic}
`;
}
function Reviewer({ rules, children }) {
//review the topic leveraging LLM
const reviewedChildren = children;
return `
Research review
${reviewedChildren}
`;
}
function SummaryAgent({ topic }) {
//run LLMs or AIs here
const summarisedTopic = topic;
return `
Summary generated for ${ummarisedTopic}
`;
}
$register({ ResearchAgent, SummaryAgent, Reviewer });
$render(ResearchAgent, { topic: "Koras.js" });
```
**Koras** can run in parallel or recursively making agent and subagent orchestration web-native.
## Contributing
Contributions are welcome and appreciated.
Please read the contribution guide:
👉 [/CONTRIBUTING.md](/CONTRIBUTING.md)
- You can help by:
- reporting bugs
- improving docs
- adding tests
- proposing new features
# Roadmap
- Improve error handling for debugging.
- Add more test infrastructures and suites.
- Add `typescript`.