Build a Multi-Tab Todos App in Script Kit

Create, read, update, delete. Four actions that every developer becomes intimately familiar with over their career. Script Kit aims to make this process as pleasant as possible using a db helper and what better way to show it off than a Todos app?

You will also learn how to create and switch between tabs through Script Kit's onTab and setTab methods.

Install todos

// Name: Todos

import "@johnlindquist/kit"

let { todos, write } = await db({ todos: [] })

onTab("Todos", async () => {
  while (true) {
    let todo = await arg("Toggle todo:", todos)
    let t = _.find(todos, todo)
    t.tag = t.tag === "open" ? "done" : "open"
    await write()
  }
})

onTab("New", async () => {
  let name = await arg("New todo:")
  todos.push({ name, id: uuid(), tag: "open" })
  await write()
  setTab("Todos")
})

onTab("Remove", async () => {
  let todo = await arg("Remove todo:", todos)
  _.remove(todos, todo)
  await write()
  setTab("Todos")
})