Learning & Playground

← Back to All Tools

🧠 Learning & Playground

Interactive coding playground, algorithm visualizer, and developer learning tools. 100% client-side.

▶️ JavaScript Playground

Click “Run” to execute your code…
Usage Guide

What it does

A sandboxed JavaScript execution environment. Write JS code and see console output instantly. Uses a secure iframe sandbox so your code runs safely.

How to use

  • Write or paste JavaScript in the editor
  • Click ▶ Run to execute
  • Output from console.log, console.warn, and console.error appears below
  • Click Reset to restore the sample code

Sample

console.log("Hello, world!");
console.log(Array.from({length:5}, (_,i) => i*i));
console.warn("Watch out!");

Tips

  • Use JSON.stringify(obj, null, 2) to pretty-print objects
  • Errors are caught and displayed in red
  • No DOM access — this is for pure JS logic

🎨 HTML/CSS Live Editor

Usage Guide

What it does

A split-pane HTML and CSS editor with real-time live preview. Changes update automatically as you type (with a short debounce for performance).

How to use

  • Edit HTML in the left-top textarea
  • Edit CSS in the left-bottom textarea
  • The right pane updates automatically

Sample

<div class="box">Styled Box</div>

.box {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  font-size: 24px;
}

Great for

  • Prototyping CSS layouts (flexbox, grid)
  • Testing responsive designs
  • Learning HTML/CSS interactively
  • Quick UI component mockups

🌳 JSON Tree Viewer

Paste JSON above and click “Parse & View”…
Usage Guide

What it does

Parses JSON text and renders it as an interactive, collapsible tree. Each data type is color-coded: strings, numbers, booleans, null.

How to use

  • Paste valid JSON in the textarea
  • Click Parse & View to render the tree
  • Click ▸ toggles to expand/collapse nodes
  • Hover over any value to see its path (e.g. $.stats.reviews[0].user)
  • Click a value to copy its path to clipboard

Features

  • Color-coded data types
  • Expand All / Collapse All buttons
  • Path display on hover
  • Copy path on click

📊 Sorting Algorithm Visualizer

Comparisons: 0  |  Swaps: 0  |  Status: Ready
Usage Guide

What it does

Visualizes sorting algorithms step-by-step using animated bars. Watch how different algorithms compare and swap elements to sort an array.

How to use

  • Select an algorithm from the dropdown
  • Adjust array size (5–100) and animation speed
  • Click ▶ Play to animate, Step to go one step at a time
  • Click 🔄 New Array to generate a new random array

Color Legend

  • ■ Purple — default
  • ■ Yellow — comparing
  • ■ Red — swapping
  • ■ Orange — pivot (Quick Sort)
  • ■ Green — sorted/final position

Algorithm complexities

Bubble Sort    — O(n²) avg/worst
Selection Sort — O(n²) avg/worst
Insertion Sort — O(n²) avg, O(n) best
Quick Sort     — O(n log n) avg, O(n²) worst
Merge Sort     — O(n log n) always

📐 Big-O Complexity Cheatsheet

Data Structure Operations

Data StructureAccessSearchInsertDeleteSpace

Sorting Algorithm Complexities

AlgorithmBestAverageWorstSpaceStable

Graph Algorithm Complexities

AlgorithmTimeSpace
Usage Guide

What it does

An interactive Big-O complexity reference for common data structures, sorting algorithms, and graph algorithms. Color-coded by performance class.

How to use

  • Type in the search box to filter by name
  • Colors indicate performance: green = great, yellow = fair, orange = slow, red = very slow

Color coding

  • O(1) — Constant — Best possible
  • O(log n) — Logarithmic — Very fast
  • O(n) — Linear — Fair
  • O(n log n) — Linearithmic — Typical for efficient sorts
  • O(n²) — Quadratic — Slow for large inputs
  • O(2ⁿ) — Exponential — Avoid if possible