# `Dala.Preview`
[🔗](https://github.com/manhvu/dala/blob/main/dev_tools/dala/preview.ex#L1)

Interactive HTML preview and design tool for Dala UI components.

Two modes:

1. **Static preview** — generates a standalone HTML file with CSS that
   mimics Dala's styling. No server needed.

2. **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

# `generate_code`

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 do
  use Dala.Spark.Dsl
  ..."

# `open_in_browser`

Open a file in the default browser.

# `preview`

Generate HTML preview for a module or UI tree.

# `preview_and_open`

Generate HTML preview and open in browser.

# `preview_to_file`

Generate HTML preview and save to file.

# `start_designer`

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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*