Crèmeboard — Elegant Kanban Task Widget

Overview

Crèmeboard is a self-contained, zero-dependency Kanban task widget built with vanilla JavaScript and styled in a warm, refined crème palette. Drop a single index.html into any project and instantly gain a beautiful, fully interactive task board — no build tools, no npm, no framework. It solves the everyday need for a lightweight, embeddable task tracker that doesn't look like every other blue-grey SaaS dashboard on the internet.

Who Is It For?

• Freelancers who want a personal local task board that lives in the browser.
• Frontend developers looking for a polished, customisable widget to embed inside client projects.
• Indie makers and solopreneurs who appreciate warm, editorial aesthetics over corporate blue.
• Educators and students studying how a real drag-and-drop Kanban is built from scratch in vanilla JS.

Key Features in Depth

Cards can be dragged smoothly between the three columns — To Do, In Progress, and Done — using the native HTML5 drag-and-drop API, enhanced with visual drop-zone highlighting. A compact inline add-card form lets you type a title and optional tag, hitting Enter or clicking the warm terracotta button to confirm. Each card shows a coloured tag pill, a subtle paper-like shadow, and a one-click delete button. The whole board state is persisted to localStorage so tasks survive page reloads. A live column counter badge updates automatically as cards move. The crème linen background, warm serif headings and hand-crafted CSS give the widget a premium editorial feel completely distinct from generic dark-sidebar dashboards.

What's Included

• index.html — fully self-contained widget with embedded CSS and JS (single file, ~320 lines)
• README.md — setup, customisation guide and file map

How to Customise / Get Started

1. Open index.html in any modern browser — it works immediately with preloaded demo tasks.
2. Edit the :root CSS variables at the top of the <style> block to change colours, fonts or border-radius in one place.
3. Change the default column names or add a fourth column by editing the COLUMNS array in the <script> block.
4. Clear localStorage in DevTools to reset the board to its demo state.
5. Embed the widget inside an existing page by wrapping it in an <iframe> or by copying the <style> and <script> blocks into your own HTML.