Barefootjs

TSX in. Your stack out.
Barefoot compiles signal-based TSX into Hono, Echo, or whatever stack you ship on.
No virtual DOM. No SPA required.

[!WARNING] Alpha Software — BarefootJS is in early alpha. APIs may change without notice. Not recommended for production use.

---

Quick Start

Requires Node 22+.

npm create barefootjs@latest

You'll be prompted for a target directory (defaults to my-app). After scaffolding:

cd my-app   # or whatever name you entered at the prompt
npm install
npm run dev

Then open the URL the dev server prints (defaults to http://localhost:8787). The starter app ships a Counter component you can edit at components/Counter.tsx.

The full walkthrough — adapter / CSS choices, generated layout, and editing the Counter — lives in docs/core/quick-start.mdx.

---

AI-Assisted Development

BarefootJS ships an agent skill that gives AI deep knowledge of the compiler, IR, CLI, and component system — so it can build, test, and debug BarefootJS components autonomously. Works with both Claude Code and Codex.

Claude Code:

/plugin marketplace add piconic-ai/barefootjs
/plugin install barefootjs@barefootjs

Codex:

install the barefootjs skill from piconic-ai/barefootjs

Once installed, the agent can use the bf CLI, write IR tests, trace signal graphs, and scaffold components — all without reading source files. See AI-native Development for the full workflow.

---

Design Principles

• Backend Freedom — Same JSX works with Hono, Go, Mojolicious, etc. No Node.js lock-in.
• MPA-style development — Add interactivity to existing server apps without an SPA framework.
• Fine-grained reactivity — Signal-based, only affected DOM nodes update. SolidJS-equivalent performance.
• AI-native development — IR enables browser-free testing. CLI for component discovery. AI agents can develop autonomously.

---

Documentation

• barefootjs.dev - Core documentation
• ui.barefootjs.dev - UI components built with BarefootJS

---

Known limitations

Tracked patterns the compiler / adapters / runtime don't yet handle are aggregated under the known-limitation label. Each issue documents the shape, affected fixtures, available workaround, and fix direction.

---

Acknowledgements

This project is inspired by and built with:

• SolidJS - Fine-grained reactivity model and Signal API design
• shadcn/ui - UI component design system (docs/ui)
• Hono - JSX runtime for server-side rendering

---

License

Distributed under the MIT License. See LICENSE for more information.