HTML

Layer options

Name
page
Type
HtmlPage
Description
An object containing body and an optional styles strings
Name
url
Type
string
Description
URL of a remote webpage
Name
withTailwind
Type
boolean
Description
Whether to include default Tailwind styles for usage in page: { body }
Name
withTransparentBackground
Type
boolean
Description
Whether to render your layer with transparency. This requires having a transparent background in your CSS

Layer configuration

The config argument supports the following layer configuration properties:

Unlike an audio or video file, html has no inherent duration. Therefore, HTML layers default to having the full duration of the overall composition.

If you want to reduce the duration of your HTML Layer, use the Trim layer configuration.

Reading and updating layer options

html.setPage({ body: '<h1>Hello World</h1>', styles: 'h1 { color: red }' })
html.page // { body: "<h1>Hello World</h1>", styles: "h1 { color: red }"}
html.url // undefined

html.setUrl("https://www.editframe.com/docs")
html.url; //"https://www.editframe.com/docs"
html.page // undefined

html.setWithTransparentBackground(true)
html.withTransparentBackground; // true

Examples

Add HTML via `url`

await composition.addHtml({
  url: "https://www.editframe.com/docs",
  withTransparentBackground: false,
});

Add HTML via `page`

const body = `
    <div class="container">
        <div class="text-box">This is centered</div>
    </div>
`
const styles = `
    body {
        color: #000;
        font-family: "Poppins", sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .container {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

    .text-box {
        background-color: #d0d0d0;
        padding: 2rem;
    }
`

await composition.addHtml({
  page: {
    body,
    styles,
  },
  withTransparentBackground: true,
})

With Tailwind

await composition.addHtml({
  page: {
    body: `
        <div class="grid grid-cols-10 gap-2">
          <div class="bg-sky-50 aspect-square"></div>
          <div class="bg-sky-100 aspect-square"></div>
          <div class="bg-sky-200 aspect-square"></div>
          <div class="bg-sky-300 aspect-square"></div>
          <div class="bg-sky-400 aspect-square"></div>
          <div class="bg-sky-500 aspect-square"></div>
          <div class="bg-sky-600 aspect-square"></div>
          <div class="bg-sky-700 aspect-square"></div>
          <div class="bg-sky-800 aspect-square"></div>
          <div class="bg-sky-900 aspect-square"></div>
        </div>
        <div class="grid grid-cols-10 gap-2">
          <div class="bg-blue-50 aspect-square"></div>
          <div class="bg-blue-100 aspect-square"></div>
          <div class="bg-blue-200 aspect-square"></div>
          <div class="bg-blue-300 aspect-square"></div>
          <div class="bg-blue-400 aspect-square"></div>
          <div class="bg-blue-500 aspect-square"></div>
          <div class="bg-blue-600 aspect-square"></div>
          <div class="bg-blue-700 aspect-square"></div>
          <div class="bg-blue-800 aspect-square"></div>
          <div class="bg-blue-900 aspect-square"></div>
        </div>
        <div class="grid grid-cols-10 gap-2">
          <div class="bg-indigo-50 aspect-square"></div>
          <div class="bg-indigo-100 aspect-square"></div>
          <div class="bg-indigo-200 aspect-square"></div>
          <div class="bg-indigo-300 aspect-square"></div>
          <div class="bg-indigo-400 aspect-square"></div>
          <div class="bg-indigo-500 aspect-square"></div>
          <div class="bg-indigo-600 aspect-square"></div>
          <div class="bg-indigo-700 aspect-square"></div>
          <div class="bg-indigo-800 aspect-square"></div>
          <div class="bg-indigo-900 aspect-square"></div>
        </div>
        <div class="grid grid-cols-10 gap-2">
          <div class="bg-violet-50 aspect-square"></div>
          <div class="bg-violet-100 aspect-square"></div>
          <div class="bg-violet-200 aspect-square"></div>
          <div class="bg-violet-300 aspect-square"></div>
          <div class="bg-violet-400 aspect-square"></div>
          <div class="bg-violet-500 aspect-square"></div>
          <div class="bg-violet-600 aspect-square"></div>
          <div class="bg-violet-700 aspect-square"></div>
          <div class="bg-violet-800 aspect-square"></div>
          <div class="bg-violet-900 aspect-square"></div>
        </div>
    `,
  },
  withTailwind: true,
})

Complete layer configuration

await composition.addHtml(
  // options
  { url: 'https://editframe.com/docs' },

  // config
  {
    position: {
      x: 50,
      y: 50,
    },
    size: {
      height: 980,
      width: 600,
    },
    timeline: {
      start: 1,
    },
    trim: {
      start: 0,
      end: 4,
    },
  }
);