GitHub

Layer types

Add HTML

HTML and CSS make it really easy to create nice auto-spaced layouts and to take advantage of web fonts.

Use composition.addHtml() to add an HTML layer to your composition.

composition.addHTML() signature

addHTML(
  options:HTMLOptions,
  config?:HTMLLayerConfig
): Promise<Html>

Options

PropertyTypeDefaultDescription
pagestringnullA string containing your complete HTML file
urlstringnullA url to an existing HTML file
withTransparentBackgroundstringfalseWhether to render your layer with transparency. This requires having a transparent background in your CSS

HTML layer configuration

The config argument supports the following layer configuration properties:

Info

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.

Html class

Calling composition.addHtml() returns an instance of the Html class, which allows you to read/update its layer options and read/update its layer configuration through getters/setters.

Reading and updating layer options

html.type; // "html"


html.setPage("<!DOCTYPE html><html lang="en"><head>...</html>")
html.page; // "<!DOCTYPE html><html lang="en"><head>...</html>"
html.url; // undefined


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


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

Examples

Minimal

Add HTML via url:

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

Output

Add HTML via page string:

const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title></title>
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,700;1,400&display=swap"
            rel="stylesheet"
    />
    <style>
        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;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="text-box">This is centered</div>
</div>
</body>
</html>
`;


await composition.addHtml({
  page: html,
  withTransparentBackground: true,
});

Output

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

Output

Method Chaining Approach

const html = await composition.addHtml({ url: "https://editframe.com/docs" });


html


  // Position
  .setX(50)
  .setY(50)


  // Size
  .setHeight(980)
  .setWidth(600)


  // Timeline
  .setStart(1)


  // Trim
  .setTrim(0, 4);

Output

Previous
Add filter