@c8y/style/markdown-files/html-widget-preview.md

Styles for Cumulocity IoT applications

 

### New HTML widget

 

We're excited to introduce the next generation HTML Widget for the Cumulocity Platform, designed to enhance your development experience and offer improved security features. This new widget will replace the current HTML widget while ensuring backward compatibility.

<div class="p-16 m-auto col-lg-max">
<img src="./c8y-style-assets/html-widget-preview.png" alt="HTML Widget" class="border-all fit-w">
</div>

&nbsp;

### Key features

&nbsp;

#### Enhanced usability

✅ **Live preview**: Instantly see your changes as you code without having to save and reload.

✅ **VSCode editor integration**: Enjoy a familiar, professional coding environment with syntax highlighting, code completion, and error detection.\
✅ **Preview mode**: Easily see your changes in the new preview view.

&nbsp;

#### Modern development experience

✅ **JavaScript template literals support**: Write more expressive HTML with embedded expressions and multi-line strings.\
✅ **Streamlined development workflow**: Faster iteration cycles with immediate visual feedback.

&nbsp;

#### Advanced developer capabilities

✅ **Web component development**: Build complex, reusable UI components with proper encapsulation.\
✅ **Extended API access**: Deeper integration with Cumulocity platform services.

&nbsp;

#### Enhanced security

✅ **Isolated web components**: Components run in their own scope, preventing conflicts and improving stability.\
✅ **Global sanitization settings**: Configurable security controls to prevent XSS attacks.

&nbsp;

#### Legacy support

✅ **Backward compatibility**: Full support for existing HTML widgets through legacy mode.\
✅ **Seamless migration path**: Easily convert existing widgets to the new format when you're ready.

&nbsp;

&nbsp;

The new HTML Widget is currently available in preview mode. We encourage you to test your existing widgets and explore creating new ones with the advanced features.