Quickstart Elm 0.19, part 1
Get started quickly with the Elm language, version 0.19
is a developer, technical writer, and a (former) designer.
In this article series, we’ll look into learning Elm quickly.
Photo by Braden Collum, @bradencollum on Unsplash
Note: Examples in this article use Elm 0.19.
Contrary to Elm version 0.18, which was a bit of a pain to install, installing Elm 0.19 is actually pretty easy, even fun.
All you have to do is visit this url: https://guide.elm-lang.org/install/elm.html.
On the referenced web page, you’ll find installers for Mac and Windows, and instructions for a Linux installation.
I’ll assume you’ve installed Elm on your system without any major hiccups, and so, we can get started right now.
A practical app to get started with Elm quickly
Let’s first add a brand new folder for our project, then cd into it, and run the
elm init command:
mkdir my-first-elm-app cd my-first-elm-app elm init
This will add an empty
src folder and the
elm.json file to your
elm.json file is your Elm app’s way to keep track of dependencies and other project-related information.
src folder houses all the Elm files of your app.
In this first article in the Quickstart Elm series, we’ll keep things simple, and focus on building just HTML output.
In other words, we’ll use Elm to render DOM text nodes.
Note that some parts of this article are repurposed from my book on Elm titled Elm Web Development, which is an introductory book to Elm 0.18.
In this article, all the code has been updated to Elm 0.19 and some brand new sections have been added.
Rendering text nodes
Let’s add a new file to our
src folder, and call it
import HTML exposing (text) main = text "Hello, World!"
Now save all files in your editor, and run the following command in your console:
elm make src/Main.elm
You’ll get back the following success message logged to the console:
Success! Compiled 1 module.
index.html file will be auto-generated in the root of your project.
To view the compiled Elm app, simply right-click index.html and click on the Open in Default Browser command.
Let’s revisit our Elm code:
import Html exposing (text) main = text "Hello, World!"
The preceding code compiles to a simple
Hello, World! output.
But, what is this output?
Is it an HTML element?
It is actually just a DOM text node. And since text nodes need to have an element attached to them, this text node gets attached to the topmost element that actually does get renderd, which is the
<body> element. You can verify this by inspecting the rendered text in your browser’s Developer Tools.
Let’s do something else here. Let’s render an actual HTML element on the page.
Rendering an actual HTML element on the page
To do this, we need to pass in a function with some attributes to our main variable.
For example, we can do this:
import Html exposing (..) main = h1  [ text "Hello, Elm!" ]
What did we do here?
We passed in the
h1 function to
h1 function takes two parameters; the first parameter is empty, and the second parameter takes in the text function as the attribute. This text function accepts a string of text as its own parameter, in this case, “Hello, Elm!”.
Let’s inspect the Developer Tools after this change. We can see that the text node’s parent is now indeed an
h1 HTML tag.
Changing the function from
Let’s change the function from
h2  [ text "Hello, Elm" ]
Inspecting the compiled
index.html in the browser again, we’ll see that now our text node is indeed wrapped in an
Trying out different HTML tags in Elm 0.19
Let’s try a different tag, for example, an
main = a  [ text "Hello, Elm!" ]
What about an
main = li  [ text "Hello, Elm!" ]
Can we add it as a paragraph?
main = p  [ text "Hello, Elm" ]
Nesting HTML elements in Elm 0.19
Nesting elements is easy.
For example, if we want to render a
div that holds two paragraphs, we will call a
div function and inside its brackets, we’ll call two
p functions, like this:
import Html exposing (..) main = div  [ p  [text "1st paragraph"] , p  [text "2nd paragraph"] ]
In all the examples so far, we left the first parameter empty. That parameter is used to add HTML attributes, for example,
So, let’s now try to color our
import Html exposing (..) import Html.Attributes exposing (class) main = div [ class "success" ] [ p  [text "1st paragraph"] , p  [text "2nd paragraph"] ]
After this most recent update, our Elm app, when compiled to html, will look like this in the browser:
That’s it for this article!
We’ve learned how to install Elm and we wrote some static HTML.
In part 2 of the Quickstart Elm article series, we’ll make things a lot more dynamic by building our first actual Elm app.