Bálint Kléri
--- a/ui/src/features/code-editor/Preview.tsx
+++ b/ui/src/features/code-editor/Preview.tsx
-    .filter((slot) => slot.name) // Filter out slots with no name.
-    .map(
-      (slot) => `${camelCase(slot.name)}: h('Fragment', {
-          dangerouslySetInnerHTML: {
-            __html: '${slot?.example?.replace(/[\r\n]+/g, '')}'
-          }
-        })`,
-    );
+    .filter((slot) => slot.name && slot.example)
+    .map((slot) => {
+      const slotName = camelCase(slot.name);
+      // Each slot example value is turned into a Preact component. The h()
+      // function is Preact's version of React's createElement() function, which
+      // will render the slot's example value.
+      // @see compile()
+      return `${slotName}: h(${slotName} || null)`;