• :sun_with_face: JSX, nothing else
• :gem: Supports attributes & events
• :x: No reactivity, vdom or components
• :zap: Small bundle size (463 B)

Getting started

npx create-solojsx-app project

Options

npx create-solojsx-app # in current folder
npx create-solojsx-app -m # minimal template
npx create-solojsx-app -js # javascript
bunx create-solojsx-app-bun # using bun

Usage

const e = <div> Hello from SoloJSX </div>
document.body.append(e)

Attributes

<div style="color: red"> Hello </div>

Events

const f = (text) => alert(text)

<div onclick={() => f("Hi")}> Click Me </div>

Arrays

<div> {[1, 2, 3].map(i => <div> {i} </div>)} </div>

Ternaries

<div> {true ? <div> Hello </div> : null} </div>

Nested elements

const inner = <div> Hello </div>

<div> {inner} </div>

Style object

const style = { color: "red" }

<div style={style}> Hello </div>

Examples

Simple todo list

const input = <input />
const list = <ul></ul>
const add = () => list.prepend(<li> {input.value} </li>)
const btn = <button onClick={add}> Add </button>
document.body.append(input, btn, list)

Advanced todo list

• https://github.com/eekelof/localboards

Templates

• https://github.com/SoloJSX/SoloJSX-template-ts
• https://github.com/SoloJSX/SoloJSX-template-ts-minimal
• https://github.com/SoloJSX/SoloJSX-template-js
• https://github.com/SoloJSX/SoloJSX-template-ts-todo
• https://github.com/SoloJSX/SoloJSX-template-ts-three

License

MIT