Skip to main content
JavaScript is natively supported in LiveCodes with full ES2020+ feature support. Code runs directly in the browser with zero compilation overhead.

​
Configuration

Language Name: javascript
File Extensions: .js, .mjs
Editor: Script editor
Compilation: None (native execution)

​
Features

​
Modern JavaScript

Full ES2020+ syntax support: 
// ES Modules
import { format } from 'date-fns';

// Optional chaining
const value = user?.profile?.name;

// Nullish coalescing
const count = items?.length ?? 0;

// BigInt
const bigNumber = 9007199254740991n;

// Dynamic imports
const module = await import('./utils.js');

// Top-level await
const data = await fetch('/api/data').then(r => r.json());

​
Async/Await

Native async/await support: 
async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data;
}

// Top-level await
const users = await fetchUserData(123);
console.log(users);

​
ES Modules

Import from CDNs directly: 
// Import from npm via esm.sh
import React from 'react';
import { render } from 'react-dom';

// Import from specific CDNs
import _ from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

// Import JSON
import data from './data.json' assert { type: 'json' };

​
Class Syntax

Modern class features: 
class Counter {
  // Private fields
  #count = 0;
  
  // Public methods
  increment() {
    this.#count++;
  }
  
  // Getters
  get value() {
    return this.#count;
  }
  
  // Static members
  static create(initial = 0) {
    const counter = new Counter();
    counter.#count = initial;
    return counter;
  }
}

const counter = Counter.create(10);
counter.increment();
console.log(counter.value); // 11

​
Destructuring

Array and object destructuring: 
// Object destructuring
const { name, age, ...rest } = user;

// Array destructuring
const [first, second, ...others] = items;

// Nested destructuring
const { profile: { email } } = user;

// Default values
const { count = 0 } = options;

​
Template Literals

String interpolation and tagged templates: 
// Basic interpolation
const greeting = `Hello, ${name}!`;

// Multi-line strings
const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${description}</p>
  </div>
`;

// Tagged templates
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
  }, '');
}

const message = highlight`Found ${count} results for ${query}`;

​
DOM Manipulation

Direct access to browser APIs: 
// Query selectors
const button = document.querySelector('#submit');
const items = document.querySelectorAll('.item');

// Event listeners
button.addEventListener('click', (e) => {
  console.log('Button clicked!');
});

// Creating elements
const div = document.createElement('div');
div.textContent = 'Hello World';
div.classList.add('container');
document.body.appendChild(div);

// Fetch API
const response = await fetch('/api/data');
const data = await response.json();

​
External Libraries

Import any npm package: 
import confetti from 'canvas-confetti';
import { Chart } from 'chart.js';
import dayjs from 'dayjs';
import axios from 'axios';

// Use the libraries
confetti({
  particleCount: 100,
  spread: 70,
});

const date = dayjs().format('YYYY-MM-DD');
console.log(date);

​
Code Formatting

Automatic code formatting with Prettier: 
// Before formatting
const obj={a:1,b:2,c:3};
function test(x,y){return x+y;}

// After formatting (Ctrl+Shift+F)
const obj = { a: 1, b: 2, c: 3 };
function test(x, y) {
  return x + y;
}

​
Editor Support

​
Monaco Editor

  • Full IntelliSense support
  • JSDoc type hints
  • Automatic imports
  • Refactoring tools

​
CodeMirror

  • Syntax highlighting via @codemirror/lang-javascript
  • Code folding
  • Bracket matching
  • Auto-completion

​
Configuration Options

No custom configuration needed for JavaScript. Code runs as-is with native browser support.

​
Example Projects

​
Simple Counter

let count = 0;

const button = document.createElement('button');
button.textContent = 'Click me';

const display = document.createElement('div');
display.textContent = `Count: ${count}`;

button.addEventListener('click', () => {
  count++;
  display.textContent = `Count: ${count}`;
});

document.body.append(display, button);

​
Fetch Data

async function displayUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await response.json();
  
  const list = document.createElement('ul');
  users.forEach(user => {
    const item = document.createElement('li');
    item.textContent = `${user.name} (${user.email})`;
    list.appendChild(item);
  });
  
  document.body.appendChild(list);
}

displayUsers();

​
Animation Loop

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.fillStyle = '#3b82f6';
  ctx.fillRect(x, 180, 40, 40);
  
  x = (x + 2) % canvas.width;
  requestAnimationFrame(animate);
}

animate();

​
Best Practices

Prefer ES module imports over global scripts:
// Good
import { map } from 'lodash-es';

// Avoid
// <script src="https://cdn.../lodash.js"></script>
Use async/await for cleaner asynchronous code:
// Good
const data = await fetch(url).then(r => r.json());

// Avoid
fetch(url).then(r => r.json()).then(data => {
  // nested callbacks
});
Use const for variables that don’t change:
const element = document.querySelector('#app');
const config = { theme: 'dark' };
let count = 0; // Only use let when reassigning

​
Limitations

No Node.js APIs: Browser-only environment. No access to fs, path, process, etc.
For TypeScript support with type checking, use the TypeScript language.

TypeScript

Add static typing to JavaScript

React

Build UIs with React and JSX

Babel

Use experimental JavaScript features

JSX

Write JSX without React

Build docs developers (and LLMs) love

Get started for freeTalk to us