Skip to main content

📦 theme-codesandbox-button

A Docusaurus theme component that displays a button to create/open a CodeSandbox project.

Configuration​

Install the theme

npm install @rise4fun/docusaurus-theme-codesandbox-button

Add the theme to your theme list.

const config = {
    themeConfig: {
        ...
        codeSandbox: {
            templates: {
                node18: {
                    files: {
                        "package.json": {
                            content: {
                                dependencies: {},
                            },
                        },
                        "sandbox.config.json": {
                            content: {
                                template: "node",
                                container: {
                                    node: "18",
                                },
                            },
                        },
                    },
                },
            },
            defaultTemplate: "node18"
        }
    }
    plugins: [
        "@rise4fun/docusaurus-theme-codesandbox-button"
    ]
}

Usage​

In a MDX page, first add the import on top of the page.

import CodeSandboxButton from '@theme/CodeSandboxButton';

Then insert the button in the page. The files argument is documented in the CodeSandbox define API docs.

<CodeSandboxButton
  startFile="main.ts"
  template="node18"
  files={{
    'main.ts': {
      content: "console.log('hello')",
    },
  }}
/>

Here is the button in action.

http://localhost:3000