How to create a Hello World Elm app

Key takeaways:

  • Elm is a functional programming language that compiles to JavaScript, emphasizing simplicity and maintainability with minimal runtime errors. To get started, install Elm using npm after ensuring Node.js is installed.

  • To create an Elm application, set up a project directory, initialize the project to create the necessary configuration file, and create a source file (Main.elm) containing the Elm code that outputs “Hello, World!” on a web page.

Elm is a functional programming language that compiles to JavaScript and is designed to build web applications. It is known for its strong emphasis on simplicity, readability, and maintainability. One key feature of Elm is that there are few to no runtime errors.

To create a “Hello World” application in Elm, follow these steps for setting up and running the project.

Steps to create Elm application

Here are the steps to create an Elm application:

Step 1: Install Elm

First, you need to install Elm. You can do this using npm, the Node.js package manager.

Run the following command to install Elm:

npm install -g elm
Installing Elm

Verify that Elm is installed correctly by running:

elm --version
Checking Elm version

Step 2: Create your Elm project directory

Create a new directory for your Elm project and navigate to it:

mkdir hello-elm
cd hello-elm
Creating Elm project directory

Step 3: Initialize the Elm project

Now, initialize a new Elm project in this directory by running:

yes | elm init
Initializing the Elm project

This command will create the initial project structure. We’ll now have an elm.json file in our project folder, which contains the basic configuration for our Elm project.

Step 4: Create an Elm source file

Next, create a new file in the src directory (you may need to create this folder) called Main.elm:

mkdir src
touch src/Main.elm
Creating Elm source file

Now, open src/Main.elm in your text editor and add the following Elm code:

module Main exposing (main)
import Browser
import Html exposing (text)
main =
    Browser.sandbox { init = init, update = update, view = view }
init =
    "Hello, World!"
type Msg
    = NoOp
update msg model =
    model
view model =
    text model
Source code for Main.elm

This code defines a simple Elm application that displays “Hello, World!” on the web page.

Step 5: Install the HTTP server

For easy testing, we can use a local development server to serve our Elm app. One option is using http-server via npm:

npm install -g http-server
Installing HTTP server to test application

Step 6: Compile Elm to HTML

Compile your Elm code to JavaScript by running the following command:

elm make src/Main.elm --output=main.js
Compiling the ELM to HTML

This command will generate a main.js file that you can include in an HTML file to run your Elm app.

Step 7: Create an HTML file

Create an index.html file in the project’s root directory, and add the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Elm</title>
</head>
<body>
    <div id="elm"></div>
    <script src="main.js"></script>
    <script>
        var app = Elm.Main.init({ node: document.getElementById('elm') });
    </script>
</body>
</html>
Source code for index.html

This HTML file includes the compiled Elm code and will load your Elm app.

Step 8: Run your application

Now, you can run your application. If you installed http-server earlier, start it in your project directory:

http-server
Running the Elm application

Visit http://localhost:8080 in your browser, and you should see the “Hello, World!” message displayed on the page.

Try it yourself

Now, you can test the Elm application by running the following code. The Hello, World! message will be displayed on the web page when you click the link in the widget below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Elm</title>
</head>
<body>
    <div id="elm"></div>
    <script src="main.js"></script>
    <script>
        var app = Elm.Main.init({ node: document.getElementById('elm') });
    </script>
</body>
</html>
Running the Hello World Elm application

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is Elm programming used for?

Elm is primarily used for building web applications, especially those requiring interactive and complex user interfaces. Its functional programming paradigm, strong type system, and focus on immutability make it ideal for developing applications that are reliable, maintainable, and free of runtime exceptions. Elm is particularly favored for building single-page applications (SPAs) with smooth, high-performance UI components.

How does Elm work?

Elm works by using a functional programming approach with a Model-View-Update (MVU) architecture. The process involves:

  1. Model: The state of the application.
  2. View: How the state is displayed in the user interface.
  3. Update: How the state changes in response to user actions.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved