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
| Property | Type | Default | Description |
|---|---|---|---|
page | string | null | A string containing your complete HTML file |
url | string | null | A url to an existing HTML file |
withTransparentBackground | string | false | Whether 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);