It is a framework that allows you to implement custom elements in a React-like manner. Usually, knowledge of classes is required, but since the implementation is function-based, this knowledge is not necessary!

• ✨ Intuitive Web Components with JSX/TSX
  Easily create custom elements and static HTML for SSR using familiar JSX/TSX syntax.

• 🧩 No Classes Required, Simple Function-Based Implementation
  Build custom elements with just functions—no complex class knowledge needed.

• 🔒 Type-Safe Development
  Full TypeScript support ensures safe and reliable code.

• ⚡ Ultra-Fast Reactivity
  Powered by a unique reactivity system based on alien-signals, delivering state management and rendering up to 2x faster than Solid.js and over 10x faster than Angular.

• 🌐 SSR/CSR Ready
  Supports both server-side rendering and client-side rendering out of the box.

• 🔗 Easy Integration with Major Frameworks
  Seamlessly works in SSR/CSR environments of various frameworks.

  Supported Frameworks:
  

  Framework	Status
  React	✅
  Next.js	✅
  Vue.js	✅
  Nuxt	✅
  Svelte	✅
  Solid.js	🚧
  Angular	🚧
  Lit	🚧

  ✅: Supported 🚧: Coming soon

• 🛠️ Flexible Customization
  Utility functions, props management, and event handling are all highly customizable.

• 💡 Lightweight & High Performance
  Minimal footprint with a focus on speed and efficiency.

npm install chatora

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "chatora"
  }
}

// MiniElement.tsx
import { createCC, signal, type CC } from "chatora";
import { Host } from "chatora/jsx-runtime";
import { toString } from "chatora/util";

type Props = {
  name?: string;
};

export type Emits = {
  "on-click": Event;
};

const Comp: CC<Props, Emits> = ({ defineProps, defineEmits }) => {
    const props = defineProps({
      name: v => toString(v),
    });

    const emits = defineEmits({
      "on-click": () => {},
    });

    const count = signal(0);

    const handleClick = () => {
      count.set((c) => c + 1);
      emits("on-click", new Event("click"));
    };

    return () => (
      <Host shadowRoot shadowRootMode="open" style={["width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;"]}>
        <h1>Hi {props().name}</h1>
        <p>Count: {count.value}</p>
        <button onClick={handleClick}>Increment</button>
        <button onClick={() => count.set((c) => c - 1)}>Decrement</button>
      </Host>
    );
  }

export const MiniElement = createCC("mini-element", Comp);

<!-- index.html -->
<mini-element name="chatora"></mini-element>

<script type="module">
  import { MiniElement } from "./MiniElement.js";
  MiniElement.define();
</script>

chatora(/t͡ɕa toɾa/) means tabby in Japanese