Display Modes

The configuration option mode, also available as query param, can be used to select different display modes. The following display modes are supported:

full

This is the default mode with toolbars, editor and result panes.

Example: https://livecodes.io/?template=react

Demo:

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>

editor

Hides the results pane and works as editor only.

Example: https://livecodes.io/?mode=editor&template=react

Demo:

show code

JS

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

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

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

codeblock

A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded.

Example: https://livecodes.io/?mode=codeblock&template=react

Demo:

show code

JS

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

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

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

By default, in codeblock mode, the light-weight CodeJar editor is used (in read-only mode). You can override this by setting the editor option. Refer to Editor Settings for details.

Example: https://livecodes.io/?mode=codeblock&editor=monaco&template=react

Demo:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "mode": "codeblock",
    "editor": "monaco"
  },
  "template": "react"
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "config": {
    "mode": "codeblock",
    "editor": "monaco"
  },
  "template": "react"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "mode": "codeblock",
    "editor": "monaco"
  },
  "template": "react"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "config": {
    "mode": "codeblock",
    "editor": "monaco"
  },
  "template": "react"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

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

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

result

Shows the result page only, with a small overlay (appears on hover) that allows opening the project in the full playground.

Example: https://livecodes.io/?mode=result&template=react

Demo:

show code

JS

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

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

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

The tools pane (e.g. console/compiled code viewer) is hidden by default in result mode. It can be shown if set to open or full. Refer to Tools pane documentation for details.

Example: https://livecodes.io/?mode=result&tools=console|full

Demo:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "mode": "result",
    "tools": "console|full"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "mode": "result",
    "tools": "console|full"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "mode": "result",
    "tools": "console|full"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "mode": "result",
    "tools": "console|full"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "params": {
    "mode": "result",
    "tools": "console|full"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Display Mode vs Default View

info

"Display Mode" is different from "Default View".

In editor display mode, only the editor is loaded and the result page is not available. While editor default view shows the editor by default, and the result page can be shown by dragging the split gutter.

The same applies for result display mode and default view.