HTML Enhancements

Svelvet 4.0 supports full HTML rendering within nodes. Any HTML element supported within the browser will now render inside a node. Whether you want to render video, audio, lists, iframes, forms, scripts, objects, buttons.... The list goes on & on. The only limit to this feature is your imagination! The Svelvet diagram below features four nodes with html elements.

The node featuring dolphins contains a video tag, and the node labeled: Message Box contains a simple form input. The node featuring "ragtime-southernmelody" contains an embedded audio player from Audio Mack. Last but not least, the node in the lower right hand listing common beverages contains a simple unordered list.

To render HTML elements inside your node, include the following inside your Svelvet component declaration.

We will be using the data prop with a key of html. The value for the html key will be your raw HTML elements surrounded by backticks (``). The declaration for the node featuring dolphins has been included below to serve as an example.

{
id: 1,
position: { x: 110, y: 50 },
data: { html: `<video width="480" height="360" src="https://i.imgur.com/zdT6tSz.mp4" autoplay loop></video>`},
width: 490,
height: 370,
bgColor: "white",
},
Let your imagination run wild with this feature!