Related Snippets

63 in Visualizers category
10–15 of 60
Binary Heap Priority Queue Visualizer

Binary Heap Priority Queue Visualizer

Dijkstra's Shortest Path Visualizer

Dijkstra's Shortest Path Visualizer

Dark Mode CSS Variable Palette Demo

Dark Mode CSS Variable Palette Demo

Idle Callback Task Scheduler

Idle Callback Task Scheduler

CompressionStream API Demo

CompressionStream API Demo

BroadcastChannel Cross-Tab Sync

BroadcastChannel Cross-Tab Sync

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Binary Heap Priority Queue Visualizer — Free Interactive Min-Heap Demo

Binary Heap Priority Queue Visualizer · Visualizers · Plain HTML, CSS & JS · Live preview

CategoryVisualizers
TagsSVGAccessibility

What's included

Features

Tree and array views
The same heap drawn two ways.
Animated sift-up
Comparisons and swaps on insert.
Animated sift-down
Smaller-child swaps on extract.
Index arithmetic shown
Parent and child formulas on screen.
Swap counting
Compared against the log₂ n bound.
Input validation
Values 1–99, one operation at a time.
Reduced-motion aware
No step delays when requested.
No libraries
Plain SVG and DOM.

About this UI Snippet

Binary Heap Visualizer — A Tree That Lives in an Array

Screenshot of the Binary Heap Priority Queue Visualizer snippet rendered live

A binary heap is the data structure behind priority queues: task schedulers, event simulations, Dijkstra's shortest path, heap sort, and "top K" problems. Its trick is that it looks like a tree but is stored as a flat array, with parent and child positions computed from indexes. This visualizer draws both views side by side so the connection is obvious.

The shape rule and the order rule

A heap is a *complete* binary tree — every level full except possibly the last, which fills from the left — so it packs into an array with no gaps. The index of a node's parent is ⌊(i − 1) / 2⌋, and its children are at 2i + 1 and 2i + 2. In a *min*-heap, every parent is less than or equal to its children, so the smallest value is always at index 0.

Insert: sift up

A new value goes into the next free array slot, which keeps the shape rule. It may break the order rule, so it is compared with its parent and swapped upward until the parent is smaller or it reaches the root. The tree has ⌊log₂ n⌋ levels, so an insert takes at most that many swaps: O(log n).

Extract-min: sift down

The minimum is the root. Removing it would leave a hole, so the last element moves into the root (keeping the shape) and sinks: at each level it swaps with its smaller child until neither child is smaller. Also O(log n).

Why not just sort?

A sorted array gives the minimum in O(1) but inserting costs O(n) because elements must shift. A heap keeps both operations logarithmic, which is exactly what a priority queue needs.

Reading the animation

Amber cells are being compared and darker cells were just swapped, in both the tree and the array, with each step explained below.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet into an AI assistant like Claude and ask it to prove why sift-up needs at most log₂ n swaps. Ask it to add a max-heap toggle, a "build heap from array" button using O(n) heapify, a heap sort mode, or a decrease-key operation as used by Dijkstra. It can also quiz you: show a heap and ask what it will look like after one more insert.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build an animated binary min-heap visualizer in plain HTML, CSS and JavaScript.

Requirements:
- Store the heap in a plain array and draw it both as an SVG tree (positioned by level and index) and as a row of array cells labelled with their indexes.
- Show the parent and child index formulas on the page.
- Insert a value (1–99, or random): append it, then sift up, highlighting each comparison with the parent and each swap with a short pause and a log message.
- Extract the minimum: take the root, move the last element to the root, then sift down by swapping with the smaller child, with the same highlighting and messages.
- Report the number of swaps compared with floor(log2 n), block new operations while one is animating, limit the demo to 31 values, and skip the pauses for users who prefer reduced motion.
- Start with a pre-built heap of about eleven values.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

<div class="bh">
  <div class="bh-top">
    <div>
      <h2>Binary min-heap</h2>
      <p>A tree stored in a plain array. Parent of <code>i</code> is <code>⌊(i−1)/2⌋</code>; children are <code>2i+1</code> and <code>2i+2</code>.</p>
    </div>
    <form class="bh-form" id="bhForm">
      <input type="number" id="bhVal" min="1" max="99" placeholder="1–99" aria-label="Value to insert">
      <button type="submit">Insert</button>
      <button type="button" id="bhRand" class="ghost">Random</button>
      <button type="button" id="bhPop" class="pop">Extract min</button>
    </form>
  </div>
  <svg id="bhTree" viewBox="0 0 800 300" role="img" aria-label="Heap as a tree"></svg>
  <div class="bh-array" id="bhArray" aria-label="Heap as an array"></div>
  <div class="bh-log" id="bhLog" aria-live="polite"></div>
</div>

Step by step

How to Use

  1. 1
    Start from the seeded heapEleven values are already arranged as a valid min-heap.
  2. 2
    InsertType a value 1–99 or press Random, then watch it sift up.
  3. 3
    Extract minThe root is removed and the last value sifts down.
  4. 4
    Compare the viewsMatch each tree node to its array index.
  5. 5
    Read the logEvery comparison and swap is explained.

Real-world uses

Common Use Cases

Data structures courses
A clear demo of heap operations.
Interview preparation
Heaps appear in top-K and scheduling problems.
Understanding Dijkstra
See the queue that makes it fast.
Heap sort
Repeated extract-min produces sorted output.
Self-study
Predict each swap before it happens.
Related: Dijkstra's Shortest Path
Where priority queues are used: Dijkstra's Shortest Path Visualizer.
Related: Huffman Coding Tree
Another heap-driven algorithm: Huffman Coding Tree Visualizer.

Got questions?

Frequently Asked Questions

Nodes are stored level by level from left to right. For a node at index i, its parent is at floor((i − 1) / 2) and its children are at 2i + 1 and 2i + 2. Because the tree is complete, the array has no gaps.

In a min-heap every parent is less than or equal to its children, so the root holds the minimum. In a max-heap every parent is greater than or equal to its children, so the root holds the maximum. Only the comparison changes.

Insert and extract are O(log n) because values move along one root-to-leaf path. Reading the minimum is O(1). Building a heap from n items can be done in O(n) with bottom-up heapify.

Removing the root leaves a hole. Moving the last element into it keeps the tree complete, and sifting it down restores the ordering in O(log n).

No. Only the parent-child relationship is ordered; siblings and cousins can be in any order. That weaker guarantee is what makes inserts and extracts cheap.