docstishgithub

runtime for tish jsx

hooks + dom
for compiled tish apps

useState, createRoot, h, Fragment. the minimal runtime that powers tish jsx. compile with tish, run in the browser.

App.tish
import { useState, createRoot, h, Fragment } from 'lattish'
 
fn App() {
let [count, setCount] = useState(0)
return <div>
<p>{"Count: " + String(count)}</p>
<button onclick={() => setCount(count + 1)}>
{"Increment"}</button>
</div>
}
 
createRoot(document.getElementById("root")).render(App)
counter.tish
import { useState, createRoot, h, Fragment } from 'lattish'
 
fn App() {
let [count, setCount] = useState(0)
return <div>
<p>{"Count: " + String(count)}</p>
<button onclick={() => setCount(count + 1)}>{"Increment"}</button>
</div>
}
 
createRoot(document.getElementById("root")).render(App)

01

hooks

useState, useEffect, useRef, useMemo

the full hook api you expect. useState for local state, useEffect for side effects, useRef for refs, useMemo for memoization. same mental model as react, implemented for the tish jsx runtime.

// capabilities

  • -useState — local component state
  • -useEffect — side effects after render
  • -useLayoutEffect — sync effects before paint
  • -useRef — mutable refs across renders
  • -useMemo — memoized values
  • -unstable_batchedUpdates — batched state updates

02

dom runtime

h, Fragment, text, createRoot

minimal dom primitives that the tish compiler targets. h creates elements, Fragment groups children, createRoot mounts and reconciles. no virtual dom by default — direct dom updates, or opt into vdom for diffing.

// capabilities

  • -h — create elements and components
  • -Fragment — group children without wrapper
  • -text — text node helper
  • -createRoot — mount and re-render
  • -compiler lowers jsx to these calls
  • -optional vdom mode for diffing

03

minimal bundle

tiny runtime, zero bloat

lattish is a small runtime designed for compiled tish jsx. no framework overhead, no extra abstractions. ship the code you write, not a giant library. works with tish's --target js and --jsx lattish.

// capabilities

  • -tiny footprint for production builds
  • -no external framework dependency
  • -works with tish compiler --jsx lattish
  • -node_modules resolution for bare specifiers
  • -npm install lattish — that's it
  • -open source, permissive license

lightweight

minimal runtime, maximum efficiency

lattish is a tiny runtime built for compiled tish jsx. hooks and dom helpers only — no framework overhead. smaller bundle, faster load. relative size comparison (gzipped, approximate).

lattish
~2.3kb
preact
~4kb
svelte
~7kb
vue
~34kb
react
~43kb

get started

start building with lattish

install the runtime, compile your tish jsx with the tish compiler, and run in the browser. hooks, dom, and nothing else.

$npm install lattish