Getting Started

Welcome to SemaJSX! This guide will help you get started with SemaJSX, a lightweight, signal-based reactive JSX runtime.

What is SemaJSX?

SemaJSX is a modern JSX runtime that uses fine-grained reactivity with signals for efficient updates without virtual DOM diffing. It supports multiple rendering targets:

• DOM - Standard web browser rendering
• Terminal - CLI applications with Ink-like API
• SSR - Server-side rendering
• SSG - Static site generation

Installation

Install SemaJSX using your favorite package manager:

# Using Bun (recommended)
bun add semajsx

# Using npm
npm install semajsx

# Using pnpm
pnpm add semajsx

Quick Example

Here's a simple counter example using SemaJSX:

/** @jsxImportSource semajsx/dom */

import { signal } from "semajsx/signal";
import { render } from "semajsx/dom";

function Counter() {
  const count = signal(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => count.value++}>Increment</button>
      <button onClick={() => count.value--}>Decrement</button>
    </div>
  );
}

render(<Counter />, document.getElementById("app"));

TypeScript Configuration

Add JSX configuration to your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "semajsx/dom"
  }
}

Next Steps

• Learn about Signals for reactive state management
• Explore Components and how to build with JSX
• Check out SSR for server-side rendering
• Try SSG for static site generation