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 embeded 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';

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

<div bind:this="{container}"></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';

const options = {
  "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></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';

const options = {
  "import": "id/6ys2b8txf33"
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></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';

const options = {
  "template": "react"
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></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';

const options = {
  "params": {
    "md": "**Hello World!**"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Auto-Prefill from page DOM

TODO...

Related

• Import
• Templates
• Configuration
• SDK