Interactive HTML preview and design tool for Dala UI components.
Two modes:
Static preview — generates a standalone HTML file with CSS that mimics Dala's styling. No server needed.
Live designer — starts a Phoenix LiveView server with a drag-and-drop component palette, property editor, live phone-frame preview, and DSL-style code generation.
Static preview
Dala.Preview.preview(MyApp.HomeScreen)
Dala.Preview.preview_to_file(MyApp.HomeScreen, "preview.html")
Dala.Preview.preview_and_open(MyApp.HomeScreen)Live designer
Dala.Preview.start_designer()
Dala.Preview.start_designer(port: 4200, module_name: "MyApp.HomeScreen")Code generation
Dala.Preview.generate_code(ui_tree, "MyApp.HomeScreen")Options (static preview)
:show_tree- Show component tree inspector (default: true):title- Custom title for the preview page
Summary
Functions
Generate Elixir screen module source code from a UI tree.
Open a file in the default browser.
Generate HTML preview for a module or UI tree.
Generate HTML preview and open in browser.
Generate HTML preview and save to file.
Start the live designer server with drag-and-drop UI builder.
Functions
Generate Elixir screen module source code from a UI tree.
module_name is a string like "MyApp.HomeScreen".
Examples
iex> Dala.Preview.generate_code(tree, "MyApp.HomeScreen")
"defmodule MyApp.HomeScreen douse Dala.Spark.Dsl ..."
Open a file in the default browser.
Generate HTML preview for a module or UI tree.
Generate HTML preview and open in browser.
Generate HTML preview and save to file.
Start the live designer server with drag-and-drop UI builder.
Options:
:port- Port to run on (default: 4200):ui_tree- Initial UI tree map:module_name- Default module name (default: "MyApp.HomeScreen"):open- Open browser after start (default: true)