Interactive Sandpack playgrounds directly from Ghost code blocks

Integrations & API
1

Hi everyone! :waving_hand:

I’m Rizal Ibnu, the creator of Sandpack Embedder, a small open-source library that lets you turn regular code snippets from Ghost’s editor into interactive Sandpack playgrounds — without touching code inside Ghost itself.

I originally built this tool because, as a developer writing technical articles on Ghost, I really wanted a way to show live React examples, editable code blocks, and runnable playgrounds, directly inside posts. Existing embed options were limited, so I decided to create a drop-in script that handles everything automatically.

:white_check_mark: What Sandpack Embedder Does

  • Converts CMS-generated code snippets into live Sandpack playgrounds

  • Supports custom tags like:

    • <sandpack template="react">...</sandpack>

    • <preview>...</preview> (preview-only, no editor)

    • <code-viewer>...</code-viewer> (read-only code viewer)

  • Works with Ghost Koenig’s code blocks

  • No theme customization — just add one script in Settings → Code Injection

:video_game: Live Demo

You can see it in action here:
https://rizalibnu.dev/i-built-sandpack-embedder-turn-code-snippets-into-live-playgrounds-without-touching-your-cms/

:package: Why it fits as a Ghost Integration

Many Ghost authors write about JavaScript, React, Next.js, Vue, or other frontend frameworks.
This tool gives them:

  • Interactive tutorials

  • Live coding examples

  • Better DX for readers

  • No need for external sandboxes or iframe embeds

  • Cleaner editor workflow

:folded_hands: Feedback Welcome

I’d love to hear feedback from the Ghost community.

Thanks for your time, and excited to hear your thoughts! :rocket: