Skip to main content

​
Overview

LiveCodes uses the Monaco Editor (the same editor that powers VS Code) to provide a professional coding experience with intelligent code completion, syntax highlighting, and advanced editing capabilities.

​
Key Features

​
IntelliSense & Auto-Completion

The editor provides intelligent code completion for:
  • JavaScript/TypeScript: Full IntelliSense with type checking
  • HTML: Element and attribute suggestions
  • CSS: Property and value completion
  • NPM Packages: Hover over imports to see package information
When you hover over an NPM package import, LiveCodes automatically displays package information from npm, including description, links to GitHub, Skypack, jsDelivr, and more.

​
Editor Modes

Switch between different editor modes for enhanced productivity:

Vim Mode

Enable Vim keybindings for modal editing

Emacs Mode

Use Emacs keybindings and commands

Standard Mode

Default VS Code-style keybindings

​
Emmet Support

Write HTML and CSS faster with Emmet abbreviations: 
<!-- Type: div.container>h1+p*3 then expand -->
<div class="container">
  <h1></h1>
  <p></p>
  <p></p>
  <p></p>
</div>
Emmet is enabled by default for HTML, PHP, Astro, Markdown, MDX (for HTML) and CSS, SCSS, Less (for CSS). JSX and TSX also support Emmet.

​
Tailwind CSS IntelliSense

Get auto-completion for Tailwind CSS classes in:
  • HTML class attributes
  • CSS @apply directives
  • JSX className props

​
TypeScript Features

1

Automatic Type Definitions

LiveCodes automatically loads TypeScript definitions for NPM packages and provides IntelliSense for imported modules.
2

TwoSlash Comments

Use TwoSlash syntax for inline type information:
const count = 42
//    ^?
3

Compiler Options

Customize TypeScript compiler options per language in the language specifications.

​
Code Formatting

Format your code with keyboard shortcuts:
Press Shift + Alt + F to format the current editor

​
Advanced Editing

Multi-cursor editing: Hold Alt and click to add cursors Find and Replace: Ctrl/Cmd + F for find, Ctrl/Cmd + H for replace Go to Definition: Navigate to definitions across your project files Code Folding: Collapse regions with //#region and //#endregion comments

​
Editor Settings

Customize your editing experience:
  • Font size: Adjust editor font size
  • Font family: Choose from available monospace fonts
  • Tab size: Configure indentation (2 or 4 spaces)
  • Word wrap: Enable/disable line wrapping
  • Line numbers: Show, hide, or use relative line numbers
  • Minimap: Toggle the code minimap
  • Close brackets: Auto-close brackets and quotes
Access editor settings from the app menu or use the keyboard shortcut Alt + Shift + S.

​
Auto-Close Tags

HTML, JSX, and TSX automatically insert closing tags: 
<!-- Type: <div> -->
<div></div>
Self-closing tags like <img>, <br>, <input> are automatically detected and won’t receive closing tags.

​
Platform Optimizations

On Android devices, some auto-completion features are automatically disabled to improve performance and user experience.

Build docs developers (and LLMs) love

Get started for freeTalk to us