Html.png

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.

Property Settings

As seen above, select the "HTML" tab in the Property Panel to update this widget's following property types: Properties.

Properties

Screen_Shot_2020-01-03_at_3.20.10_PM.png

Code - Area for pasting in your HTML code in order for it to be rendered in the Output Window.

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.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.