solojsx

• 🌞 JSX, nothing else
• 💎 Supports attributes & events
• ❌ No reactivity, vdom or components
• ⚡ Small bundle size (463 B)

Getting started

npx create-solojsx-app project-name

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 project-name # using bun

Usage

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

Attributes and events

const f = (text) => alert(text)
const e = <div style="color: red" onclick={() => f("Hi")}> Click Me </div>

Arrays

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

Ternaries

const e = <div> {true ? <div> Hello </div> : null} </div>

Nested elements

const inner = <div> Hello </div>
const e = <div> {inner} </div>

Style object

const style = { color: "red" }
const e = <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

License

MIT