# How to get the Raw HTML output of ELM applications

**URL:** <https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025>\
**Category:** Learn\
**Created:** [October 22, 2024, 1:40pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025 "2024-10-22T13:40:38Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![SANTMAN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/santman/32/5101_2.png) [@SANTMAN](https://discourse.elm-lang.org/u/SANTMAN)\
**Post date:** [October 22, 2024, 1:40pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/1 "2024-10-22T13:40:38Z")

</div>

Hi,

I would like to know how to get the Complete HTML view of my website which is generated from ELM.  
Here is an example  
view-source:[https://santhosh.thediaryofanentrepreneur.com/](https://santhosh.thediaryofanentrepreneur.com/) This is my landing page I created using elm-land.  
It doesn’t give me the complete Html view.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/b/b305b0a24db949e635bcd805c1f6563bedb42413.png)

Is there a way I can download the raw HTML of the site generated from ELM?  
Best would be a package or tool which elm supports. But for now I’m open to know if there are any **other cli tools** which could help me get such raw html.

**NOTE:**  
I have already tried

```bash
# elm make --output=index.html

```

Which produces the output

```html
<!DOCTYPE html>
<html lang="en" class="theme-dark">
<head>
    <title>Santhosh's profile</title>
    <meta name="elm-land" content="0.20.1">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.1/css/all.css">
    <link rel="stylesheet" href="/bulma-timeline.min.css">
    <link rel="stylesheet" href="/bulma-tagsinput.min.css">
    <link rel="stylesheet" href="/my_css.css">
    <script type="module" crossorigin src="/assets/index-MCLIfLAV.js"></script>
  </head>
<body>
</body>
</html>

```

Which is not I’m looking for. I need the complete html views generated as html tags.

Thanks  
Santman

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [October 22, 2024, 2:56pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/2 "2024-10-22T14:56:58Z")

</div>

I don’t know exactly what you are trying to achieve, but I would say that [elm-pages](https://elm-pages.com/) is the best at producing pages that are sent as HTML over the wire.

Might be annoying to switch though, if you’re already using Elm Land.

---

<div class="post-metadata">

**Author:** ![SANTMAN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/santman/32/5101_2.png) [@SANTMAN](https://discourse.elm-lang.org/u/SANTMAN)\
**Post date:** [October 22, 2024, 3:46pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/3 "2024-10-22T15:46:39Z")

</div>

> [@lydell](#):
>
> Might be annoying to switch though, if you’re already using Elm Land.

Thanks @lydell for your response. Yep. Migrating is not an option now ☹

Just to give some more context. I want to send the generated files from elm as email. And having these content as embedded javascript will not work for Email HTML, so I needed the raw HTML instead of the one with the javascript generated by elm.

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [October 22, 2024, 4:13pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/4 "2024-10-22T16:13:50Z")

</div>

Then it sounds like you might be looking for [elm-html-string 2.0.2](https://elm.dmy.fr/packages/zwilias/elm-html-string/latest/), and maybe [Platform - core 1.0.5](https://elm.dmy.fr/packages/elm/core/latest/Platform#worker) to run an Elm program in Node.js, for example as a CLI tool that writes the email HTML files.

---

<div class="post-metadata">

**Author:** ![SANTMAN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/santman/32/5101_2.png) [@SANTMAN](https://discourse.elm-lang.org/u/SANTMAN)\
**Post date:** [October 22, 2024, 6:10pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/5 "2024-10-22T18:10:18Z")

</div>

Thank you @lydell I will have a look

> [@lydell](#):
>
> for [elm-html-string 2.0.2](https://elm.dmy.fr/packages/zwilias/elm-html-string/latest/)

Looks 5 years old. I will check if it still works. But I already see the limitations of `img` tag being not supported. But still will give me some good insight on how to go about it.

> [@lydell](#):
>
> [Platform - core 1.0.5](https://elm.dmy.fr/packages/elm/core/latest/Platform#worker)

I need more time to look at this. I will get back with some updates shortly.

Thank you again for your pointers!

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [October 22, 2024, 7:13pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/6 "2024-10-22T19:13:11Z")

</div>

> [@SANTMAN](#):
>
> Looks 5 years old. I will check if it still works.

elm/html is 6 years old. Elm packages don’t really stop working over time.

> [@SANTMAN](#):
>
> But I already see the limitations of `img` tag being not supported

What do you mean it’s not supported? [Html.String - elm-html-string 2.0.2](https://elm.dmy.fr/packages/zwilias/elm-html-string/latest/Html-String#img)

---

<div class="post-metadata">

**Author:** ![SANTMAN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/santman/32/5101_2.png) [@SANTMAN](https://discourse.elm-lang.org/u/SANTMAN)\
**Post date:** [October 23, 2024, 4:11am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/7 "2024-10-23T04:11:52Z")

</div>

> [@lydell](#):
>
> What do you mean it’s not supported? [Html.String - elm-html-string 2.0.2](https://elm.dmy.fr/packages/zwilias/elm-html-string/latest/Html-String#img)

> **[GitHub - zwilias/elm-html-string at 2.0.2](https://github.com/zwilias/elm-html-string/tree/2.0.2)**
>
> 2.0.2

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/496a19f28e3f56667a1f1c53e7c41b301ec6417b.png)

---

<div class="post-metadata">

**Author:** ![IloSophiep](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ilosophiep/32/3489_2.png) [@IloSophiep](https://discourse.elm-lang.org/u/IloSophiep)\
**Post date:** [October 23, 2024, 7:51am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/8 "2024-10-23T07:51:43Z")

</div>

I think that point about “void elements” only points out, that something like

```elm
img [] [div [] [text "test"] ]

```

would NOT result in

```html
<img><div>test</div></img>

```

but would result in

```html
<img />

```

Somebody opened a PR ([#13](https://github.com/zwilias/elm-html-string/pull/13)), that adds a test case for void elements and they use an image tag as their test example - so it looks like it should work.

---

<div class="post-metadata">

**Author:** ![SANTMAN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/santman/32/5101_2.png) [@SANTMAN](https://discourse.elm-lang.org/u/SANTMAN)\
**Post date:** [October 23, 2024, 5:47pm UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/9 "2024-10-23T17:47:41Z")

</div>

Just for kicks, I also thought of hand rolling my own DSL parser and `renderer` in ELM

> <https://github.com/Santhosh-KS/customElmHtmlDSL/blob/2ee45e3d78e1377e542d42918578067790aae88e/src/Dsl/Types.elm#L4>

It is not complete yet. Wanted to get some opinion on pros and cons of such thing compared to the possible solutions suggested here.

Obvious Cons is that, too much boiler plate code.  
But the upside is I’m able to render the generated HTML using elm-land and also dump the required html on to the console, which I could pick from “node myscript.js” and get my work done.

I’m open for some feedback on this custom DSL apporach.

---

<div class="post-metadata">

**Author:** ![ronanyeah](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ronanyeah/32/5497_2.png) [@ronanyeah](https://discourse.elm-lang.org/u/ronanyeah)\
**Post date:** [October 24, 2024, 4:39am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/10 "2024-10-24T04:39:43Z")

</div>

Here’s an example of extracting data when executing Elm with Node.js: [elm-port-gen/src at master · ronanyeah/elm-port-gen · GitHub](https://github.com/ronanyeah/elm-port-gen/tree/master/src)

Another project you may want to leverage is: [https://documentation.mjml.io/](https://documentation.mjml.io/) (non-Elm)

---

<div class="post-metadata">

**Author:** ![SANTMAN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/santman/32/5101_2.png) [@SANTMAN](https://discourse.elm-lang.org/u/SANTMAN)\
**Post date:** [October 24, 2024, 5:51am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/11 "2024-10-24T05:51:47Z")

</div>

> [@ronanyeah](#):
>
> Another project you may want to leverage is: [https://documentation.mjml.io/](https://documentation.mjml.io/) (non-Elm)

Thank you for the suggestion. Infact I’m trying to build an alternative for this using Elm 🙂

> [@ronanyeah](#):
>
> Here’s an example of extracting data when executing Elm with Node.js: [elm-port-gen/src at master · ronanyeah/elm-port-gen · GitHub](https://github.com/ronanyeah/elm-port-gen/tree/master/src)

Can you please update the readme file on how to use this exactly?

---

<div class="post-metadata">

**Author:** ![ronanyeah](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ronanyeah/32/5497_2.png) [@ronanyeah](https://discourse.elm-lang.org/u/ronanyeah)\
**Post date:** [October 24, 2024, 6:08am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/12 "2024-10-24T06:08:08Z")

</div>

The `gen` script in `package.json` runs it.

---

<div class="post-metadata">

**Author:** ![klaftertief](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/klaftertief/32/5338_2.png) [@klaftertief](https://discourse.elm-lang.org/u/klaftertief)\
**Post date:** [October 31, 2024, 5:31am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/13 "2024-10-31T05:31:26Z")

</div>

There is also [elm-html-in-elm 1.0.2](https://package.elm-lang.org/packages/ThinkAlexandria/elm-html-in-elm/latest/), which requires a small patch of the generated JS elm app.  
elm-pages uses (a vendored version of) this internally. Or you could try [GitHub - ThinkAlexandria/elm-static-html: Statically render html from Elm!](https://github.com/ThinkAlexandria/elm-static-html), which is a CLI wrapper around it.

---

<div class="post-metadata">

**Author:** ![SANTMAN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/santman/32/5101_2.png) [@SANTMAN](https://discourse.elm-lang.org/u/SANTMAN)\
**Post date:** [October 31, 2024, 9:11am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/14 "2024-10-31T09:11:11Z")

</div>

Thank you @klaftertief for your suggestion. I will have a look at it and get back.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [November 10, 2024, 9:11am UTC](https://discourse.elm-lang.org/t/how-to-get-the-raw-html-output-of-elm-applications/10025/15 "2024-11-10T09:11:17Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
