diff --git a/code/renderers/react/template/components/Html.jsx b/code/renderers/react/template/components/Html.jsx
index c7fa14f3e58..974118ca564 100644
--- a/code/renderers/react/template/components/Html.jsx
+++ b/code/renderers/react/template/components/Html.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// eslint-disable-next-line react/no-danger
 export const Html = ({ contents }) => <div dangerouslySetInnerHTML={{ __html: contents }} />;
 
 Html.propTypes = {
diff --git a/code/renderers/svelte/template/components/Html.svelte b/code/renderers/svelte/template/components/Html.svelte
new file mode 100644
index 00000000000..b76ec4de7f1
--- /dev/null
+++ b/code/renderers/svelte/template/components/Html.svelte
@@ -0,0 +1,8 @@
+<script>
+  /**
+   * contents
+   */
+  export let contents = '';
+</script>
+
+<div>{@html contents}></div>
diff --git a/code/renderers/svelte/template/components/index.js b/code/renderers/svelte/template/components/index.js
index d2e5d492126..9f7c09bcf79 100644
--- a/code/renderers/svelte/template/components/index.js
+++ b/code/renderers/svelte/template/components/index.js
@@ -1,5 +1,6 @@
 import globalThis from 'global';
 
 import Button from './Button.svelte';
+import Html from './Html.svelte';
 
-globalThis.Components = { Button };
+globalThis.Components = { Button, Html };