Render HTML to the DOM in an Elm View

    Enrico BuonannoEnrico Buonanno

    In Elm, you use functions to create a representation of the virtual DOM. There's a straightforward correspondence between these functions and the HTML that's produced as a result.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:00 Let's start by creating a file where the code for our form will live. Next, I'm going to open it in an editor. Now, I'm simply going to copy some very simple "Hello, World!" code from the Elm website, and paste this into my mail.elm file. Back in the terminal, I'm going to start Elm Reactor. This is going to serve Elm files on localhost:8000.

    00:33 I can now open a browser window and point to localhost:8000. This will show me that I have an Elm file. It will build it. Now we see that our very simple "Hello, World!" program is rendered.

    00:55 You've noticed that I'm using this plugin for Atom that allows me to run a browser window within my editor. This also has a nice option called live. This will listen for changes. If I change this to be "Hello, Forms" and save, as you can see, it's rebuilt my program.

    01:18 In this very simple program, the main function is just returning a representation of the DOM. To prove this to you, I can say that the type of main is HTML A, where A is a type parameter that we're not particularly interested in now.

    01:36 Notice that this doesn't quite compile, because the HTML type lives in the HTML package. But if I import it, then it does compile. What it means is that text is a function that takes a string. It produces a value that represents a text node that will then be rendered as part of your DOM.

    02:00 Again, to show this to you, let me open the dev tools. Here, you can see this text node. To make this a bit more explicit still, let's wrap this in a div. I would use a div. This div is also a function which I would need to import here. It takes two parameters.

    02:19 The first one is a list of attributes, and the second is a list of elements. These are the child elements, so I'm going to put this text node as a child element.

    02:32 Nothing changed, apparently. But if I look at the HTML that has been produced, you can see that "Hello, Forms" is now indeed wrapped in a div. The same is true of attributes, except attributes have their own package. This is called Html.Attributes.

    02:49 If I wanted to use ID and class attributes, then I could add these here. Let's give this div an ID of hello, and let's give it a class called my-class. If we inspect the resulting HTML, indeed you can see that the ID and the class have been added as attributes on the div.

    03:19 As you build a view, you will be using a lot of these elements and attributes. It's also very common to just import everything, all the values that are exposed by the HTML and the Html.Attributes package.