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

Architecture

graph TD
  A[semajsx] <--> B[semajsx/core]
  A <--> C[semajsx/signal]
  A <--> D[semajsx/dom]
  A <--> E[semajsx/terminal]
  B --> C
  D --> B
  E --> B
  F[semajsx/ssr] --> D
  G[semajsx/ssg] --> F
  H[semajsx/mermaid] --> B
  H --> C

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
• Render Mermaid Diagrams as reactive SVG