Read-Only

In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the readonly setting.

Code editing, formatting, and console input are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code can be prefilled, and is compiled and shown in the result page as usual.

By default, a light-weight, minimal code editor is used. This can be changed by explicitly setting the configuration object property editor (e.g. to show hover intellisense).

Demo:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "javascript",
  "config": {
    "readonly": true
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "template": "javascript",
  "config": {
    "readonly": true
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

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

Vue

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

const options = {
  "template": "javascript",
  "config": {
    "readonly": true
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

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

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

Using SDK

set the configuration object property readonly to true.

import { createPlayground } from 'livecodes';

createPlayground('#container', { template: 'javascript', config: { readonly: true } });

Using query params

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

https://livecodes.io?template=javascript&readonly

Related

• Code prefill
• Lite mode