diff --git a/packages/gui/src/lib/codegen/enhance-sfc.ts b/packages/gui/src/lib/codegen/enhance-sfc.ts
index 28e242ff..95712c59 100644
--- a/packages/gui/src/lib/codegen/enhance-sfc.ts
+++ b/packages/gui/src/lib/codegen/enhance-sfc.ts
@@ -8,6 +8,7 @@ import { format } from './format'
 import { getAttrSyntax } from './util'
 import { CodegenOptions } from './types'
 import { Theme } from '../../types/theme'
+import { html } from './html'
 
 const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => {
   const newProps = toReactProps(props)
@@ -24,12 +25,13 @@ const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => {
 export const enhanceSFC = async (node: HtmlNode, options: CodegenOptions) => {
   const root = editorSchemaToHast(node, { addSlotTagSyntax: true })
   const functionBody = stringifyHastNode(toH(h(options?.theme), root))
+  const htmlTxt = await html(node, options)
 
   const output = `
   export default function Component({ html, state = {} }) {
     ${getAttrSyntax(node)}
     return html\`
-      ${functionBody}
+      ${htmlTxt}
     \`
   }
   `