Elm

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

COURSES 2

WATCH Enrico Buonanno's COURSE

Understand the Elm Type System

Understand the Elm Type System

Elm has a powerful type system that can help you to model your application's data precisely and safely. The type system just by...

13 lessons

WATCH Murphy Randle's COURSE

Start Using Elm to Build Web Applications

Start Using Elm to Build Web Applications

Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powe...

9 lessons

Turn a JSON string Into Typed Data in Elm

Turning JSON strings into types, also known as JSON Decoding is an important part of using Elm. It allows the programmer to use json-encoded data while staying completely aware of when the JSON mig...

Murphy Randle
10:10

Make an HTTP Request in Elm

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with m...

Murphy Randle
13:01

List in Elm

List are an important collection in Elm. In this lesson we learn to create list as well as apply functions to filter, add, and transform them.

Ronn Ross
2:30

Records in Elm

Records are important data structures in Elm. In this lesson we learn to create a record as well as describe the record by creating a type. We will also see how these new types can be used to clean...

Ronn Ross
3:28

Functions in Elm

Functions are an important building block in Elm. In this lesson we will review stateless functions, function composition, anonymous functions, Currying, and more.

Ronn Ross
5:57

Installing and setting up Elm

Before writing any Elm we need to first install the runtime locally. In this lesson we install the Elm runtime locally and set up a simple application to verify everything is working properly.

Ronn Ross
1:54

Decode a List of Numbers From a JSON String in Elm

Decoding JSON strings in Elm is a 2-step process: Create a "recipe" for the decoding Perform the decoding This lesson gives a couple basic examples of the two steps in action.

Murphy Randle
5:21

Build a Tiny App Using the Standard Elm Architecture

Notice: This lesson uses Elm 0.17! Here's a document about the important differences between 0.16 and 0.17. This lesson gives a rapid-paced introduction to what's known as the Elm Application Ar...

Murphy Randle
5:34

Using "Maybe" in Elm for values that may or may not exist

Elm includes a data type called Maybe which is useful for working with values that may, or may not exist. This lesson shows a simple case where maybe types are encountered, and how to make them use...

Murphy Randle
4:22

Create your first web page with Elm

This lesson will take you from nothing to a small Elm app that prints text to the browser.

Murphy Randle
3:50

Elm in 7 minutes

We are going to take a high-level look at what an Elm application looks like? We show how to structure apps, as well as, Elm’s elegant syntax by building a small app.

Ronn Ross
6:54

Browse all Elm lessons.

showing All 34 lessons...

Elm in 7 minutes

P

Create your first web page with Elm

P

Using "Maybe" in Elm for values that may or may not exist

P

Build a Tiny App Using the Standard Elm Architecture

P

Decode a List of Numbers From a JSON String in Elm

P

Installing and setting up Elm

P

Functions in Elm

P

Records in Elm

P

List in Elm

P

Discover New Packages Using the Elm Package Index

Output text in a browser using the text function in Elm

Write functions and Type Signatures in Elm

Reuse Functions Through Type Variables in Elm

Sequencing Data With Lists in Elm

Create Apps Using the Elm Application Architecture

Render HTML in the browser using the Html module in Elm

Store key-value pairs using Records in Elm

Install the Elm Platform command-line tools

Model Data with Simple Union Types in Elm

P

Construct Lists with Elm’s List Type

P

Represent Absent Data with Elm’s Maybe Type

P

Model Data with Elm's Recursive Union Types

P

Handle Errors with Elm’s Result Type

P

Use Single-Constructor Union Types in Elm to Prevent Invalid Data

P

Pattern Match Expressions with Elm's Boolean Type

P

Add Type Annotations to Values and Functions in Elm

Explore the Elm Type System with the Elm Repl

Model Simple Structures with Tuples in Elm

P

Create and Access Records in Elm

P

Update Elm Records with the Pipe Operator

P

Use Type Aliases with Records in Elm

P

Make an HTTP Request in Elm

P

Turn a JSON string Into Typed Data in Elm

P

Render a Basic Element with style-elements in Elm

elm tutorial about Elm in 7 minutes

Elm in 7 minutes

6:54 elm PRO

We are going to take a high-level look at what an Elm application looks like? We show how to structure apps, as well as, Elm’s elegant syntax by building a small app.

elm tutorial about Create your first web page with Elm

Create your first web page with Elm

3:50 elm PRO

This lesson will take you from nothing to a small Elm app that prints text to the browser.

elm tutorial about Using "Maybe" in Elm for values that may or may not exist

Using "Maybe" in Elm for values that may or may not exist

4:22 elm PRO

Elm includes a data type called Maybe which is useful for working with values that may, or may not exist. This lesson shows a simple case where maybe types are encountered, and how to make them useful.

elm tutorial about Build a Tiny App Using the Standard Elm Architecture

Build a Tiny App Using the Standard Elm Architecture

5:34 elm PRO

Notice: This lesson uses Elm 0.17!

Here's a document about the important differences between 0.16 and 0.17.

This lesson gives a rapid-paced introduction to what's known as the Elm Application Architecture. You can read about it in greater detail here:

guide.elm-lang.org.

We'll build a counter that utilizes the standard Elm combination of a model, a view, and update function.

See the linked code for a good starting place.

elm tutorial about Decode a List of Numbers From a JSON String in Elm

Decode a List of Numbers From a JSON String in Elm

5:21 elm PRO

Decoding JSON strings in Elm is a 2-step process:

  1. Create a "recipe" for the decoding
  2. Perform the decoding

This lesson gives a couple basic examples of the two steps in action.

elm tutorial about Installing and setting up Elm

Installing and setting up Elm

1:54 elm PRO

Before writing any Elm we need to first install the runtime locally. In this lesson we install the Elm runtime locally and set up a simple application to verify everything is working properly.

elm tutorial about Functions in Elm

Functions in Elm

5:57 elm PRO

Functions are an important building block in Elm. In this lesson we will review stateless functions, function composition, anonymous functions, Currying, and more.

elm tutorial about Records in Elm

Records in Elm

3:28 elm PRO

Records are important data structures in Elm. In this lesson we learn to create a record as well as describe the record by creating a type. We will also see how these new types can be used to clean up our annotations.

elm tutorial about List in Elm

List in Elm

2:30 elm PRO

List are an important collection in Elm. In this lesson we learn to create list as well as apply functions to filter, add, and transform them.

elm tutorial about Discover New Packages Using the Elm Package Index

Discover New Packages Using the Elm Package Index

2:53 elm

Elm comes with an index of publicly-usable open-source packages. Using packages from this index can substantially improve a developer’s experience. Learn how to find a package through the index, understand its API through type annotations and documentation, download it, and use it in a project.

Elm packages aren't working with embedded Ellie, so I've provided you with a link to the Ellie example here.

elm tutorial about Output text in a browser using the text function in Elm

Output text in a browser using the text function in Elm

2:23 elm

This lesson shows a super simple, yet pleasant, look at the smallest Elm example. We will use the text function from the Html module to display text in a browser.

elm tutorial about Write functions and Type Signatures in Elm

Write functions and Type Signatures in Elm

6:04 elm

Functions are one of the core building blocks of Elm. In this lesson we learn how to define, call, pass parameters, receive parameters, partially apply functions, compose functions, and add correct type signatures. In this lesson we will show how to define functions with type signatures.

elm tutorial about Reuse Functions Through Type Variables in Elm

Reuse Functions Through Type Variables in Elm

1:43 elm

Sometimes a function is useful for many different types. Instead of writing a copy of that function for each different type, learn to use type variables and allow the same function to be reused.

elm tutorial about Sequencing Data With Lists in Elm

Sequencing Data With Lists in Elm

5:57 elm

Lists are used in Elm to represent sequences of data. The List library comes with a toolbox of useful functions. Here we cover list transformation (map), and getting single values from lists (fold).

elm tutorial about Create Apps Using the Elm Application Architecture

Create Apps Using the Elm Application Architecture

4:43 elm

Elm is designed specifically for building applications, and it is built around a scalable and sensible application architecture. Learn the very basics of this architecture through updating application state by reacting to DOM events.

elm tutorial about Render HTML in the browser using the Html module in Elm

Render HTML in the browser using the Html module in Elm

3:14 elm

Elm provides a declarative way to produce DOM elements and react to DOM events, similar to HTML. Learn how to get Web content on the screen by writing functions that take in data and return Elm’s version of HTML.

elm tutorial about Store key-value pairs using Records in Elm

Store key-value pairs using Records in Elm

3:06 elm

A record is a set of key-value pairs, similar to objects in Javascript. Record fields can be accessed through dot-notation, or special access functions. Records are fully type-checked and can be described by type aliases.

elm tutorial about Install the Elm Platform command-line tools

Install the Elm Platform command-line tools

0:36 elm

Getting Elm installed. We will install the Elm CLI with npm. This gives us access to elm-repl and elm-reactor. The repl lets us play with expressions at the command-line, and reactor starts a development server which builds Elm files on-demand.

elm tutorial about Model Data with Simple Union Types in Elm

Model Data with Simple Union Types in Elm

3:30 elm PRO

In this video you will learn about union types in Elm. Union types have no equivalent in mainstream languages like Java or JS, but they provide a powerful way to model your program's data. We'll also see how the values in union types aren't just values, they're functions! So we'll see how we can leverage this to do some powerful things.

Follow along using this online Elm editor.

elm tutorial about Construct Lists with Elm’s List Type

Construct Lists with Elm’s List Type

3:27 elm PRO

List is a union type that is recursively defined with Cons.

Follow along with the online editor at http://elm-lang.org/examples/hello-html

elm tutorial about Represent Absent Data with Elm’s Maybe Type

Represent Absent Data with Elm’s Maybe Type

1:29 elm PRO

An important union type of the Core library, Maybe is used to represent the possible absence of data.

Follow along the documentation at package.elm-lang.org/packages/elm-lang/core/latest/Maybe and download the Elm REPL from elm-lang.org/. If you'd like to try it out in your browser I've provided a link to the Elm repl here.

elm tutorial about Model Data with Elm's Recursive Union Types

Model Data with Elm's Recursive Union Types

1:09 elm PRO

Recursive Union Types in Elm enable you to simply and effectively model list-like or tree-like structures.

For an explanation of simple union types, watch Define simple union types in Elm.

elm tutorial about Handle Errors with Elm’s Result Type

Handle Errors with Elm’s Result Type

1:48 elm PRO

The Result type represents the outcome of an operation that may result in an error.

The documentation is available here. To follow along, get the Elm REPL. If you would like to try it out in your browser check out the Elm REPL here

elm tutorial about Use Single-Constructor Union Types in Elm to Prevent Invalid Data

Use Single-Constructor Union Types in Elm to Prevent Invalid Data

12:06 elm PRO

In this lesson you will learn to use Elm's type and module system to make invalid data unrepresentable, a robust approach to ensure that your data is always consistent!

You should know the basics of union types before tackling this content, they're explained here in Define simple union types in Elm.

You can follow along using any editor and Elm reactor; if you need help with the setup, watch Installing and setting up Elm.

elm tutorial about Pattern Match Expressions with Elm's Boolean Type

Pattern Match Expressions with Elm's Boolean Type

1:00 elm PRO

Unlike many languages, Booleans in Elm are just a plain union type.

Follow along at http://elm-lang.org/examples/hello-html

elm tutorial about Add Type Annotations to Values and Functions in Elm

Add Type Annotations to Values and Functions in Elm

2:55 elm

Type annotations are options in Elm. Adding type annotations can bring a good deal of clarity about which types you are using and what your program does with them

In this lesson we'll be adding type annotations to this Hello World program

elm tutorial about Explore the Elm Type System with the Elm Repl

Explore the Elm Type System with the Elm Repl

2:17 elm

In this lesson we'll use the Elm REPL to learn about the various types in Elm, such as String, Bool, Float, and Int. We'll also see how all operators in Elm are just functions.

Try it out for yourself here in the Elm repl!

elm tutorial about Model Simple Structures with Tuples in Elm

Model Simple Structures with Tuples in Elm

7:12 elm PRO

Tuples are a very simple way of associating values to form a data structure. They can be used to model simple structures in your program and often appear in the APIs of the Core library.

In this lesson learn how alias types, and destructure tuples in function arguments. To follow along check out the elm repl here. I've also provided you with the lesson code down bellow.

elm tutorial about Create and Access Records in Elm

Create and Access Records in Elm

3:50 elm PRO

Records in Elm are very similar to Objects in Javascript. They are useful to represent domain entities and other program data.

In this lesson we'll go over how to create Records, use them in functions, and how to access data from them. Try it out for yourself here in the Elm repl!

elm tutorial about Update Elm Records with the Pipe Operator

Update Elm Records with the Pipe Operator

5:32 elm PRO

In this lesson, we will look at updating a Record's value. We'll see how we can keep simply update a single field of a record without changing the rest by using a function and a pipe -> | operator.

We'll also see how we can update multiple values with a comma separated list as well as look how to update deeply nested values.

elm tutorial about Use Type Aliases with Records in Elm

Use Type Aliases with Records in Elm

2:51 elm PRO

Records in Elm are very basic structures. In this lesson we'll be going over how to add more meaning and robustness to these simple Records.

type alias allows you to specify types for specific fields within your Records, we'll learn why this is useful and how we can even constrain functions to certain types of Records.

http tutorial about Make an HTTP Request in Elm

Make an HTTP Request in Elm

13:01 http PRO

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with messages.

HTTP requests are just pieces of data in Elm. When we want to send them, we hand them off to Elm's runtime, and it notifies us when the request is done. An important part of working with HTTP requests that fetch JSON is JSON decoding, the process by which we can turn untyped JSON data into Elm types that are safe to work with.

Specs:

egghead tutorial about Turn a JSON string Into Typed Data in Elm

Turn a JSON string Into Typed Data in Elm

10:10 egghead PRO

Turning JSON strings into types, also known as JSON Decoding is an important part of using Elm. It allows the programmer to use json-encoded data while staying completely aware of when the JSON might not match the programmer's expectations, all without throwing a run-time error! This lesson will show the viewer how to turn a simple JSON object into an analogous Elm record and use it to render some content to the screen.

elm tutorial about Render a Basic Element with style-elements in Elm

Render a Basic Element with style-elements in Elm

2:52 elm

In this lesson we will take a basic application, bootstrapped with create-elm-app, and begin converting the divs and h1s into style-elements.

Style elements separate our styles from the layout and positioning of elements. The Element module gives us everything we need for our view while the Style module will be the base for creating our stylesheet.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?