Skip to main content

Solid

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

Installation​

Please refer to the SDK installation section.

Usage​

This is an example of using the LiveCodes TS SDK in a Solid component:

App.tsx
import { onCleanup } from 'solid-js';
import { createPlayground, type Playground, type EmbedOptions } from 'livecodes';

export default function App() {
  let playground: Playground | null = null;

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

  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options).then((sdk) => {
      playground = sdk; // now the SDK is available
    });
  };
  onCleanup(() => playground?.destroy());

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

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

Demo​

show code
import { createPlayground } from 'livecodes';

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

Sponsors