I've FINALLY launched my Product!!

#webdev #devjournal #watercooler #product

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.

producthunt.com

Thanks for reading — and if you try it out, I’d really like to hear what you build with it.