Interactive HTML preview for Dala UI components.

This module generates static HTML with CSS that mimics Dala's styling, allowing you to preview UI trees in a browser without a simulator.

Features

• Renders all major Dala UI components (column, row, text, button, etc.)
• Interactive simulation (tap, drag, swipe handlers shown visually)
• Event logging panel to see interactions
• Component tree inspector (toggleable with Alpine.js)
• No LiveView dependency - pure static HTML

Usage

# In IEx (dev environment)
Dala.Preview.preview(MyApp.HomeScreen)
Dala.Preview.preview_to_file(MyApp.HomeScreen, "preview.html")
Dala.Preview.preview_and_open(MyApp.HomeScreen)

# With a UI tree directly
ui_tree = %{type: :column, props: %{padding: :md}, children: [...]}
Dala.Preview.preview(ui_tree)

Options

• :show_tree - Show component tree inspector (default: true)
• :title - Custom title for the preview page