View Source LiveView Native Guides

LiveView Native Guides is an interactive tutorial for LiveView Native using Livebook.

For the best experience, we recommend running these guides in Livebook so that you can see how the examples affect a native application.

See our Getting Started guide to begin your LiveView Native learning journey!

How These Guides Work

The LiveBook notebooks in this project run alongside a Phoenix server and native SwiftUI application.

Examples run from the Livebook application update the Phoenix server. The Phoenix server then automatically pushes these changes to the SwiftUI application.

You can change and manipulate examples and complete exercises all within Livebook without modifying the underlying Phoenix App or SwiftUI app.

flowchart LR
L[LiveBook]
P[PhoenixServer]
S[SwiftUI App]

L --> P --> S

Below, we'll go over an overview of the implementation of this project and how it all works. However, you do not need to know these details to begin the Getting Started guide and start learning LiveView Native.

KinoLiveView

Notebooks have examples using a KinoLiveView SmartCell, which dynamically inject LiveViews into a Phoenix application.

Upon evaluating a smart cell, the Phoenix application's router file automatically updates to include the new LiveView and associated route. Here's the code you'll find in router.ex that dynamically includes these LiveViews.

# router.ex
scope "/" do
    pipe_through :browser

    KinoLiveView.get_routes()
    |> Enum.map(fn %{path: path, module: module, action: action} ->
        live(path, module, action)
    end)
end

Here's an example HelloWorld LiveView in a KinoNative.SmartCell you could find in one of our notebooks.

Hello World LiveView Example

The native and web applications will automatically reload as if you had defined a new LiveView in the Phoenix application.

IOS

Web