jsx-dom-runtime

A tiny 500-byte library for JSX syntax templates targeting the DOM. Supports HTML, SVG, and MathML 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

// add to the end of the head
document.head.append(
  <link rel="stylesheet" href="/style.css" />
);

// add to the end the the body
document.body.append(
  <main class="box">
    <h1 class="title">Hello World!</h1>
  </main>
);

Demo

Documentation

Getting Started

• Introduction
• Installation
• Configuration
  • Vite

Syntax & Features

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

API Reference

• useRef() - Create DOM element references
• Callback Refs - Reference elements with callbacks
• useText() - Create reactive Text nodes
• Template - Parse HTML strings

Tooling

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

License

MIT