Getting Started with Koras.jsx

Koras.jsx is a no-build JSX library that works in browsers and servers without a virtual DOM or tagged templates. It is simply the only kind of JSX that achieves the true aim of the web component without the known flaws.

It introduces an intuitive state management system that makes JSX works everywhere, in browsers and servers by using an arithmetic progression formula: nth = a + (n - 1)d.

It's intuitive, super fast and flexible.

INFO

Are you curious to see koras.jsx in action? Check it out at LovePlay music player.

Installations

import {
  $render,
  $register,
  $select,
} from "https://cdn.jsdelivr.net/npm/@codingnninja/koras/dist/esm/koras.min.js";

$ npm install @codingnninja/koras

$ pnpm add @codingnninja/koras

$ yarn add @codingnninja/koras

$ bun add @codingnninja/koras

Now, you can enjoy all the goodies that come with Koras.jsx.

Development tools

Install VSCode editor.
Install leet-html (a VSCode extension) for syntax highlighting.
Install Auto complete tag to automatically add close tag and rename paired tag.

Quick Demo - Counter with $select (Browser)

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module">
      import { $select } from "https://cdn.jsdelivr.net/npm/@codingnninja/koras/dist/esm/koras.min.js";
    </script>
  </head>
  <body>
    <div id="counter">0</div>
    <button onclick="$select('#counter[add|textContent+=1]')">Increase</button>
  </body>
</html>

Output:

Quick demo - Counter with $render (Node)

import { $render, $register } from "@codingnninja/koras";

const Counter = (count = 0) => {
  return `
    <div id="counter">
      <button 
        onClick="$render(Counter, ${count + 1})" 
        style="height:30px; width:100px">Count is ${count}
      </button>
    </div>
  `;
};
$register(Counter);
$render(Counter);

Quick Demo - Counter with $render (Browser)

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
      import {
        $render,
        $register,
      } from "https://cdn.jsdelivr.net/npm/@codingnninja/koras/dist/esm/koras.min.js";
      const Counter = (count = 0) => {
        return `
          <div id="counter">
            <button 
              onClick="$render(Counter, ${count + 1})" 
              style="height:30px; width:100px">Count is ${count}
            </button>
          </div>
        `;
      };
      $register(Counter);
      $render(Counter);
    </script>
  </body>
</html>

Output:

Scaffold Koras projects

scaffold

npx create-render-app music-player

INFO

Note: since Koras.jsx is similar to React, this is to remind you to never scaffold your React application with create-react-app; use Remix or Next instead.

change directory to the project.

cd music-player

run local server.

npm run dev

Getting Started with Koras.jsx ​

Installations ​

Development tools ​

Quick Demo - Counter with $select (Browser) ​

Output: ​

Quick demo - Counter with $render (Node) ​

Quick Demo - Counter with $render (Browser) ​