The tools pane in LiveCodes provides access to the console, compiled code viewer, and test runner. This page documents how to configure these tools.
interface ToolsConfig {
enabled: Array<Tool['name']> | 'all';
active: Tool['name'] | '';
status: ToolsPaneStatus;
}
enabled
enabled
Array<'console' | 'compiled' | 'tests'> | 'all'
default:"all"
Sets which tools are enabled in the tools pane.
"all": All tools are enabled (default)- Array: Only specified tools are enabled
{
tools: {
enabled: "all", // Enable all tools
}
}
{
tools: {
enabled: ["console", "compiled"], // Only console and compiled code viewer
}
}
{
tools: {
enabled: ["tests"], // Only tests
}
}
active
active
'console' | 'compiled' | 'tests' | ''
default:""
Sets which tool is initially active (shown) when the tools pane opens.
"": No tool is active by default"console": Console is active"compiled": Compiled code viewer is active"tests": Test runner is active
{
tools: {
enabled: ["console", "compiled", "tests"],
active: "console", // Console tab is shown
}
}
status
status
'closed' | 'open' | 'full' | 'none' | ''
default:""
Sets the initial status of the tools pane.
"": Default state (closed)"closed": Tools pane is closed"open": Tools pane is open"full": Tools pane is in full-screen mode"none": Tools pane is hidden
{
tools: {
enabled: ["console"],
active: "console",
status: "open", // Tools pane is open on load
}
}
interface Tool {
name: 'console' | 'compiled' | 'tests';
title: string;
load: () => Promise<void>;
onActivate: () => void;
onDeactivate: () => void;
getEditor?: () => CodeEditor | undefined;
}
name
'console' | 'compiled' | 'tests'
required
The unique identifier for the tool.
The display title for the tool.
load
() => Promise<void>
required
Function to load the tool.
Callback when the tool becomes active.
Callback when the tool becomes inactive.
getEditor
() => CodeEditor | undefined
Optional method to get the tool’s code editor instance.
interface Console extends Tool {
title: string;
log: (...args: any[]) => void;
info: (...args: any[]) => void;
table: (...args: any[]) => void;
warn: (...args: any[]) => void;
error: (...args: any[]) => void;
clear: (silent?: boolean) => void;
evaluate: (code: string) => void;
reloadEditor: (config: Config) => Promise<void>;
setTheme?: (theme: Theme) => void;
}
Console Methods
Logs messages to the console.
Logs info messages to the console.
clear
(silent?: boolean) => void
Clears the console. If silent is true, doesn’t log “Console cleared” message.
Evaluates code in the result page context.
Compiled Code Viewer
The compiled code viewer shows the compiled output of the code editors.
interface CompiledCodeViewer extends Tool {
title: string;
update: (language: Language, content: string, label?: string) => void;
reloadEditor: (config: Config) => Promise<void>;
}
CompiledCodeViewer Methods
update
(language: Language, content: string, label?: string) => void
Updates the compiled code display.
language: The language of the compiled codecontent: The compiled code contentlabel: Optional label for the code
reloadEditor
(config: Config) => Promise<void>
Reloads the editor with new configuration.
Test Viewer
The test viewer displays test results.
interface TestViewer extends Tool {
title: string;
showResults: (data: { results: TestResult[]; error?: string }) => void;
resetTests: () => void;
clearTests: () => void;
}
TestViewer Methods
showResults
(data: { results: TestResult[]; error?: string }) => void
Displays test results.
results: Array of test resultserror: Optional error message
Resets the test viewer state.
TestResult Interface
interface TestResult {
duration: number;
errors: string[];
status: 'pass' | 'fail' | 'skip';
testPath: string[];
}
Test execution time in milliseconds.
Array of error messages (if any).
Path to the test in the test suite.
Usage Examples
Enable Only Console
import { createPlayground } from "livecodes";
createPlayground("#container", {
config: {
tools: {
enabled: ["console"],
active: "console",
status: "open",
},
},
});
Console and Compiled Code
import { createPlayground } from "livecodes";
createPlayground("#container", {
config: {
tools: {
enabled: ["console", "compiled"],
active: "compiled",
status: "open",
},
script: {
language: "typescript",
content: 'const greeting: string = "Hello";',
},
},
});
Tests Configuration
import { createPlayground } from "livecodes";
createPlayground("#container", {
config: {
tools: {
enabled: ["console", "tests"],
active: "tests",
status: "open",
},
autotest: true, // Auto-run tests on code change
tests: {
language: "javascript",
content: `
test('addition', () => {
expect(1 + 1).toBe(2);
});
`,
},
},
});
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container", {
config: {
tools: {
enabled: ["console", "compiled", "tests"],
active: "",
status: "closed",
},
},
});
// Show console in full screen
await playground.show("console", { full: true });
// Show compiled code
await playground.show("compiled");
// Run tests and show results
const { results } = await playground.runTests();
await playground.show("tests", { full: true });
import { createPlayground } from "livecodes";
createPlayground("#container", {
config: {
tools: {
enabled: "all",
active: "",
status: "none", // Hide tools pane completely
},
},
});
Watch Console Output
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container", {
config: {
tools: {
enabled: ["console"],
active: "console",
status: "open",
},
},
});
const consoleWatcher = playground.watch("console", ({ method, args }) => {
// Mirror console output
console[method](...args);
});
// Later, stop watching
consoleWatcher.remove();
Type Definitions
type ToolsPaneStatus = 'closed' | 'open' | 'full' | 'none' | '';
interface ToolsConfig {
enabled: Array<'console' | 'compiled' | 'tests'> | 'all';
active: 'console' | 'compiled' | 'tests' | '';
status: ToolsPaneStatus;
}