liveview-native/live_view_native

A framework for building native applications with Phoenix LiveView

LiveViewNative

About

LiveView Native is a platform for building native applications using Elixir and Phoenix LiveView. It allows a single LiveView to serve both web and non-web clients by transforming platform-specific template code into native UIs:

# lib/my_app_web/live/hello_live.ex
defmodule MyAppWeb.HelloLive do
  use MyAppWeb, :live_view
  use MyAppNative, :live_view
end

# liv/my_app_web/live/hello_live_swiftui.ex
defmodule MyAppWeb.HelloLive.SwiftUI do
  use MyAppNative, [:render_component, format: :swiftui]

  def render(assigns, %{"target" => "watchos"}) do
    ~LVN"""
    <VStack>
      <Text>
        Hello WatchOS!
      </Text>
    </VStack>
    """
  end

  def render(assigns, _interface) do
    ~LVN"""
    <VStack>
      <Text>
        Hello SwiftUI!
      </Text>
    </VStack>
    """
  end
end

Getting started

To get started with LiveView Native, you'll need to have an existing Phoenix Application or create a new one.

Add live_view_native to your list of dependencies in the mix.exs file. In addition to live_view_native you may want to include some additional libraries:

{:live_view_native, "~> 0.3.0"},
{:live_view_native_stylesheet, "~> 0.3.0"},
{:live_view_native_swiftui, "~> 0.3.0"},
{:live_view_native_live_form, "~> 0.3.0"}

Then run:

$ mix lvn.setup

and follow the instructions on how to complete the setup process.

Native Clients

LiveView Native enables client frameworks such as:

UI Framework	Devices	LiveView Client
SwiftUI	iPhone, iPad, AppleTV, Apple Watch, MacOS, Apple Vision Pro	LiveView Native SwiftUI
JetPack Compose	Android family	LiveView Native Jetpack
HTML		LiveView Native HTML

Questions?

Have a question or want some help with LiveView Native?

Check out the #liveview-native channel on the Elixir Lang Slack.