25 Elm Examples

These 25 Elm examples will take you from building a static view all the way to building an interactive web app with routing.

Links to the examples using Ellie

• 01-hello-world.elm
• 02-hello-world.elm
• 03-hello-world.elm
• 04-hello-world.elm
• 05-counter.elm
• 06-counter.elm
• 07-counter.elm
• 08-counter.elm
• 09-counters.elm
• 10-counters.elm
• 11-counters.elm
• 12-counters.elm
• 13-input-box.elm
• 14-todos.elm
• 15-todos.elm
• 16-todos.elm
• 17-todos.elm
• 18-editable-todos.elm
• 19-editable-todos.elm
• 20-editable-todos.elm
• 21-localstorage-editable-todos.elm
• 22-localstorage-editable-todos.elm
• 23-filter-todos.elm
• 24-filter-todos.elm
• 25-navigation-todos.elm

How to run and view examples 21-25 on your computer

You can use the Ellie links for examples 21-25, but if you want to run it locally, you can copy/paste the following commands which will clone the Github repo, then compile example 21 to a JavaScript file called elm.js, then you will open the HTML for example 21 in your default browser.

git clone https://github.com/bryanjenningz/25-elm-examples.git
cd 25-elm-examples
elm make 21-localstorage-editable-todos.elm --output elm.js
elm reactor
# The elm reactor command will server your files to http://localhost:8000,
# so go to http://localhost:8000 in your browser and select the HTML file.

The above code will compile and open example 21 in your default browser. To compile and view examples 22 through 25 locally, you do the same process of compiling the Elm file you want to the elm.js JavaScript file, then running elm reactor and selecting the HTML file in your browser at http://localhost:8000.

Other Free Resources

• Official Elm Guide
• Ellie App
• Elm subreddit
• Elm Slack channel
• RealWorld Elm example app

These 25 Elm examples were inspired by the examples on the Elm website and the official Elm guide. Each example tries to build off of the previous example by adding a small amount of code so that it's easy to understand and see how you can build stuff in Elm. If you have any suggestions for more examples that should be added or if anything is unclear, add an issue or make a pull request.