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/ . Is there a way to also parse CSS code an change the outpu…

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]

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://github.com/TheGhostOfTomJoad/TheGhostOfTomJo…

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.

I’ve used juicy-ace-editor for this in the past.

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.

I tried to simplify it with this solution: 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 si…

Live HTML and CSS Editor

Learn

brucesp November 15, 2021, 5:21pm 4

I solved it, using this post:
https://discourse.elm-lang.org/t/using-task-in-init/6119/2

Topic		Replies	Views
Learn Elm after Haskell Learn	5	1553	August 12, 2021
DOM-modifying JS libraries possible without Native code? Learn	7	1858	March 19, 2018
Examples of using CodeMirror/Ace/Monaco text editors in Elm apps? Learn	5	3089	December 27, 2018
Extensible Markdown parsing in Elm Show and Tell	3	1037	October 10, 2019
An Argument for Elm/Html Show and Tell	26	1755	February 18, 2024

Live HTML and CSS Editor

Related topics