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:

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,
    },
  }
);