mix dala.preview (dala v0.0.7)

Copy Markdown View Source

Preview Dala UI designs in a browser without a simulator/emulator.

Two modes:

  1. Static preview — generates an HTML file and opens it in the browser. No server needed. Good for quick visual checks.

  2. Live designer — starts a Phoenix LiveView server with an interactive drag-and-drop component palette, property editor, live phone-frame preview, and code generation (sigil or DSL style).

Usage

# Static preview of a screen module
mix dala.preview MyApp.HomeScreen

# Static preview with custom output file
mix dala.preview MyApp.HomeScreen --output preview.html

# Don't open in browser (just generate the file)
mix dala.preview MyApp.HomeScreen --no-open

# Hide the component tree in the preview
mix dala.preview MyApp.HomeScreen --no-tree

# Start the live designer
mix dala.preview --live

# Live designer with custom port and module name
mix dala.preview --live --port 4200 --module MyApp.SettingsScreen

Options

  • --live / -l - Start the live designer server (drag-and-drop UI builder)
  • --output / -o - Output file path for static preview (default: dala_preview.html)
  • --no-open - Don't open in browser after generating
  • --no-tree - Don't show the component tree in the preview
  • --title - Custom title for the preview page
  • --port - Port for the live designer (default: 4200)
  • --module - Module name for code generation (default: MyApp.HomeScreen)

Examples

mix dala.preview MyApp.CounterScreen
mix dala.preview MyApp.LoginScreen --output login_preview.html
mix dala.preview MyApp.HomeScreen --title "Home Screen Preview" --no-open
mix dala.preview --live
mix dala.preview --live --port 4000 --module MyApp.SettingsScreen