# `ElementorexCms.Canvas`
[🔗](https://github.com/rocket4ce/elementorex_cms/blob/v0.1.0/lib/elementorex_cms/canvas.ex#L1)

How the editor canvas looks: the stylesheets of your site, the attributes of
`<html>` and `<body>` and an optional frame around the content.

The canvas is an `<iframe>` built from this configuration, so the content is
rendered with your site's CSS and not the admin's, and the tablet and mobile
widths trigger your media queries for real.

    ElementorexCms.Canvas.new(
      stylesheets: ["/assets/css/app.css"],
      html_attrs: %{"data-theme" => "light"},
      body_class: "bg-base-200 p-8",
      # the content goes where the frame has `data-exr-mount`
      frame: ~s(<main class="mx-auto max-w-3xl rounded-box bg-base-100 p-6" data-exr-mount></main>)
    )

## Options

  * `:stylesheets` - URLs of the CSS files (same origin or allowed by your
    Content-Security-Policy)
  * `:head` - extra HTML for `<head>` (fonts...)
  * `:html_attrs` - attributes of `<html>` (`data-theme` for daisyUI)
  * `:body_class` - classes of `<body>`
  * `:frame` - HTML around the content, with an element carrying
    `data-exr-mount` where the document goes (default: just that element).
    It can be a string or anything `Phoenix.HTML.Safe` (a rendered component)
  * `:widths` - canvas width per device, default
    `%{"desktop" => 1280, "tablet" => 768, "mobile" => 390}`

# `t`

```elixir
@type t() :: %ElementorexCms.Canvas{
  body_class: term(),
  frame: term(),
  head: term(),
  html_attrs: term(),
  stylesheets: term(),
  widths: term()
}
```

# `new`

```elixir
@spec new(keyword()) :: t()
```

Builds a canvas configuration (see the module docs).

---

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