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.


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: 

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;
<div class="circle">The HTML Widget</div>


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.

Was this article helpful?
3 out of 4 found this helpful



Please sign in to leave a comment.