LiveView as web components - current state

[ChristophK]

Hi there,

I have the requirement that parts of a new app will need to be included in a native app using web components. My current knowledge is, that LiveView doesn’t play well being integrated as web component like this example.

Did this improve (or am I wrong) in the latest version, or was it never a problem?

[kokolegorille]

@ChristophK

My current knowledge is, that LiveView doesn’t play well being integrated as web component

I think it has good support now…

LiveElements - A library to make custom elements and LiveView so happy together

LiveElements is a library to make working with custom elements from Phoenix LiveView a better experience. In short, we give you a macros to product function components so that calling custom elements is just as easy as calling any other functional component. We support serialization of complex attribute data and automatically listen for custom events. What’s more, if you have or are able to generate a custom elements manifest file, we can consume that and generate the helper functions for you a…

[superchris]

@ChristophK

Hi there,

I have the requirement that parts of a new app will need to be included in a native app using web components. My current knowledge is, that LiveView doesn’t play well being integrated as web component like this example.

To clarify your question a little, do you mean “Can a render a LiveView inside a web component?”. This might be something you would want to do if you are trying to package your app as a web component to be embedded in a customers website, for example. If this is your goal, while you cannot as yet render a LiveView inside a web component, you can get a lot of the same excellent developer experience as LiveView by using a library called LiveState. LiveState uses a lot of the same underlying tech (Phoenix Channels mostly) but leaves the rendering part up to you. I’ve used it to build embedded web applications, and it’s worked well for that scenario.

If you mean, “can I use a web component inside LiveView” that you might want to check out LiveElements, which was already suggested in this thread. It increases the ergonomics a bit for using web components inside of LiveView.

I’m the author of both of these libraries. Feel free to hit me up if you have questions or problems.

[ChristophK]

Hey,
Yes, I need to render parts of my LiveView application in a native mobile app, as web component. So LiveState might be thing I was looking for. I’ll check into it. Thx

Ideally LiveView would work nicely but I guess IFrame is the way to go for now then.

[KP123]

If you need some of your LiveView views in a native mobile app you could use LiveView Native and convert the screens you need. Building hybrid LiveView/native apps is what it’s for!

[ChristophK]

Unfortunately it will be integrated in an existing mobile app, so LiveView Native is not an option.

[KP123]

As long as you control the app that shouldn’t be a problem. There’s a section on adding LiveView native to an existing native app in the docs. Keep all the pages in your app already written in swift, the page or two that needs elixir functionality make out of LiveView

[ChristophK]

I didn’t know that was working as well, pretty neat and thanks for pointing that out!

Unfortunately I am not in control of the app and at the moment its simply a requirement to fulfill in the tender I am looking at.

[KP123]

I understand! I hope you find a good solution to your issue