Skip to main content
Gets the playground code including source code, source language, and compiled code for each editor (markup, style, script), in addition to the result page HTML. This method is useful for accessing the current state of the code, including what has been compiled, without needing to know the full configuration.

​
Signature

playground.getCode(): Promise<Code>

​
Parameters

None.

​
Returns

​
code
Code
A promise that resolves to a Code object containing:

​
Usage

​
Get All Code

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container", {
  config: {
    markup: {
      language: "markdown",
      content: "# Hello World",
    },
    style: {
      language: "scss",
      content: "$color: blue;\nh1 { color: $color; }",
    },
    script: {
      language: "typescript",
      content: "const x: number = 42;\nconsole.log(x);",
    },
  },
});

const code = await playground.getCode();

console.log(code.markup.language);  // "markdown"
console.log(code.markup.content);   // "# Hello World"
console.log(code.markup.compiled);  // "<h1>Hello World</h1>"

console.log(code.style.language);   // "scss"
console.log(code.style.content);    // "$color: blue;\nh1 { color: $color; }"
console.log(code.style.compiled);   // "h1 { color: blue; }"

console.log(code.script.language);  // "typescript"
console.log(code.script.content);   // "const x: number = 42;\nconsole.log(x);"
console.log(code.script.compiled);  // "const x = 42;\nconsole.log(x);"

console.log(code.result);           // Full HTML of result page

​
Access Specific Editor Code

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container");

const code = await playground.getCode();

// Get just the script editor
const { content, language, compiled } = code.script;

console.log(`Language: ${language}`);
console.log(`Source code:\n${content}`);
console.log(`Compiled code:\n${compiled}`);

​
Get Result Page HTML

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container", {
  config: {
    markup: {
      language: "html",
      content: "<h1>Hello</h1>",
    },
    style: {
      language: "css",
      content: "h1 { color: red; }",
    },
  },
});

const code = await playground.getCode();

// Get the complete result page HTML
const resultHTML = code.result;
console.log(resultHTML);
// Contains full HTML including:
// - DOCTYPE
// - <head> with styles
// - <body> with compiled markup and scripts

​
Export Code to File

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container");

const code = await playground.getCode();

// Export compiled JavaScript
const blob = new Blob([code.script.compiled], {
  type: 'application/javascript',
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'script.js';
a.click();

​
Compare Source and Compiled Code

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container", {
  config: {
    script: {
      language: "typescript",
      content: `
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: 'Alice',
  age: 30,
};

console.log(user);
      `,
    },
  },
});

const code = await playground.getCode();

console.log('Source TypeScript:');
console.log(code.script.content);

console.log('\nCompiled JavaScript:');
console.log(code.script.compiled);
// TypeScript types are removed in compiled version

​
Save Code Snapshot

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container");

// Take a snapshot of current code
const snapshot = await playground.getCode();

// Save to localStorage
localStorage.setItem('codeSnapshot', JSON.stringify({
  timestamp: Date.now(),
  markup: snapshot.markup,
  style: snapshot.style,
  script: snapshot.script,
}));

​
Watch for Code Changes

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container");

// Watch for code changes
playground.watch('code', async ({ code }) => {
  // code parameter is the same as getCode() return value
  console.log('Code changed!');
  console.log('New script content:', code.script.content);
  console.log('Compiled:', code.script.compiled);
});

​
Notes

  • The compiled field contains the processed/transpiled code ready for execution.
  • For languages that don’t require compilation (e.g., plain HTML, CSS, JavaScript), compiled equals content.
  • The result field contains the complete HTML document sent to the result iframe.
  • If the playground is not yet loaded, calling this method will load it first.
  • Code compilation happens automatically; you don’t need to call run() before getCode().

Build docs developers (and LLMs) love

Get started for freeTalk to us