diff --git a/plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts b/plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts
index 52476b36..0f4b01d8 100644
--- a/plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts
+++ b/plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts
@@ -18,6 +18,10 @@ describe('stringifyAttrs', () => {
     expect(stringifyAttrs({ disabled: true, readonly: false, checked: 'true', selected: 'false' })).toBe(' disabled checked')
   })
 
+  it('should handle dymamic attributes', () => {
+    expect(stringifyAttrs({ ':id': 'test' })).toBe(' :id="test"')
+  })
+
   it('should handle null and undefined values', () => {
     expect(stringifyAttrs({ id: null, class: undefined })).toBe('')
     expect(stringifyAttrs({ id: null, class: undefined, foo: 'undefined', bar: 'null' }, true)).toBe(' :id="null" :class="undefined" :foo="undefined" :bar="null"')
diff --git a/plugins/plugin-md-power/src/client/composables/demo.ts b/plugins/plugin-md-power/src/client/composables/demo.ts
index 75d68d0d..1a887c5d 100644
--- a/plugins/plugin-md-power/src/client/composables/demo.ts
+++ b/plugins/plugin-md-power/src/client/composables/demo.ts
@@ -28,9 +28,9 @@ export function useResources(el: ShallowRef<HTMLDivElement | null>, config: Mayb
     if (!conf)
       return []
     return [
-      { name: 'JavaScript', items: conf.jsLib.map(url => ({ name: normalizeName(url), url })) },
-      { name: 'CSS', items: conf.cssLib.map(url => ({ name: normalizeName(url), url })) },
-    ].filter(i => i.items.length)
+      { name: 'JavaScript', items: conf.jsLib?.map(url => ({ name: normalizeName(url), url })) },
+      { name: 'CSS', items: conf.cssLib?.map(url => ({ name: normalizeName(url), url })) },
+    ].filter(i => i.items?.length)
   })
 
   function normalizeName(url: string) {
diff --git a/plugins/plugin-md-power/src/node/demo/markdown.ts b/plugins/plugin-md-power/src/node/demo/markdown.ts
index 1fe1b7a8..117989e3 100644
--- a/plugins/plugin-md-power/src/node/demo/markdown.ts
+++ b/plugins/plugin-md-power/src/node/demo/markdown.ts
@@ -29,7 +29,7 @@ export function markdownEmbed(
     <template #code>
       ${md.render(`\`\`\`md ${codeSetting}\n${code}\n\`\`\``, {})}
     </template>
-  </VPDemoBasic$>`
+  </VPDemoBasic>`
 }
 
 export const markdownContainerRender: DemoContainerRender = {
diff --git a/plugins/plugin-md-power/src/node/demo/normal.ts b/plugins/plugin-md-power/src/node/demo/normal.ts
index 8b07d894..2cc5cc44 100644
--- a/plugins/plugin-md-power/src/node/demo/normal.ts
+++ b/plugins/plugin-md-power/src/node/demo/normal.ts
@@ -126,10 +126,9 @@ export function normalEmbed(
     env.demoFiles.push(demo)
     insertSetupScript({ ...demo, path: output }, env)
   }
-
-  return `<VPDemoNormal${stringifyAttrs({ config: name, title, desc, expanded })}>
+  return `<VPDemoNormal${stringifyAttrs({ ':config': name, title, desc, expanded })}>
     ${codeToHtml(md, source, codeSetting)}
-  </VPDemoNormal$>`
+  </VPDemoNormal>`
 }
 
 export const normalContainerRender: DemoContainerRender = {
@@ -148,8 +147,7 @@ export const normalContainerRender: DemoContainerRender = {
 
     const source = parseContainerCode(codeMap)
     compileCode(source, output)
-
-    return `<VPDemoNormal${stringifyAttrs({ config: name, title, desc, expanded })}>`
+    return `<VPDemoNormal${stringifyAttrs({ ':config': name, title, desc, expanded })}>`
   },
 
   after: () => '</VPDemoNormal>',
diff --git a/plugins/plugin-md-power/src/node/demo/vue.ts b/plugins/plugin-md-power/src/node/demo/vue.ts
index 3a40de3f..1a6964f5 100644
--- a/plugins/plugin-md-power/src/node/demo/vue.ts
+++ b/plugins/plugin-md-power/src/node/demo/vue.ts
@@ -36,7 +36,7 @@ export function vueEmbed(
     <template #code>
       ${md.render(`\`\`\`${ext}${codeSetting}\n${code}\n\`\`\``, {})}
     </template>
-  </VPDemoBasic$>`
+  </VPDemoBasic>`
 }
 
 const target = 'md-power/demo/vue'
diff --git a/plugins/plugin-md-power/src/node/utils/stringifyAttrs.ts b/plugins/plugin-md-power/src/node/utils/stringifyAttrs.ts
index ff608900..884b4969 100644
--- a/plugins/plugin-md-power/src/node/utils/stringifyAttrs.ts
+++ b/plugins/plugin-md-power/src/node/utils/stringifyAttrs.ts
@@ -6,7 +6,7 @@ export function stringifyAttrs<T extends object = object>(
 ): string {
   const result = Object.entries(attrs)
     .map(([key, value]) => {
-      const k = kebabCase(String(key))
+      const k = kebabCase(key)
       if (isUndefined(value) || value === 'undefined')
         return withUndefined ? `:${k}="undefined"` : ''
 
@@ -28,7 +28,8 @@ export function stringifyAttrs<T extends object = object>(
       if (isString(value) && (value[0] === '{' || value[0] === '['))
         return `:${k}="${value.replaceAll('\"', '\'')}"`
 
-      return `${k}="${String(value)}"`
+      const hasDynamic = key[0] === ':'
+      return `${hasDynamic ? ':' : ''}${k}="${String(value)}"`
     })
     .filter(Boolean)
     .join(' ')