Reactive JSX for any backend
Generates Marked Templates + Client JS from Signal-based JSX
"use client"
import { createSignal } from '@barefootjs/dom'
export function Counter() {
const [count, setCount] = createSignal(0)
return (
<>
<p class="counter">{count()}</p>
<button onClick={() => setCount(n => n + 1)}>+1</button>
<button onClick={() => setCount(n => n - 1)}>-1</button>
<button onClick={() => setCount(0)}>Reset</button>
</>
)
}npx barefootjs compile Counter.tsxOutput:
Counter.tsx- Marked Template (server-side, withdata-bfhydration markers)Counter.client.js- Client JS (minimal JS for reactivity)
Server (e.g., Hono):
import { Hono } from 'hono'
import { Counter } from './dist/Counter'
const app = new Hono()
app.get('/', (c) => {
return c.html(
<html>
<body>
<Counter />
<script type="module" src="/Counter.client.js" />
</body>
</html>
)
})
export default appClient:
The Client JS automatically finds elements with data-bf markers and hydrates them with reactivity.
- Zero runtime overhead (SSR) - Server renders pure templates, no JS framework needed
- Fine-grained reactivity - Signal-based updates, only re-render what changed
- Type-safe - Full TypeScript support with preserved type information
- Backend agnostic - Currently supports Hono/JSX, designed for Go, Python, etc.
- barefootjs.dev - Core documentation
- ui.barefootjs.dev - UI components built with BarefootJS
Distributed under the MIT License. See LICENSE for more information.