Ripple

The JS/TS SDK can be used directly in Ripple components without the need for any wrappers.

Installation

Please refer to the SDK installation section.

Usage

This is an example of using the LiveCodes JS SDK in a Ripple component:

App.ripple

import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';

export default component App() {
  const options: EmbedOptions = {
    params: {
      html: '<h1>Hello World!</h1>',
      css: 'h1 {color: blue;}',
      js: 'console.log("Hello, Ripple!")',
      console: 'open',
    },
  };

  let playground: Playground | null = null;
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options).then((sdk) => {
      playground = sdk; // now the SDK is available
    });
    return () => playground?.destroy();
  };

  <div {ref onMount}></div>
}

Run in LiveCodes

Embed options, SDK methods and TypeScript types are available as described in the JS/TS SDK documentations.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "ripple": "import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';\n\nexport default component App() {\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Ripple!\")',\n      console: 'open',\n    },\n  };\n\n  let playground: Playground | null = null;\n  const onMount = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n    return () => playground?.destroy();\n  };\n\n  <div {ref onMount}></div>\n}\n"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "params": {
    "ripple": "import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';\n\nexport default component App() {\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Ripple!\")',\n      console: 'open',\n    },\n  };\n\n  let playground: Playground | null = null;\n  const onMount = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n    return () => playground?.destroy();\n  };\n\n  <div {ref onMount}></div>\n}\n"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "ripple": "import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';\n\nexport default component App() {\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Ripple!\")',\n      console: 'open',\n    },\n  };\n\n  let playground: Playground | null = null;\n  const onMount = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n    return () => playground?.destroy();\n  };\n\n  <div {ref onMount}></div>\n}\n"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "params": {
    "ripple": "import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';\n\nexport default component App() {\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Ripple!\")',\n      console: 'open',\n    },\n  };\n\n  let playground: Playground | null = null;\n  const onMount = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n    return () => playground?.destroy();\n  };\n\n  <div {ref onMount}></div>\n}\n"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "params": {
    "ripple": "import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';\n\nexport default component App() {\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Ripple!\")',\n      console: 'open',\n    },\n  };\n\n  let playground: Playground | null = null;\n  const onMount = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n    return () => playground?.destroy();\n  };\n\n  <div {ref onMount}></div>\n}\n"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Solid

import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "params": {
    "ripple": "import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';\n\nexport default component App() {\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Ripple!\")',\n      console: 'open',\n    },\n  };\n\n  let playground: Playground | null = null;\n  const onMount = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n    return () => playground?.destroy();\n  };\n\n  <div {ref onMount}></div>\n}\n"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

import { createPlayground, type EmbedOptions } from 'livecodes';

export default component App() {
  const options: EmbedOptions = {
    "params": {
      "ripple": "import { createPlayground, type EmbedOptions, type Playground } from 'livecodes';\n\nexport default component App() {\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Ripple!\")',\n      console: 'open',\n    },\n  };\n\n  let playground: Playground | null = null;\n  const onMount = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n    return () => playground?.destroy();\n  };\n\n  <div {ref onMount}></div>\n}\n"
    }
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></div>
}

Related

• SDK Installation
• JS/TS SDK
• React SDK
• Vue SDK
• Using SDK in Svelte
• Embedded Playgrounds