Sandpack embedded code playground

Code Playground

export default function App() {
return (
<div>
<h1>Hello Sandpack on my site!</h1>
<p>This is the custom starting code.</p>
<p>Now, I can start with custom examples.</p>
</div>
)
}

See the full blog post about using this Sandpack React component in Markdown!

Here's the code for this page:


      ---
      import BaseLayout from '../../layouts/BaseLayout.astro'
      import MySandpack from '../../components/experiments/MySandpack.jsx';

      const codez = `export default function App() {
        return (
          <div>
            <h1>Hello Sandpack on my site!</h1>
            <p>This is the custom starting code.</p>
            <p>Now, I can start with custom examples.</p>
          </div>
        )
      }`
      ---
      <BaseLayout title="Sandpack code playground">
        <main>
          <h1>Sandpack embedded code playground</h1>
          
          <MySandpack 
          client:only="react"
          codez={codez} />

        </main>
      </BaseLayout>