Can be used alongside in a template in a Wordpress site using Vanilla JS?

[tomasts248]

Something like calling the scripts and styles,
and then calling a custom HTML tag for each live code instance?
Just like https://github.com/google/playground-elements does but I like Sandpack better so I wonder if it can be used like this.

Edit: found this.. (but I'm still not sure)
https://sandpack.codesandbox.io/docs/advanced-usage/bundlers

[danilowoz]

I think you're looking for https://sandpack.codesandbox.io/docs/advanced-usage/client, but it doesn't provide any layout part, such as a code-editor, file system, or preview. Today, sandpack-react is the only package that implements the user interface where you can mount your custom layout and use Sandpack components.

[tomasts248]

Thank you!!
I'm afraid I need some help getting started here..
This is what I have so far but is not showing up.. most likely due to several missing parts..

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/+esm" crossorigin></script>
<script>
           import {
              SandpackProvider,
              SandpackLayout,
              SandpackCodeEditor,
              SandpackPreview,
            } from "@codesandbox/sandpack-react";
</script>

and in body tag:

<SandpackProvider template="react">
  <SandpackLayout>
    <SandpackPreview />
  </SandpackLayout>
  </SandpackProvider>

[danilowoz]

Hey, I just added this new section to the documentation about how to use Sandpack with CDN: https://sandpack.codesandbox.io/docs/getting-started#cdn

[tomasts248]

Great! :) Thank you so much!!

[tomasts248]

I have one question though : instead of specifying a <div id="root"></div> can I create several instances in a custom HTML tag like <Sandpack></Sandpack> each one with it's own preferences specified inside the tags?