jsx-dom-runtime

A tiny 500-byte library for JSX syntax templates targeting the DOM. Supports HTML, SVG, MathML and Custom Element tags.

Install

npm i jsx-dom-runtime
# or
yarn add jsx-dom-runtime

How to use

Add preset to your .babelrc file.

.babelrc

{
  "presets": [
    "jsx-dom-runtime/babel-preset"
  ]
}

Example

import { render } from 'jsx-dom-runtime';

render(
  <main class="box">
    <h1 class="title">Hello World!</h1>
  </main>,
  document.getElementById('root')
);

Demo

Documentation

Getting Started

• Introduction
• Installation
• Configuration
  • Vite, Webpack, Rollup, Rolldown, Parcel

Syntax & Features

• Attributes
• SVG
• Style
• Event Handling
• Attribute Directives (attr:*)
• Property Directives (prop:*)
• Function Components
• Fragments

API Reference

• signal() - Reactive values that update attributes, properties, and text automatically
• useRef() - Create DOM element references
• Callback Refs - Reference elements with callbacks
• useText() - Create reactive Text nodes

Tooling

• ESLint Support - Linting rules and configuration
• TypeScript Support - Type definitions and setup

License

MIT