import{_ as t,o as e,c as n,j as s,a as i,ae as l}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Live Playground","description":"","frontmatter":{},"headers":[],"relativePath":"examples.md","filePath":"examples.md"}'),h={name:"examples.md"};function p(k,a,r,d,o,E){return e(),n("div",null,[...a[0]||(a[0]=[s("h1",{id:"live-playground",tabindex:"-1"},[i("Live Playground "),s("a",{class:"header-anchor",href:"#live-playground","aria-label":'Permalink to "Live Playground"'},"​")],-1),s("p",null,[i("Experience "),s("strong",null,"SigPro's"),i(" fine-grained reactivity in real-time. Feel free to tweak the signal values in the editor!")],-1),s("iframe",{width:"100%",height:"600",src:"//jsfiddle.net/natxocc/spwran02/4/embedded/",frameborder:"0",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},null,-1),l(` \`\`\`

2. Best Practices for Documentation ​

3. Advanced: The "Fiddle" Component (Optional) ​

If you plan to have 10+ examples, you can create a global Vue component in VitePress. This keeps your Markdown files clean and allows you to change the theme or default height for all fiddles at once.

Create .vitepress/theme/components/Fiddle.vue:

vue
<template>
  <div class="fiddle-wrapper" style="margin: 20px 0;">
    <iframe 
      width="100%" 
      :height="height" 
      :src="\`//jsfiddle.net/natxocc/\${id}/embedded/\${tabs}/dark/\`" 
      frameborder="0"
      loading="lazy">
    </iframe>
  </div>
</template>

<script setup>
defineProps({
  id: String,      // e.g., "spwran02/4"
  height: { default: '400' },
  tabs: { default: 'js,result' }
})
</script>

Usage in Markdown:

markdown
Check out this store example:
<Fiddle id="spwran02/4" height="500" />

Why this is perfect for SigPro: ​

Because SigPro is zero-dependency and runs directly in the browser, your JSFiddle code will be exactly what the user copies into their own index.html. There is no hidden "build step" confusing the learner.

`,14)])])}const y=t(h,[["render",p]]);export{c as __pageData,y as default};