hotwire-native-liveview

Integrate Hotwire Native Bolt navigation with Phoenix LiveView to enable native-style navigation in hybrid web/mobile applications.

Installation

1. First, configure the npm proxy controller in your Phoenix backend. See Configure Npm Proxy Controller.

2. Add the Hotwire Native Bolt script to your Phoenix app's root layout:

<script src="/npm/proxy?package=hotwire-native-bolt&version=0.1.3&file=dist/index.min.js"></script>

3. Install this library in your project:

npm install hotwire-native-liveview

4. Basic Usage

Create and patch your LiveSocket instance for Hotwire compatibility. This code should be placed in your main JavaScript entry file (typically /assets/js/app.js).

import { LiveSocket } from 'phoenix_live_view'
import { Socket } from 'phoenix'
import { patchLiveSocket, initHotwire } from 'hotwire-native-liveview'

// Create the LiveSocket instance
let liveSocket = new LiveSocket('/live', Socket, {
  longPollFallbackMs: 2500,
  params: { _csrf_token: csrfToken },
  hooks: Hooks,
})

// Patch the instance for Hotwire compatibility
patchLiveSocket(liveSocket)

// Expose liveSocket globally for Hotwire
window.liveSocket = liveSocket

// Initialize Hotwire navigation 
initHotwire()

// Connect LiveView
liveSocket.connect()

API Reference

patchLiveSocket(liveSocket)

Patches the provided LiveSocket instance to intercept navigation and history events, enabling Hotwire Native navigation and scroll restoration.

• Parameters:
  • liveSocket: The LiveSocket instance to patch.
• Returns: The patched LiveSocket instance.

initHotwire()

Initializes Hotwire navigation synchronization. Should be called after patching and exposing window.liveSocket.

• Sets up event handlers for navigation and scroll restoration.
• Ensures smooth integration between Hotwire Native and LiveView navigation.

For more details, see the following files:

• Navigation Methods
• Run Example