\
**Category:** Learn\
**Created:** [June 19, 2023, 3:37pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197 "2023-06-19T15:37:05Z")\
**Posts on this page:** 11\
**Page:** 1
**Author:**  [@doloops](https://discourse.elm-lang.org/u/doloops)\
**Post date:** [June 19, 2023, 3:37pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/1 "2023-06-19T15:37:05Z")
Hi all,
I am approaching Elm. Currently, I am evaluating Elm for a specific use case.
I have an admin website to perform CRUD operations. It’s made in Elixir (Phoenix) and has small bits of javascript only where needed.
Some examples:
- Toggling visibility of a password field
- Toggling visibility of a sidebar
- Toggling visibility of a user menu
- A date picker widget
In the examples I’ve seen so far Elm takes care of the “templating” part, so my question is:
Can I write Elm logic that works with the HTML I already have?
If so, is it idiomatic or just goes against the Elm Architecture?
I love the language, but I don’t want to misuse that and make it a nightmare to work with
Thank you,
Cheers!
---
**Author:**  [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [June 19, 2023, 3:40pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/2 "2023-06-19T15:40:01Z")
Your use case sounds more like you should be using CSS and HTML, and maybe a teeny tiny bit of JS.
---
**Author:**  [@doloops](https://discourse.elm-lang.org/u/doloops)\
**Post date:** [June 19, 2023, 3:41pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/3 "2023-06-19T15:41:58Z")
I already have the tiny bits of JS.
I just wanted to port them in a functional and statically typed language, I went through the Elm guide and it was great. Really love the language.
OTOH, I don’t want to use it in the wrong context.
---
**Author:**  [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [June 19, 2023, 4:05pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/4 "2023-06-19T16:05:56Z")
I don’t think it’d be the wrong context or even a bad idea. Just feels like too much for small UI things. E.g. the side menu could likely be done in CSS only. You could optionally add a tiny bit of JS if you’d prefer that route. This means your page loads incredibly fast.
* * *
I’d also take note that mixing Elm with JS, static HTML, etc should be thought of as working with black boxes. You can send data into Elm and you’ll get data out, and vice versa. You can’t directly query the DOM from Elm.
---
**Author:**  [@doloops](https://discourse.elm-lang.org/u/doloops)\
**Post date:** [June 20, 2023, 5:26am UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/5 "2023-06-20T05:26:42Z")
> [@wolfadex](#):
>
> I’d also take note that mixing Elm with JS, static HTML, etc should be thought of as working with black boxes. You can send data into Elm and you’ll get data out, and vice versa. You can’t directly query the DOM from Elm.
I believe that’s exactly what would make Elm not the ideal tool for this particular job, thanks a lot!
Don’t want to shot at a mosquito with a bazooka.
Out of curiosity: do you know any functional language (preferably with algebraic data types) that has easy access to the DOM in some clever way?
Cheers!
---
**Author:**  [@benjamin-thomas](https://discourse.elm-lang.org/u/benjamin-thomas)\
**Post date:** [June 20, 2023, 6:44am UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/6 "2023-06-20T06:44:13Z")
> [@doloops](#):
>
> with the HTML I already have
Hey, that’s a rails tagline! 🙂
You could have a look at this language for something in between: [https://rescript-lang.org/](https://rescript-lang.org/)
Maybe the React/JSX support could be useful to migrate fragments of HTML and add behavior to them bit by bit. I haven’t used the language yet though, and I don’t think it interests me.
If you just wanna have fun though, I should point out that you can use converter tools such as this one: [https://html-to-elm.com/](https://html-to-elm.com/)
---
**Author:**  [@doloops](https://discourse.elm-lang.org/u/doloops)\
**Post date:** [June 20, 2023, 10:49am UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/7 "2023-06-20T10:49:44Z")
Thank you, I’ll think about that.
Another option would just use a “functional” library for javascript + a typing system (but the feeling is different I believe)
---
**Author:**  [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [June 20, 2023, 3:45pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/8 "2023-06-20T15:45:16Z")
I was going to suggest this, but when there’s so little scripting needed I really like to keep it as simple as possible. Mostly meaning I try to avoid any additional build steps or dependencies.
---
**Author:**  [@doloops](https://discourse.elm-lang.org/u/doloops)\
**Post date:** [June 21, 2023, 4:45am UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/9 "2023-06-21T04:45:02Z")
> [@wolfadex](#):
>
> avoid any additional build steps or dependencies
This.
Also, some of the js bits are so small they are inline, and I am not ashamed of that.
This one’s interesting for small bits of logic: [///\_hyperscript](https://hyperscript.org/docs/)
But that’s OT.
Cheers!
---
**Author:**  [@novid](https://discourse.elm-lang.org/u/novid)\
**Post date:** [June 21, 2023, 6:57pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/10 "2023-06-21T18:57:32Z")
There are tiny libraries to handle such matters, if you’re not sure about using Elm to work with or replace the existing solution. [RE:DOM](https://redom.js.org/) is one of them, but I haven’t used it.
---
**Author:**  [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [July 1, 2023, 6:57pm UTC](https://discourse.elm-lang.org/t/elm-with-existing-html-templates/9197/11 "2023-07-01T18:57:54Z")
Closed on July 1, 2023, 6:57pm UTC
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.