Rendering HTML in Livebook

I have a bunch of Phoenix Components.
May be possible to render them in a Livebook?

That would be absolutely brillant as a living documentation tool a-la Storybook.

3 Likes

Would love to see a proof of concept of this! I think it’s definitely possible using a Smart Cell (Kino.SmartCell — Kino v0.6.1) but it may be possible using even simpler Kino features. The somewhat tricky thing may be injecting your app’s styles into the livebook.

3 Likes

Yeah, rendering was pretty easy with Kino.JS — Kino v0.6.2

For styling, I am loading the CSS directly form the app static url, using importCSS

1 Like

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!

1 Like

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.

1 Like

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?

1 Like

So far, I have this

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.

3 Likes

I setup this on the weekend: phoenix.livemd · GitHub

7 Likes

Brilliant! Thank you! That’s exactly what I needed. Using Kino.JS and adding the iframe via JS is clever!