Custom HTML Snippet
Overview
The Custom HTML Snippet widget allows developers to inject and render dynamic or static HTML, JavaScript, jQuery, or a combination of these within their Mendix applications. Ideal for embedding custom UI, lightweight animations, integrations, and third-party scripts. Supports both static configuration and dynamic content via entity attributes. jQuery is auto-loaded if not present.
Documentation
Key Features:
-
Supports HTML, JavaScript, jQuery, and Combination code modes
-
Dynamic or static code injection via entity attributes or hardcoded values
-
Auto-loads jQuery (v3.6.0) if missing
-
Executes embedded <script> tags correctly
-
Allows click and change event actions (Microflows/Nanoflows)
Use Cases:
-
Display custom widgets, charts, or integrations
-
Embed HTML/CSS animations
-
Execute lightweight DOM or data manipulation
-
Create proof-of-concept logic rapidly
Compatibility: Mendix Web (Atlas UI), Responsive layouts ,Mendix Version: 8.18+ (recommended 9+)Offline Capable: ✅Theme Compliant: ✅No additional libraries required.
🚀 Key Points :
-
🔥 All-in-One Code EngineUnlike typical HTML widgets, this one supports not just static HTML but also JavaScript, jQuery, and Combination blocks—making it the most versatile widget in its class.
-
🧠 Intelligent jQuery Auto-LoaderAutomatically detects if jQuery is missing and loads it dynamically — ensuring your jQuery-based scripts run smoothly without developer intervention.
-
⚡ Dynamic or Static SupportAccepts both hardcoded (static) and database-driven (dynamic) snippets using a Mendix string attribute—perfect for flexible rendering based on user context or admin config.
-
🔁 Auto-Trigger ActionsSupports onClick and onChange events to fire Microflows/Nanoflows, enabling interactive logic tied to rendered scripts or widgets.
-
🛡️ Safe and Controlled ExecutionScript injection is sandboxed and executed via new Function() — secure for admin/dev-configured use cases with contextual feedback.
-
📐 UI-Friendly and Architect-ApprovedProfessionally styled with CSS and gracefully handles errors with inline rendering—ensuring the UX doesn’t break even when scripts fail.