Lite Mode

In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That's why the LiveCodes playground has a lite mode.

In lite mode, a light-weight, minimal code editor is used (CodeJar). Emmet abbreviations and tools pane are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code edits are compiled and shown in the result page as usual.

Demo:

show code

JS

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

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

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

Using SDK

set EmbedOptions.lite to true.

import { createPlayground } from 'livecodes';

createPlayground('#container', { lite: true });

Using query params

add the query parameter lite (no need to set a value).

https://livecodes.io?lite

Related

• Read-only.