CodePad Documentation

Guides, reference, and examples for CodePad — a fast, modern web IDE.

Tip: Press Ctrl/Cmd + K to focus search

Introduction

CodePad is a modern, lightweight web-based IDE designed for clarity and performance. Use these docs to get started and learn features.

<!doctype html>
<html>
  <head><meta charset="utf-8"></head>
  <body><h1>Hello from CodePad</h1></body>
</html>

Getting Started

Create an index.html, write your code, and click Run to preview. Workspaces auto-save to localStorage.

<!-- index.html -->
<h1>My Project</h1>

Editor Guide

The editor supports syntax highlighting, multi-cursor (Alt+Click), autocomplete, and more.

// Debounce helper
function debounce(fn, wait=200) {
  let t;
  return (...a) => {
    clearTimeout(t);
    t = setTimeout(()=>fn(...a), wait);
  };
}

AI Tools

Toggle AI for suggestions, snippet generation, and quick explanations directly in the editor.

// Example: enable AI toggle
document.getElementById('aiToggle').click();

Keyboard Shortcuts

Ctrl + S — Save
Ctrl + / — Toggle comment
Alt + Click — Multi-cursor
Ctrl + P — Quick open

API Reference

Preview and workspace helpers used inside CodePad.

// Open preview in new window
const win = window.open();
if(win){
  win.document.open();
  win.document.write(buildPreviewSource());
  win.document.close();
}