Cardboard.js is now on Product Hunt
Hi everyone,
After years of working on Cardboard.js, I’ve finally launched it on Product Hunt. This project started as a way to build small, interactive web apps without writing HTML, JSX, or separate CSS files — you write everything in plain JavaScript or TypeScript and let Cardboard handle rendering and reactivity.
If you’ve followed my earlier posts about building this framework, thanks for sticking around. If not, here’s a quick intro and a few snippets to show what it feels like to use.
What Cardboard.js Is
Cardboard.js is a lightweight reactive UI library (~16 KB), focused on simplicity and performance. It provides:
No HTML required — you generate DOM elements with JS.
Built‑in state management.
Reactive updates (UI updates when state changes).
Reusable components and CSS‑in‑JS style support.
Quick Snippets
Basic Usage
Instead of writing HTML, you initialize the framework and define UI with JavaScript:
import { tag, init, allTags } from '@nkeff/cardboard-js';
const { div, p } = allTags;
// Initialize Cardboard (defaults to <body>)
const root = init();
// Append elements
root.append(
div(
p('Hello world!')
)
);
This creates and attaches the DOM for you without a template file — everything lives in code.
A Simple Reactive Counter
Cardboard includes reactive state primitives so your UI updates automatically:
const Counter = () => {
const count = state(0);
return button()
.text(`Clicked $count times`, { count })
.addStyle('color', 'gray')
.stylesIf(count.greaterThan(5), { color: 'red' })
.clicked(() => count.value++);
};
// Mount it to the body
tag('(body)').append(Counter());
Here you define a component function that returns UI with reactive state. As count.value changes, the text and styles update automatically.
Why It Matters
If you’ve worked with frameworks where you juggle templates, build steps, and lots of boilerplate, Cardboard offers a simpler alternative where logic and UI live together in plain JavaScript or TypeScript. It’s small, fast, and doesn’t need HTML, CSS, or JSX if you don’t want them.
How You Can Help
If you think this could be useful — or even just interesting — I’d love your support on Product Hunt. A visit, upvote, or comment goes a long way and helps this project get more visibility.
Thanks for reading — and if you try it out, I’d really like to hear what you build with it.
How To Cardboard (5 Part Series)
1From Concept to Reality: My process of building Cardboard2Web-App Routing is FUN - the Web is weird, but fun3📦 Cardboard devlog, what I've done in the last update4📦 Cardboard.js: Building a Simpler, More Intuitive Framework5I've FINALLY launched my Product!!
Pro Tip
How To Cardboard (5 Part Series) 1From Concept to Reality: My process of building Cardboard2Web-App Routing is FUN - the Web is weird, but fun3📦 Cardboard devlog, what I've done in the last update4📦 Cardboard.js: Building a Simpler, More Intuitive Framework5I've FINALLY launched my Product!!