\
**Category:** Learn\
**Created:** [November 10, 2021, 8:09am UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896 "2021-11-10T08:09:09Z")\
**Posts on this page:** 9\
**Page:** 1
**Author:**  [@brucesp](https://discourse.elm-lang.org/u/brucesp)\
**Post date:** [November 10, 2021, 8:09am UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/1 "2021-11-10T08:09:09Z")
Hello,
I wrote an live editor for HTML. My app has an input field for the html code and a text field that shows the rendered output. For rendering the code input, I used this package: [https://package.elm-lang.org/packages/hecrj/html-parser/](https://package.elm-lang.org/packages/hecrj/html-parser/). Is there a way to also parse CSS code an change the output accordingly.
Thank you
---
**Author:**  [@Herteby](https://discourse.elm-lang.org/u/Herteby)\
**Post date:** [November 10, 2021, 9:19am UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/2 "2021-11-10T09:19:56Z")
I don’t think there’s a parser for CSS in Elm yet, but you can just put the CSS string in a style tag in your view function to “run” it: `Html.node "style" [] [Html.text myCssString]`
---
**Author:**  [@brucesp](https://discourse.elm-lang.org/u/brucesp)\
**Post date:** [November 14, 2021, 8:24am UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/3 "2021-11-14T08:24:38Z")
Thank you very much. That helped me a lot.
I have some other difficulties with the project. I wanted to have two modes one for only editing HTML and another for HTML and CSS.
You can see the HTML Mode here:
[https://theghostoftomjoad.github.io/](https://theghostoftomjoad.github.io/)
[https://github.com/TheGhostOfTomJoad/TheGhostOfTomJoad.github.io](https://github.com/TheGhostOfTomJoad/TheGhostOfTomJoad.github.io)
I used codemirror for the editor like in this repo: [https://github.com/tommyengstrom/codemirror-elm](https://github.com/tommyengstrom/codemirror-elm) and ELM-UI.
Codemirror only showed one line if I did not specify a height in CSS. So I wrote a function for adjusting the height:
```auto
heightToCodemirrorcss height=
String.concat[".CodeMirror { height: ", String.fromInt height ,"px ;}"]
```
I tired a few values and found the right ones for my browser and my monitor, so
that that editor and the box for the result have the same height and the user doesn’t need to scroll. On every other element I used _fill_ or _shrink_.
My Problem is that it doesn’t look good in other Browsers or on another Monitor.
Whats the right way to use no hard-coding and make it look good on every device.
---
**Author:**  [@brucesp](https://discourse.elm-lang.org/u/brucesp)\
**Post date:** [November 15, 2021, 5:21pm UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/4 "2021-11-15T17:21:30Z")
I solved it, using this post:
[https://discourse.elm-lang.org/t/using-task-in-init/6119/2](https://discourse.elm-lang.org/t/using-task-in-init/6119/2)
---
**Author:**  [@dillonkearns](https://discourse.elm-lang.org/u/dillonkearns)\
**Post date:** [November 17, 2021, 2:55pm UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/5 "2021-11-17T14:55:33Z")
Have you considered using a Web Component to render the HTML and CSS? That might be a simpler and more robust way to do that that avoids having to manually do HTML or CSS parsing.
---
**Author:**  [@neurodynamic](https://discourse.elm-lang.org/u/neurodynamic)\
**Post date:** [November 17, 2021, 3:57pm UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/6 "2021-11-17T15:57:51Z")
I’ve used [juicy-ace-editor](http://juicy.github.io/juicy-ace-editor/) for this in the past.
---
**Author:**  [@brucesp](https://discourse.elm-lang.org/u/brucesp)\
**Post date:** [November 19, 2021, 5:36am UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/7 "2021-11-19T05:36:18Z")
Do you think of using an iframe and changing the scrdoc attribute?
I will try that out.
I’m already using an webcomponent for the editor.
---
**Author:**  [@brucesp](https://discourse.elm-lang.org/u/brucesp)\
**Post date:** [November 21, 2021, 6:54pm UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/8 "2021-11-21T18:54:34Z")
I tried to simplify it with this solution:
```auto
renderCode : { a | htmleditorValue : String } -> Html msg
renderCode m = iframe [srcdoc m.htmleditorValue, style "border" "none", css [Css.height (Css.vh 90.5),Css.width (Css.pct 100)]] []
```
Unfortunately height 100% does not work. Is there a better and simpler solution for the heigth?
---
**Author:**  [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 1, 2021, 6:54pm UTC](https://discourse.elm-lang.org/t/live-html-and-css-editor/7896/9 "2021-12-01T18:54:43Z")
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.