Binary Tree Visualizer

Type a number, press Add, and the value drops into a binary search tree at the one position the ordering rule allows. Run five traversal orders against the same tree and compare the output lists side by side.

Reviewed & Maintained by Wajahat QasimLast updated: August 12, 2026
Tree at a glance
  • 0Nodes
  • 0Leaves
  • 0Height
  • 0Max depth

Whole numbers only. Duplicates are refused.

A hit flashes amber on the canvas for 1.5 seconds.

fastslow
Whole tree
Tree canvas

Run a traversal

One node lights up per step. All five visit every node, and only the order changes.

Output

No traversal run yet.

Sorted input is the worst input

The values you store matter far less than the sequence you store them in.

Feed the numbers in ascending order and every new value loses the comparison at every node, so it walks right, right, right, and lands at the bottom of a single chain. The diagram still calls itself a tree. It behaves like a list. Try it: clear the canvas, then add 10, 20, 30, 40, 50 one after another and watch the drawing lean off to one side.

DegenerateInsert 10, 20, 30, 40, 50
10
\
20
\
30
\
40
\
50

Height 5, leaves 1. Searching for 50 touches all five nodes.

RebuiltAfter pressing Rebalance
 30
/ \
10 40
\ \
20 50

Height 3, leaves 2. The same five values, two fewer levels.

Rebalance reads the tree out in sorted order, takes the middle value as the new root, then repeats on each half. Standard sorted-array-to-BST rebuild, height around log₂(n). It fires once when clicked and then stops caring. Five more ascending inserts and the shape sags again. Self-balancing structures such as AVL and red-black trees rotate on every insert to prevent exactly this, and none of those rotations are modelled here.

Building a demo for a lecture in ten minutes? Insert 10, 20, 30, 40, 50, screenshot the lean, press Rebalance, screenshot again. Two images, one argument, no slides needed.

What this will not do

Read this part before you rely on the tool for coursework.

  • No delete. Removal is the hard operation on a binary search tree, because a node with two children has to be replaced by its inorder successor. Clear wipes everything, and single nodes stay put.
  • Whole numbers only. Input runs through parseInt, so 3.7 is stored as 3 and text is refused with an Enter a number toast. Negatives work fine.
  • Zoom spreads, it does not magnify. The buttons scale horizontal spacing between 0.4x and 2.5x while node circles and row spacing stay fixed. Past roughly six levels, sibling circles crowd and labels get hard to read.
  • Search shows the destination, not the route. A hit flashes amber for 1.5 seconds. The comparison path is never drawn, so search cost stays invisible in a way visit order does not.
  • Nothing is saved. The tree lives in memory on one tab. A refresh empties it. No export, no share link, no image download.

Weighted edges, shortest paths, or cycles? A tree is the wrong model. The graph theory calculator handles those.

One tree, five orders

Add 50, 30, 70, 20, 40, 60, 80 in that sequence for a tree three levels deep with four leaves. Every button in the console visits all seven nodes.

Output for the seven-node tree built from 50, 30, 70, 20, 40, 60, 80
OrderVisit ruleResult
Inorderleft subtree, node, right subtree20 30 40 50 60 70 80
Preordernode, left subtree, right subtree50 30 20 40 70 60 80
Postorderleft subtree, right subtree, node20 40 30 60 80 70 50
Level orderrow by row from the root down50 30 70 20 40 60 80
Reverse levelbottom row first, left to right within each row20 40 60 80 30 70 50

Memorise the inorder row. On a binary search tree it comes back sorted every time, which makes it the fastest check on whether the ordering rule survived every insert. Preorder hands you a serialisation you replay to rebuild the identical shape. Postorder is the order a recursive delete uses, since children are freed before their parent.

A fifteen-node tree at the default 800ms step takes twelve seconds to finish. Drag the step slider down to 100ms before running anything on a random tree.

Height 3 or height 2? Check the convention first

The four tiles in the rail recompute on every insert with recursive walks over the whole tree, not running totals, so a rebalance leaves them correct.

Nodes
Values currently stored. Adding 5 four times leaves the count at 1 and the toast reads Value already in tree.
Leaves
Nodes with neither a left nor a right child. In a tree filled out level by level, leaves sit close to half the node count. Lopsided trees drop toward 1.
Height
Nodes on the longest path from root to leaf, counted inclusively. Empty tree reads 0, a lone root reads 1, a root with one child reads 2.
Max depth
The same number as Height in this build, because both call the same recursive walk. Textbooks often define depth edge-by-edge, one lower. Read the pair as a single figure rather than two independent readings.

Quote a height from this page in an assignment and you are quoting the node-counting convention. Confirm which one your course uses first.

Binary tree questions worth answering

Is this a binary tree or a binary search tree?

A binary search tree. Inserts follow the ordering rule, so smaller values go left and larger values go right. You cannot place an arbitrary value at an arbitrary position, which is what a general binary tree editor would allow.

Why does adding the same number twice do nothing?

The insert routine compares against each node on the way down and returns false on an exact match, so duplicates are dropped and the node count stays put. Production BSTs usually handle repeats with a count field on the node or by sending equal values consistently to one side.

Height reads 3 but my textbook says the height is 2. Which is right?

Both, under different definitions. This tool counts nodes on the longest root-to-leaf path. Many textbooks count edges instead, which is always one less. Check which convention your course uses before quoting a figure from here.

How do I get a sorted list of everything in the tree?

Run the Inorder traversal. On a binary search tree it visits values in ascending order every time, so the output row doubles as a sort check. If it comes back out of order, something is wrong with the tree rather than the traversal.

Does Rebalance keep the tree balanced as I keep adding?

No. It is a one-shot rebuild from the sorted values. Add several increasing numbers afterwards and the height climbs again. Press Rebalance a second time to flatten it back down.

What is reverse level order used for?

It visits the deepest row first and works up to the root, which suits bottom-up work such as computing subtree sums or freeing memory level by level. It is also a common interview follow-up once you have written the standard level order queue.