Sidemenu Example

A checklist app that lives entirely in the side menu.

Sidemenu

Cowork Studio

Tasks

Ship landing

Review PR #42

Write digest

+ Add task

your editor

The smallest possible Cowork app: one .jsx file rendered in a sidemenu slot. Add a task, tick it off, and the state persists to a local tasks.json next to the app.

Use this shape when the app is glanceable — something you want visible beside your work all day, without ever opening a tab.

Installation

cowork template install tasks-sidemenu

Code

// Cowork/Apps/tasks-sidemenu.jsx
export default function Tasks({ storage }) {
  const [tasks, setTasks] = storage.useJson('tasks.json', []);
  return (
    <div className="p-3 space-y-2">
      {tasks.map((t, i) => (
        <label key={i} className="flex gap-2 items-center">
          <input type="checkbox" checked={t.done}
            onChange={() => setTasks(toggle(tasks, i))} />
          <span>{t.text}</span>
        </label>
      ))}
      <AddTask onAdd={(text) => setTasks([...tasks, { text }])} />
    </div>
  );
}

← Introduction Sidemenu + Workbench Example →