Create a to-do list in Elm

Elm is a functional programming language that was built in 2012 by Evan Czaplicki. It is mainly used to create the frontend of websites. It can create numerous web applications, such as a to-do list. A to-do application is designed to help individuals and teams organize and manage tasks, activities, and goals. It allows us to create, manage, and complete tasks efficiently. This Answer will go through creating a basic to-do list application in Elm. 

To-do list
To-do list

Expected result

Before creating a to-do list application in ELM, We can see the output below and better understand how the app will look.

Output of a to-do list application
Output of a to-do list application

The Elm architecture

Elm programming architecture is commonly called Elm Architecture. It is an Elm application structure pattern based on the Model-View-Update (MVU) paradigm.

There are three main components of the Elm Architecture:

  • Model: This serves as an application state representation. It is a data structure that contains the important data of the application.

  • View: This renders the current state of the model. It returns the HTML representation of the user interface after receiving the model as an argument.

  • Update: This is used to update the state of the model. It returns an updated state for the model after obtaining its current state and action to perform.

Getting started

A few basic steps have to be taken to create a to-do application in Elm:

Import the required modules

In the code snippet below, we import the basic modules, functions, attributes, etc., for form creation in Elm.

import Html exposing (button, Html, div, text, ul, li, input)
import Html.Attributes exposing (placeholder,style,  value)
import Html.Events exposing (onClick, onInput)
import List exposing (filter)
import Browser
Importing the required libraries

  • Browser: This module is used to set up web applications.

  • Html: This module is used to handle various events and build and modify HTML components. It is responsible for creating the UI or user interface.

  • List: This module uses the filter function to filter elements based on the given condition.

Define and initialize the Model

In the code snippet below, we define our model.

type alias Model =
    { tasks : List Task
    , currentTask : String
    , nextId : Int
    }
init : Model
init =
    { tasks = []
    , currentTask = ""
    , nextId = 1
    }
Defining and initializing the model

  • type alias: This defines the Model custom data type with list, string, and int type fields.

  • init: This is a function used to initialize the Model data structure. It will return the Model data structure with its initialized values.

Define the update function

In the code snippet below, we define the update function, which takes two arguments (Msg and Model) and returns Model (updated state). The model is updated correctly based on the type of message received through the use of a pattern-matching approach.

update : Msg -> Model -> Model
update msg model =
    case msg of
        Add ->
            let
                newTask =
                    { id = model.nextId, name = model.currentTask }
            in
            { model | tasks = newTask :: model.tasks, currentTask = "", nextId = model.nextId + 1 }
        UpdateTask newTask ->
            { model | currentTask = newTask }
        Delete taskId ->
            { model | tasks = List.filter (\task -> task.id /= taskId) model.tasks }
The update function to render changes

Define the view function

In the code snippet below, we define the view function. It takes the parameter Model and creates an HTML user interface. We can insert/add a task in the given field by clicking the “Add” button. 

view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "New Task", value model.currentTask, onInput UpdateTask ] []
        , button [ onClick Add ] [ text "Add" ]
        , ul [] (List.map viewTask model.tasks)
        ]
The view function for the UI

Complete code

The complete code of the to-do application is given below in src/Main.elm. We can run the application by pressing the “Run” button. The elm.json file represents the dependencies.

{
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.0",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.1",
            "elm/core": "1.0.2",
            "elm/html": "1.0.0",
            "elm/time": "1.0.0",
            "elm/http": "2.0.0",
            "elm/json": "1.1.3"
        },
        "indirect": {
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2",
            "elm/bytes": "1.0.8",
            "elm/file": "1.0.5"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}
The to-do list application

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved