Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    Create an Elm View from Existing HTML

    Enrico BuonannoEnrico Buonanno

    Elm views ultimately generate HTML; but sometimes it's useful to go the other way around: you may be writing an Elm app based on a mockup, or a legacy app. You can do this using HTML to Elm



    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


    Instructor: 00:00 The normal process is that you will write an Elm view using Elm's functions, and this will produce some HTML. Sometimes, you want to go the other way around. You have some HTML, and you want to create the corresponding Elm code.

    00:15 This can be useful if you have an HTML mockup of your application, or if you are migrating a legacy application written in some other technology.

    00:24 To do this, there's a very convenient application on the Web. It's called HTML to Elm. You just type some HTML on the left side, and you'll see the corresponding code on the right side. For example, if I paste in the HTML that's generated for the form I'm building, then you'll see on the right side the corresponding Elm code.

    00:43 Most of the time, you can just copy that and paste it into your Elm code, and it will work. Maybe a couple of fixes are required, and then of course you need to add any behavior.

    00:53 To prove this to you, let me copy this code. Let me go to my editor, and let me copy in the code that was generated by HTML to Elm. I need to put the HTML prefix here, and other than that, the code works just perfectly.