vitepress-plugin-sandpack

Sandpack components that give you the power of editable sandboxes that run in the browser. Powered by Sandpack, the online bundler used by CodeSandbox.

We can use Sandpack as directive in md file.

It support: static | angular | react | react-ts | vanilla | vanilla-ts | vue | vue3 | vue3-ts | svelte | solid | test-ts | vite-templates.

demo

online demo

Problem: this package is ESM only

When importing a ESM only package by require, the following error happens.

Failed to resolve "foo". This package is ESM only but it was tried to load by require.

"foo" resolved to an ESM file. ESM file cannot be loaded by require.

ESM files cannot be loaded by require.

We recommend converting your config to ESM by either:

• adding "type": "module" to the nearest package.json

• or do follow

  renaming docs/.vitepress/config.js/docs/.vitepress/config.ts to docs/.vitepress/config.mjs/docs/.vitepress/config.mts

Simple usage

code of usage

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

register dependencies

code of usage

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

Usage

basic usage