LiveViewNative

⚠️ 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.7"}]
end

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 
    render_native(assigns)
  end
end

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>
  </div>
</div>

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

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:

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.7"},
    {:live_view_native_swift_ui, "~> 0.0.7"}
  ]
end

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,
  plugins: [
    LiveViewNativeSwiftUi
  ]

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

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

//  ContentView.swift
import SwiftUI
import LiveViewNative

struct ContentView: View {
    var body: some View {
        LiveView(.localhost)
    }
}

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: https://native.live
• Docs: https://hexdocs.pm/live_view_native
• Source: https://github.com/liveviewnative/live_view_native