DEV Community

Rijul Rajesh
Rijul Rajesh

Posted on

Hello Elm: Your First Steps in Browser-Based Programming

Elm is a programming language designed specifically for building web applications. It lets you create user interfaces in the browser in a clear and structured way. Elm focuses on making your code simple and safe, so you run into fewer errors compared to writing plain JavaScript.

Trying Elm with the REPL

The Elm REPL (Read-Eval-Print Loop) is an interactive tool to try out Elm code. Open your terminal and type:

elm repl
Enter fullscreen mode Exit fullscreen mode

You can now type small snippets of Elm code and see the results instantly. For example:

2 + 3
Enter fullscreen mode Exit fullscreen mode

Output:

5 : number
Enter fullscreen mode Exit fullscreen mode

Writing Your First Elm Program

Create a file called HelloWorld.elm with the following content:

module Main exposing (main)

import Browser
import Html exposing (text)

main =
    Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> text "Hello, Elm!" }
Enter fullscreen mode Exit fullscreen mode

This program displays Hello, Elm! in the browser.

Compiling Elm Code

To turn this Elm file into something a browser can run, use the elm make command:

elm make HelloWorld.elm
Enter fullscreen mode Exit fullscreen mode

By default, this creates an index.html file. Open it in your browser and you will see:

Hello, Elm!
Enter fullscreen mode Exit fullscreen mode

You can also customize the output name:

elm make HelloWorld.elm --output hw.js
Enter fullscreen mode Exit fullscreen mode

Or compile multiple files together:

elm make HelloWorld.elm MyModule.elm --output hw.js
Enter fullscreen mode Exit fullscreen mode

If you want to see warnings for potential issues in your code, add --warn:

elm make HelloWorld.elm --warn
Enter fullscreen mode Exit fullscreen mode

You can even directly save the compiled output as HTML:

elm make HelloWorld.elm --output hw.html
Enter fullscreen mode Exit fullscreen mode

Installing Packages

Elm has many reusable libraries called packages. For example, to work with HTML elements, you can install the elm-html package:

elm package install evancz/elm-html
Enter fullscreen mode Exit fullscreen mode

Summary

Elm is beginner-friendly, safe, and fun for building web applications. By using the REPL, writing simple programs, and compiling them to run in a browser, you can see immediate results. Even with just a few lines, you can create a working web page that displays text, giving you a hands-on introduction to web development with Elm.

If you’ve ever struggled with repetitive tasks, obscure commands, or debugging headaches, this platform is here to make your life easier. It’s free, open-source, and built with developers in mind.

👉 Explore the tools: FreeDevTools

👉 Star the repo: freedevtools

Top comments (0)