This is a re-implementation of the Filterable List example from the official React documentation:
🔗 Thinking in React – Step 5: Add Inverse Data Flow
Instead of React + TSX + TypeScript, this app uses:
✅ Preact – Lightweight alternative to React
✅ HTM – JSX-like templates without a build step
✅ JSDoc – TypeScript-like autocompletion without compilation
The entire script runs as-is in the browser—no transpilation, no bundling.
This is fully no-build.
- HTM parses template strings at runtime, making it less efficient than JSX (which is compiled).
- No minification or whitespace stripping, meaning larger files and unnecessary bandwidth use.
That said, there are reasons you might want to try this approach:
- You love FOSS transparency – Every line of code is visible and human-readable.
- You're experimenting – Modern JS can now run something very close to JSX natively.
- You just think it's cool – And so do I!
🚀 Check out the live version of this app:
🔗 Live Demo on Netlify
I encourage you to inspect the page's source code and marvel at client-side JSX without a compiler!
🔹 HTM (JSX-like syntax in template literals)
👉 HTM GitHub Repo