Get Compiled Code

[alexanderbluhm]

Hi, I am using Sandpack for some React templates and I want to offer my users support to copy the compiled HTML from my React templates.
Is there any hook or property to get access to the code that is passed to <SandpackPreview />?
Expressed as code I want something like this:

<SandpackProvider template="react">
    <button onClick={() => {
        navigator.clipboard.writeText(compiledHTML)
    }}>
        Copy to Clipboard
    </button>
    <SandpackLayout>
        <SandpackCodeEditor />
        <SandpackPreview />
    </SandpackLayout>
</SandpackProvider>

Is there any possibility to achieve this?

[danilowoz]

Hey @alexanderbluhm, I don't think it's possible now. Due to CORS restriction, you won't be able to access the iframe context and copy the content. But I think we can implement an event in the Sandpack client to retrieve the iframe content. What do you think @DeMoorJasper? Can you see any potential problem implementing this?

[DeMoorJasper]

Depends on what is meant with a compiled html as we evaluate in place and don't really create a bundle. In v1 we already kind of have a manifest that gets inlined in a CloudFlare worker as a cache, so we could probably do something similar to get an html file that will work the same with very minimal transform logic.