# Generators & Page Builder

## Generators

### mix petal.gen.live

This produces the same files as Phoenix's `mix phx.gen.live` ([docs](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Live.html)). The only difference is that the templates use Tailwind and Petal Components. You can try it out with: 

```
mix petal.gen.live Todos Todo todos label:string is_done:boolean
```

Add the routes from the output. 

{% hint style="info" %}
If you're wondering where to put the routes, you can search in the router file for the text "page\_builder:live:protected", and add them straight after that line.
{% endhint %}

```elixir
def PetalProWeb.Router do
  ...

  scope "/", PetalProWeb do
    pipe_through [
      :browser,
      :require_authenticated_user,
      :kick_user_if_suspended_or_deleted,
      :onboard_new_users
    ]
    
    live_session :require_authenticated_user,
      on_mount: {PetalProWeb.UserOnMountHooks, :require_authenticated_user} do
      ...
      
      # page_builder:live:protected
      live "/todos", TodoLive.Index, :index
      live "/todos/new", TodoLive.Index, :new
      live "/todos/:id/edit", TodoLive.Index, :edit
    
      live "/todos/:id", TodoLive.Show, :show
      live "/todos/:id/show/edit", TodoLive.Show, :edit
    end
  end
  ...
end
```

![After running the generator: the "index" screen](https://730144410-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPJ5uxcAn7dt2M81ZbzT%2Fuploads%2F5wOt9rnVFOycH0jH1ZDi%2Fimage.png?alt=media\&token=85f6cf2b-9ab0-47b9-852d-51a47c787925)

![The "new todo" screen](https://730144410-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPJ5uxcAn7dt2M81ZbzT%2Fuploads%2FK61M1aL1k5odGS1XG5VF%2Fimage.png?alt=media\&token=4b78752d-5157-4c74-8378-72dba28b909c)

![After creating a new todo](https://730144410-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPJ5uxcAn7dt2M81ZbzT%2Fuploads%2FIfhfej7Y5LbQlWXMc46m%2Fimage.png?alt=media\&token=fd7ff830-f356-462c-a7e8-877ae4fb9cb9)

![The "show" page](https://730144410-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPJ5uxcAn7dt2M81ZbzT%2Fuploads%2FTIPtgS8RgRAiJCmbfmoq%2Fimage.png?alt=media\&token=00c251e3-9e2c-47c6-8877-f406a8555c63)

### mix petal.gen.html

Same file output as `phx.gen.html` ([docs](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Html.html)), but uses Petal Components and a layout from Pro.

Example:

```
mix petal.gen.html Todos Todo todos label:string is_done:boolean
```

## Page Builder

#### mix petal.gen.html

The same as [phx.gen.html](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Html.html) but designed for Petal Pro.

### Page Builder

Usually, when you want to create a new page, you would have to create a new template file or live view file. Then you would create a route and point it either to the template's corresponding controller action, or directly to the live view. 

To skip these steps, we made it so if you navigate to a path with no route on it then it will show what we call "The Page Builder" 👏.  The Page Builder is simply a form that helps you construct a page at that route. Submitting the form will result in the route being automatically added to the `router.ex` file and either a template or live view file is created for you.

![Me creating a new page at the route "my-cool-new-page"](https://730144410-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPJ5uxcAn7dt2M81ZbzT%2Fuploads%2FErPbay7fkgKfHpG6IfOo%2Fimage.png?alt=media\&token=e499a1d3-fba2-43d0-b031-659319be9887)