Build a todolist with SolidJS

Archie To

ARCsoft recently decided to use SolidJS as the frontend framework for our future projects. If you’re new to SolidJS, don’t be afraid. Let’s learn SolidJS together by building a simple todolist app.

Disclaimer: I, by no means, am an expert in SolidJS. Therefore, the code I write here is NOT guaranteed to follow all best practices, though I promise to do my best. I welcome any constructive feedback that you have on SolidJS standards and will make necessary updates to the blog post.

Main objective

Demo of the app that we’ll build: https://todolist-solidjs.rs-dev.uvic.ca

One of the most important features of SolidJS is reactivity - the ability of the UI to automatically update and reflect changes in the application data and state without requiring the developer to manually write code to handle those updates.

Imagine a counter app where you click a button and increment a counter. In SolidJS, you can just do:

<div>{count()}</div>
<button onClick={() => setCount(count() + 1)}>+ Increment</button>

In vanilla JavaScript, you’d have to attach an event listener to the button and get the current value of the counter. Afterward, you’d have increase the value and display that value. The reactivity gets significantly more useful for big applications where you need to update multiple places in the UI on a state change.

In this tutorial, we will focus on the two most important (in my opinion) reactivity features that SolidJS has to offer:

  • createSignal: Provides a value getter and setter that updates the value in real-time on the UI
  • createEffect: Provides a function that executes every time a signal’s value within it changes

You can implement many functionalities in SolidJS with these two functions alone.

Assumptions

This tutorial assumes you have Node.js v23.3.0 installed.

Project setup (the fast way)

If you don’t want to get into the specifics of the project setup, simply grab the code from my personal Gitlab repository:

git clone https://gitlab.com/toanhminh0412/solidjs-starter.git todolist
cd todolist
npm install
npm run dev

Visit http://localhost:3000 and you should see a blank page with a big “Todolist” heading in the middle.

Project setup (the long way)

In this tutorial, I’m going to use SolidStart to create a project with TailwindCSS and DaisyUI for stylings.

$ npm init solid@latest
Need to install the following packages:
create-solid@0.5.14
Ok to proceed? (y) y


> npx
> create-solid

┌  
 Create-Solid v0.5.14
│
◇  Project Name
│  todolist
│
◇  Is this a SolidStart project?
│  Yes
│
◇  Which template would you like to use?
│  with-tailwindcss
│
◇  Use Typescript?
│  No
│
◇  Project successfully created! 🎉
│
◇  To get started, run: ─╮
│                        │
│  cd todolist           │
│  npm install           │
│  npm run dev           │
│                        │
├────────────────────────╯

$ cd todolist
$ npm install

For the sake of this tutorial, we would make our entire site client-side rendering (SolidStart also supports server-side rendering for SEO). Update app.config.js:

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  ssr: false
});

Install DaisyUI:

$ npm i -D daisyui@latest

Add DaisyUI to tailwind.config.js and set the theme to light:

module.exports = {
  //...
  plugins: [
    require('daisyui'),     # Add this line
  ],
  // Add the following block
  daisyui: {
    themes: ["light"],
  },
}

Let’s remove stuff that we don’t need:

  1. Remove src/components directory
  2. In app.jsx, remove <Nav /> component import and call (line 4 and 12)
  3. Update src/routes/index.jsx:
export default function Home() {
  return (
    <main class="py-40">
      <h1 class="text-5xl font-bold text-gray-900 text-center">Todolist</h1>
    </main>
  );
}
  1. In app.css, remove everything and only leave:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Remove src/routes/about.jsx

Now run npm run dev and visit http://localhost:3000 and you should see a blank page with a big “Todolist” heading in the middle

Let’s start building

From now on, we will use todolist as our root directory. We will write our entire app in one file–src/routes/index.jsx, as this file renders what’s on / of our app. For more on SolidStart routing, visit this doc.

Update CSS

Let’s start by adding some CSS to our project. Update app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;


.container {
  @apply mt-10 max-w-[600px] mx-auto;
}

.todo {
  @apply card card-side bg-blue-100 shadow-lg my-3 rounded-md items-center justify-between px-4;
}

.todo .content {
  @apply py-4 flex flex-row items-center gap-3;
}

.todo input[type="checkbox"] {
  @apply checkbox checkbox-primary checkbox-sm;
}

If you’re not interested in learning TailwindCSS, there is no need to understand the CSS syntax here. Each of these classes simply represent a single or a combination of CSS attributes.

Create and render a default todolist

Create our todos. In src/routes/index.jsx:

import { createSignal } from "solid-js";

export default function Home() {
  const [todos, setTodos] = createSignal([
    {"id": 1, "title": "Do laundry", "completed": false},
    {"id": 2, "title": "Clean room", "completed": false},
    {"id": 3, "title": "Go to the gym", "completed": false}
  ]);

  ...
}

createSignal takes in a parameter: an initial value, and return an array of two functions. The first item of the returned array is the value getter and the second is the value setter. If we want to get our current todos, all we need to do is to call the getter: todo(). We will use this getter to render a list of todos as follows:

import { createSignal, For } from "solid-js";       // import For

export default function Home() {
    ...
    <main class="py-40">
      <h1 class="text-5xl font-bold text-gray-900 text-center">Todolist</h1>

      <div class="container">
        <For each={todos()}>
          {todo => (
            <div class="todo">
              <div class="content">
                <input type="checkbox"/>
                <h3 class="card-title">{ todo.title }</h3>
              </div>
              <button class="btn btn-error">X</button>
            </div>
          )}
        </For>
      </div>
    </main>
    ...
}

In here, we use the SolidJS built-in For class for list rendering. Each item has a checkbox, a title and a delete button. Later on, we will add functionalities onto those so that each item is set as completed if we click on the checkbox, and the item is removed if we click on the delete button.

Add a todo

Next, let’s create a form to add todos:

export default function Home() {
  const [todos, setTodos] = createSignal([
    {"id": 1, "title": "Do laundry", "completed": false},
    {"id": 2, "title": "Clean room", "completed": false},
    {"id": 3, "title": "Go to the gym", "completed": false}
  ]);

  // Create a function to add a new todo
  const addTodo = e => {
    e.preventDefault();
    setTodos([
      ...todos(),
      {
        "id": todos().length ? todos()[todos().length-1].id + 1 : 1,
        "title": e.target.todo.value,
        "completed": false
      }
    ]);
    e.target.todo.value = "";
  }

  return (
    ...
      <div class="container">
        <For each={todos()}>
          {todo => (
            <div class="todo">
              <div class="content">
                <input type="checkbox"/>
                <h3 class="card-title">{ todo.title }</h3>
              </div>
              <button class="btn btn-error">X</button>
            </div>
          )}
        </For>
        
        {/* Create a form that adds a new todo on submission */}
        <form onSubmit={addTodo}>
          <input type="text" placeholder="New todo" required/>
          <button type="submit">+ Add todo</button>
        </form>
      </div> 
    ...
  );
}

We created a function that receives an event – a form submission event – as a parameter. We called preventDefault method to prevent a page reload, which provides a smooth UX. We then used the value setter to update the current array of todos. Note how we used the spread separator ... to get the current array and appended a new item onto that. Lastly, we cleared the current input tag.

We attached the function to an onSubmit event of the form, which means the function will be called everytime the form is submitted. So now, if you type something in the “New todo” input, and either hit Enter or click the + Add todo button, you should see a new todo.

Setting an item as “completed”

Clicking on a checkbox should set the corresponding todo as completed. Start by adding some CSS to completed todos. In app.css:

...
.todo {
  @apply card card-side bg-blue-100 shadow-lg my-3 rounded-md items-center justify-between px-4;
}

.todo.completed {
  @apply bg-green-400;
}

.todo.completed h3.card-title {
  @apply line-through;
}

.todo .content {
  @apply py-4 flex flex-row items-center gap-3;
}
...

Add a completed class to all todos that are completed. All we need to do now is to toggle the completed attribute for each item when clicking on the checkbox.

  const addTodo = {
    ...
  }

  // Set a todo as completed
  const setCompleted = id => {
    setTodos(todos => 
      todos.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }

  return (
    ...
        <For each={todos()}>
          {todo => (
            {/* Add a 'completed' class to a completed todo */}
            <div class={`todo${todo.completed ? " completed" : ""}`}>
              <div class="content">
                {/* Toggle todo's completed attribute when clicking on the checkbox */}
                <input type="checkbox" checked={todo.completed} onChange={() => setCompleted(todo.id)}/>
                <h3 class="card-title">{ todo.title }</h3>
              </div>
              <button class="btn btn-error">X</button>
            </div>
          )}
        </For>
    ...
  )

setCompleted is pretty straightforward to understand. It receives a todo’s ID and updates that todo’s completed attribute. See how we used a different variation of the setTodos setter function? This variation receives an inner function as a parameter. The inner function receives the current todolist and returns a new todolist. The current todolist will be set to the new todolist returned by this function.

Now, if you click on a checkbox, the corresponding todo should turn green and have a strikethrough on its title.

Delete a todo

Clicking on a red “X” button should remove a todo from the current list. Update src/routes/index.jsx:

  const setCompleted = id => {
    ...
  }

  // Delete a todo
  const deleteTodo = id => {
    setTodos(todos => todos.filter(todo => todo.id !== id));
  }

  return (
    ...
        <For each={todos()}>
          {todo => (
            {/* Add a 'completed' class to a completed todo */}
            <div class={`todo${todo.completed ? " completed" : ""}`}>
              <div class="content">
                {/* Toggle todo's completed attribute when clicking on the checkbox */}
                <input type="checkbox" checked={todo.completed} onChange={() => setCompleted(todo.id)}/>
                <h3 class="card-title">{ todo.title }</h3>
              </div>
              {/* Delete the todo from the list when clicking on the "X" button */}
              <button class="btn btn-error" onClick={() => deleteTodo(todo.id)}>X</button>
            </div>
          )}
        </For>
    ...
  )

Again, we used the different variation of setTodos setter function. The function receives an inner function that takes in the current todolist, and returns a new list without the deleted todo. If you click on an “X” button, you should see a todo deleted.

Persist our todos - createEffect comes into play

With our current implementation, if you refresh the page, our todos is reset to default – all of our changes are gone. We want our todos to remain the same after a page refresh. Here is how we can use createEffect for it. The idea is that we will save the todos into our browser’s local storage on every update. If we refresh the page, our todos will be loaded from the local storage instead of being reset to default.

import { createSignal, createEffect, For } from "solid-js";     // import createEffect

export default function Home() {
  // Set a variable to store the default todos
  const defaultTodos = [
    {"id": 1, "title": "Do laundry", "completed": true},
    {"id": 2, "title": "Clean room", "completed": false},
    {"id": 3, "title": "Go to the gym", "completed": false}
  ];
  
  // Initialize todos from local storage if exists, otherwise initilize todos with the default list
  const [todos, setTodos] = createSignal(localStorage.getItem("todos") ? JSON.parse(localStorage.getItem("todos")) : defaultTodos);

  // Save todos to local storage on every update
  createEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos()));
  });

  ...
}

We created a createEffect call that saves our todos into the browser’s local storage on every update. The function that is passed into createEffect is called every time a signal within it changes. In this case, todos() is changing. So everytime todos() value changes, localStorage.setItem("todos", JSON.stringify(todos())); is run, which saves our todos to the local storage.

Now, if you refresh the page, you should have the last record of our todos instead of the default.

Conclusion

SolidJS does a lot of the heavy lifting for us when it comes to UI updates on application state changes. Doing this in vanilla JavaScript would require much more effort, and that doesn’t take into account code readability and maintainability. This is just a simple example, but with the two createSignal and createEffect functions, you can implement many more complex functionalities. For example, you can query an API, or update an entry in the database on user inputs (not saying that you should), and have that information updated in real-time on the UI. I hope that you find this tutorial helpful and, like I say above, I welcome constructive feedback.

Resources