Code Prefill

There are many ways to pre-fill code into playgrounds. This is generally achieved either by the SDK or using query params.

Prefill using SDK

When creating an embedded playground, the following embed options allow prefill with code:

config

EmbedOptions.config

loads a configuration object (or a URL to JSON file representing the configuration object)

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello World!</h1>"
    },
    "style": {
      "language": "css",
      "content": "h1 { color: blue; }"
    }
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello World!</h1>"
    },
    "style": {
      "language": "css",
      "content": "h1 { color: blue; }"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello World!</h1>"
    },
    "style": {
      "language": "css",
      "content": "h1 { color: blue; }"
    }
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello World!</h1>"
    },
    "style": {
      "language": "css",
      "content": "h1 { color: blue; }"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello World!</h1>"
    },
    "style": {
      "language": "css",
      "content": "h1 { color: blue; }"
    }
  }
});
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 = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello World!</h1>"
    },
    "style": {
      "language": "css",
      "content": "h1 { color: blue; }"
    }
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

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

import

EmbedOptions.import

allows importing from many sources.

Examples:

Import GitHub directory:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
});
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 = {
  "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

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

Import shared project:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "import": "id/6ys2b8txf33"
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "import": "id/6ys2b8txf33"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "import": "id/6ys2b8txf33"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "import": "id/6ys2b8txf33"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "import": "id/6ys2b8txf33"
});
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 = {
  "import": "id/6ys2b8txf33"
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

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

template

EmbedOptions.template

loads one of the starter templates.

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "react"
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "template": "react"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "react"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "template": "react"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "template": "react"
});
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 = {
  "template": "react"
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

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

Prefill using query params

Query parameters can provide easy and powerful ways for configuring the playground.

Example:

https://livecodes.io/?md=**Hello World!**

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "md": "**Hello World!**"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "md": "**Hello World!**"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "md": "**Hello World!**"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "md": "**Hello World!**"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "params": {
    "md": "**Hello World!**"
  }
});
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": {
    "md": "**Hello World!**"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

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

Auto-Prefill from page DOM

TODO...

Related

• Import
• Templates
• Configuration
• SDK