Skip to main content

Svelte SDK

The Svelte SDK is a thin wrapper around the JavaScript SDK to provide an easy to use Svelte component, yet retaining the full power, by having access to the SDK methods.

It requires Svelte 5 and uses runes for reactivity.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "svelte": "<script>\n  import LiveCodes from \"livecodes/svelte\";\n\n  const params = {\n    html: \"<h1>Hello World!</h1>\",\n    css: \"h1 {color: blue;}\",\n    js: 'console.log(\"Hello, World!\")',\n    console: \"open\",\n  };\n</script>\n\n<LiveCodes {params} />\n"
  }
};
createPlayground('#container', options);

Installation​

Please refer to the SDK installation section.

Usage​

The Svelte component is provided as the default export from livecodes/svelte.

Svelte
<script>
  import LiveCodes from 'livecodes/svelte';
</script>

<LiveCodes />
Edit in LiveCodes

TypeScript Support​

Prop types are exported as Props from livecodes/svelte.

Svelte (TypeScript)
<script lang="ts">
  import LiveCodes, { type Props } from 'livecodes/svelte';

  const options: Props = {
    // embed options
  };
</script>

<LiveCodes {...options} />
Edit in LiveCodes

For convenience, the following types are also exported from livecodes/svelte:
Code, Config, EmbedOptions, Language, Playground.

TypeScript types are documented here.

Props​

All embed options are available as props with the corresponding types.

Example:

Svelte
<script>
  import LiveCodes from 'livecodes/svelte';

  const config = {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  };
</script>

<LiveCodes {config} view="result" />
Edit in LiveCodes

In addition, the following props are also available:

  • class

    Type: string.

    Class name(s) to add to playground container element.

    Example:

    Svelte
    <script>
      import LiveCodes from 'livecodes/svelte';
    </script>

    <LiveCodes class="centered" />
    Edit in LiveCodes

  • height

    Type: string.

    Sets the height of playground container element.

    Example:

    Svelte
    <script>
      import LiveCodes from 'livecodes/svelte';
    </script>

    <LiveCodes height="500px" />
    Edit in LiveCodes

  • style

    Type: Record<string, string>.

    Defines styles to add to playground container element. Styles set here override the default styles.

    Example:

    Svelte
    <script>
      import LiveCodes from 'livecodes/svelte';

      const style = {
        margin: 'auto',
        width: '80%',
      };
    </script>

    <LiveCodes {style} />
    Edit in LiveCodes

  • sdkReady

    Type: (sdk: Playground) => void.

    A callback function, that is provided with an instance of the JavaScript SDK representing the current playground. This allows making use of full capability of the SDK by calling SDK methods.

    Example:

    Svelte (TypeScript)
    <script lang="ts">
      import LiveCodes from 'livecodes/svelte';
      import type { Playground } from 'livecodes';

      let playground: Playground | undefined = $state();

      const onReady = (sdk: Playground) => {
        playground = sdk;
      };

      const run = async () => {
        await playground?.run();
      };
    </script>

    <LiveCodes sdkReady={onReady} />
    <button onclick={run}>Run</button>
    Edit in LiveCodes

Reactive Props​

Changing any prop will cause the playground to reload with the new options. However, changing the config prop is an exception — it updates the playground in place using the SDK method setConfig, without triggering a full reload. This allows for a smooth update experience when only the configuration changes.

Example:

Svelte
<script>
  import LiveCodes from 'livecodes/svelte';

  let config = $state({
    markup: {
      language: 'html',
      content: '<h1>Hello World!</h1>',
    },
  });

  function switchToMarkdown() {
    config = {
      markup: {
        language: 'markdown',
        content: '# Hello World! (from Markdown)',
      },
    };
  }
</script>

<LiveCodes {config} />
<button onclick={switchToMarkdown}>Switch to Markdown</button>
Edit in LiveCodes

Storybook​

See storybook for usage examples.

Sponsors