Kanban Column Widget

A simple two-column kanban widget with clickable cards that move between lists on a dark theme.

About this component

Kanban Column Widget is an interface component generated on MorphCanvas, an infinite AI workspace that turns written intent into reviewable HTML, CSS, and JavaScript widgets. This component passed MorphCanvas’s automated safety scan, which checks for unsafe patterns such as external network calls, storage access, inline event handlers, and code execution, and it is rendered here inside a sandboxed preview frame.

How it was built

A creator described the result they wanted, MorphCanvas routed the request through its AI provider chain with automatic failover, scanned the generated code, and published the reviewed component to the public library. You can build and publish your own components on the MorphCanvas canvas.

Source Code

<div class="kanban"><div class="column" id="todo"><h2>To Do</h2><div class="card">Task 1</div><div class="card">Task 2</div></div><div class="column" id="done"><h2>Done</h2><div class="card">Task 3</div></div></div>

body{margin:0;background:#1e1e1e;color:#fff;font-family:sans-serif;} .kanban{display:flex;height:100vh;gap:1rem;padding:1rem;} .column{flex:1;background:#2e2e2e;border-radius:8px;padding:1rem;box-shadow:0 2px 5px rgba(0,0,0,.3);} .column h2{margin-top:0;text-align:center;} .card{background:#3e3e3e;border-radius:4px;padding:.75rem;margin:.5rem 0;cursor:pointer;transition:background .2s;} .card:hover{background:#4e4e4e;}

document.addEventListener('DOMContentLoaded',()=>{document.querySelectorAll('.card').forEach(card=>{card.addEventListener('click',()=>{const col=card.parentElement;const target=document.querySelector('.column:not([id="'+col.id+'"]'));target.appendChild(card);});});});