# How do I embed long text documents into a SPA?

**URL:** <https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914>\
**Category:** Learn\
**Created:** [February 15, 2021, 6:16am UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914 "2021-02-15T06:16:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![surferjeff](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/surferjeff/32/3832_2.png) [@surferjeff](https://discourse.elm-lang.org/u/surferjeff)\
**Post date:** [February 15, 2021, 6:16am UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914/1 "2021-02-15T06:16:26Z")

</div>

I used a legal website to draft a Terms and Conditions page, which they provided me in the form of HTML with basic tags like

# ,

, \<etc.\>. It’s about 14kb.

I’d like to display this from within an Elm single-page application. I found [HTML to Elm](http://mbylstra.github.io/html-to-elm/) but it only translates about the first third of of the source and ignores the rest. Also, the text has quotes (") and they’re not properly escaped in the elm code.

Is there a better solution?

---

<div class="post-metadata">

**Author:** ![berend](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/berend/32/2250_2.png) [@berend](https://discourse.elm-lang.org/u/berend)\
**Post date:** [February 15, 2021, 6:20am UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914/2 "2021-02-15T06:20:37Z")

</div>

Maybe there’s a bug in your HTML so it skips the remainder?

---

<div class="post-metadata">

**Author:** ![Janiczek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/janiczek/32/4516_2.png) [@Janiczek](https://discourse.elm-lang.org/u/Janiczek)\
**Post date:** [February 15, 2021, 7:48am UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914/3 "2021-02-15T07:48:15Z")

</div>

A WebComponent might solve your issues. The legal document HTML would simply be set as its innerHTML. From the Elm point of view you would just do `Html.node "x-legal-document" [] []`.

Let me know if this explanation was too shortcutty; I skipped over details of the WebComponent but can fill those in.

---

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [February 15, 2021, 11:51am UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914/4 "2021-02-15T11:51:24Z")

</div>

Really depends on the use-case etc. and it would obviously be better to be able to translate all this HTML into Elm as you have tried. But if you’re looking for a ‘quick’ solution, you can use [elm-markdown](https://package.elm-lang.org/packages/elm-explorations/markdown/latest/) with sanitization turned off, in which case it basically just displays the HTML.

---

<div class="post-metadata">

**Author:** ![catz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/catz/32/1007_2.png) [@catz](https://discourse.elm-lang.org/u/catz)\
**Post date:** [February 15, 2021, 1:09pm UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914/5 "2021-02-15T13:09:53Z")

</div>

Maybe this can be simple html document and show it in iframe ?

---

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [February 15, 2021, 4:32pm UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914/6 "2021-02-15T16:32:19Z")

</div>

You can use the srcdoc attribute on [iframes](https://developer.cdn.mozilla.net/it/docs/Web/HTML/Element/iframe) for that ([canIuse](https://caniuse.com/?search=srcdoc)).

---

<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:** [February 25, 2021, 4:33pm UTC](https://discourse.elm-lang.org/t/how-do-i-embed-long-text-documents-into-a-spa/6914/7 "2021-02-25T16:33:02Z")

</div>

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