# LiveViewNative

[![Build Status](]( [![](](

> ⚠️ LiveView Native is _prerelease software_ and not recommended for production use.

## Installation

To use LiveView Native, add it to your list of dependencies in `mix.exs`.

def deps do
  [{:live_view_native, "~> 0.0.6"}]

## About

LiveView Native is a platform for building native applications using [Elixir]( and [Phoenix LiveView]( It allows a single LiveView to serve a variety of clients by transforming platform-specific template code into native user interfaces. Here is a basic example:

# hello_live.ex
defmodule MyApp.HelloLive do
  use Phoenix.LiveView
  use LiveViewNative.LiveView

  @impl true
  def render(assigns) do
    # render_native/1 is provided by LiveViewNative.LiveView.
    # It takes care of rendering the correct .heex template
    # for each platform 

This allows us to define a specific template for each platform:

<% # hello_live.html.heex %>
<div id="hello-web">
  <div class="text-slate-800 bg-slate-50 h-screen w-screen grid grid-cols-1 gap-1 content-center items-center text-center">
    <div class="font-semibold mb-1">Hello from the web!</div>

<% # hello_live.ios.heex %>
<VStack id="hello-ios">
  <HStack modifiers={@native |> padding(all: 5)}>
    <Text>Hello from SwiftUI!</Text>

This library provides a base SDK that allows Elixir developers to use LiveView Native within their own Phoenix projects. If you're a platform developer interested in adding native support for LiveView Native to your own client code, check out [live_view_native_platform](

## Usage

The `live_view_native` Hex package isn't useful on its own. You also need to add any platform libraries you want your application to support. The supported platforms and their libraries are:

| Platform   | Clients           | Dependency                                                              |
| :--------- | :--------------------- | :------------------------------------------------------------------------ |
| SwiftUI | iOS, iPadOS, macOS, watchOS, tvOS | [live_view_native_swift_ui](         |
| Jetpack Compose      | Android    |  [live_view_native_jetpack]( |

For example, if you want to support rendering LiveViews in SwiftUI, add its platform library as a dependency in your `mix.exs` file:

def deps do
    {:live_view_native, "~> 0.0.6"},
    {:live_view_native_swift_ui, "~> 0.0.6"}

You can add any number of platform libraries, allowing you to serve a variety of non-web clients from the same application. The list of supported platforms, along with their configuration, is defined within your application's Mix configuration:

# config.exs
import Config

# ...

# Define platform support for LiveView Native
config :live_view_native,
  platforms: [

config :live_view_native, LiveViewNativeSwiftUi.Platform, app_name: "My App"

Finally, each platform has its own implementation details for connecting a native client application to a LiveView Native backend. For example, if you want to support `live_view_native_swift_ui` you'll need to [create an App in Xcode]( and use the `LiveViewNative` Swift dependency to render a clientside [LiveView]( that connects to your Phoenix server:

// MyApp.swift
import SwiftUI

struct MyApp: App {
    var body: some Scene {
        WindowGroup {

//  ContentView.swift
import SwiftUI
import LiveViewNative

struct ContentView: View {
    @StateObject private var session: LiveSessionCoordinator<EmptyRegistry> = {
        var config = LiveSessionConfiguration()

        return LiveSessionCoordinator(URL(string: "")!, config: config)

    var body: some View {
        LiveView(session: session)

For more information on how to configure a LiveView Native project for a specific platform, please visit the documentation page for that platform library.

## Learn more

  * Official website:
  * Docs:
  * Source: