The HTML Widget allows you to render custom HTML in the Output Window.
To learn how to add a Widget to your Composition, click here.
Remember, any underlined widget properties can be connected to a Control Node or a Data Node.
Properties
As seen above, select the "HTML" tab in the Property Panel to update this widget's following property types:
Code - Area for pasting in your HTML code in order for it to be rendered in the Output Window. Make sure to use the open <html> and closed </html> tag.
Here is example HTML you can copy and paste into the widget:
<html>
<head>
<style>
head, body {
width: 100%;
height: 100%;
}
.circle {
height: 100%;
width: 100%;
border-radius: 60%;
background: green;
color: white;
font-size: 6rem;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="circle">The HTML Widget</div>
</body>
</html>
Important
Inserting a lot of code this way will affect the performance of the renderer. If you want to create custom render components we highly recommend building a widget, more information can be found on our Developer Site, here.
Comments
0 comments