\
**Category:** Questions\
**Tags:** phoenix, livebook, component\
**Created:** [June 29, 2022, 6:59am UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657 "2022-06-29T06:59:43Z")\
**Posts on this page:** 9\
**Page:** 1
**Author:**  [@ca1989](https://forum.elixirforum.com/u/ca1989)\
**Post date:** [June 29, 2022, 6:59am UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/1 "2022-06-29T06:59:43Z")
I have a bunch of [Phoenix Components](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html).
May be possible to render them in a Livebook?
That would be absolutely brillant as a living documentation tool a-la Storybook.
---
**Author:**  [@zachallaun](https://forum.elixirforum.com/u/zachallaun)\
**Post date:** [June 29, 2022, 3:30pm UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/2 "2022-06-29T15:30:01Z")
Would love to see a proof of concept of this! I think it’s definitely possible using a Smart Cell ([Kino.SmartCell — Kino v0.19.0](https://hexdocs.pm/kino/Kino.SmartCell.html#module-usage)) but it may be possible using even simpler Kino features. The somewhat tricky thing may be injecting your app’s styles into the livebook.
---
**Author:**  [@ca1989](https://forum.elixirforum.com/u/ca1989)\
**Post date:** [June 30, 2022, 11:04am UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/3 "2022-06-30T11:04:56Z")
Yeah, rendering was pretty easy with [Kino.JS — Kino v0.19.0](https://hexdocs.pm/kino/Kino.JS.html#module-example)
For styling, I am loading the CSS directly form the app static url, using [importCSS](https://hexdocs.pm/kino/Kino.JS.html#module-functions)
---
**Author:**  [@zachallaun](https://forum.elixirforum.com/u/zachallaun)\
**Post date:** [July 1, 2022, 1:03pm UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/4 "2022-07-01T13:03:00Z")
If you have a minimal proof-of-concept or snippet you could post, that would be great for other people looking to try the same thing!
---
**Author:**  [@ca1989](https://forum.elixirforum.com/u/ca1989)\
**Post date:** [July 4, 2022, 4:23pm UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/5 "2022-07-04T16:23:41Z")
Can’t really share the code because it’s not open, but I could indeed set up a POC in the next few of days.
---
**Author:**  [@tomekowal](https://forum.elixirforum.com/u/tomekowal)\
**Post date:** [April 23, 2023, 12:04pm UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/6 "2023-04-23T12:04:07Z")
I have a similar, but slightly different issue, so I figured I’ll ask here first.
I’d like to use LiveBook as a “playground” to explore some Phoenix concepts.
That means, I’d like to define a template, a controller and an embedded scheme in the livebook.
What is the correct abstraction to use in that case? SmartCells? Is it possible to render a route like in an iframe?
---
**Author:**  [@tomekowal](https://forum.elixirforum.com/u/tomekowal)\
**Post date:** [May 9, 2023, 2:43pm UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/7 "2023-05-09T14:43:44Z")
So far, I have this
[https://github.com/tomekowal/phoenix-playground](https://github.com/tomekowal/phoenix-playground)
It would be nice to render the page in an iframe to not jump between tabs.
I’ll need to look through Kino docs if it supports something like that.
---
**Author:**  [@LostKobrakai](https://forum.elixirforum.com/u/LostKobrakai)\
**Post date:** [May 9, 2023, 2:50pm UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/8 "2023-05-09T14:50:34Z")
I setup this on the weekend: [phoenix.livemd · GitHub](https://gist.github.com/LostKobrakai/af8063d6c92beecdec59ffcea1f655a5)
---
**Author:**  [@tomekowal](https://forum.elixirforum.com/u/tomekowal)\
**Post date:** [May 10, 2023, 12:22pm UTC](https://forum.elixirforum.com/t/rendering-html-in-livebook/48657/9 "2023-05-10T12:22:30Z")
Brilliant! Thank you! That’s exactly what I needed. Using `Kino.JS` and adding the iframe via JS is clever!