DevTools Hub

Search tools

Search for a developer tool

Data Structures

Trie Visualizer

Insert, search, delete, and autocomplete on a real trie — the structure behind search-box suggestions.

Part of the Data Structures Toolkit
6/10

Pick an operation and a word, then Run.

dertacgtod
None yet
Pass-through node End of a word Current Resolved Not found
Words stored
7
Nodes
11
Steps (this run)
0

What this shows

A real trie (prefix tree) — insert, search, delete, and run the operation a trie exists for: Starts With, which finds every stored word beginning with a given prefix. This is the actual mechanism behind search-box autocomplete and IDE autocompletion: type a prefix, and the trie hands back every completion by walking exactly one path down to the prefix's node, then collecting everything beneath it — no scanning the whole word list required.

Why a trie shares memory between words automatically

Every node represents one character, and words that share a prefix share the same nodes for that prefix — inserting both "car" and "card" only creates new nodes for the letters after they diverge. The blue-highlighted nodes mark end of word: notice that the node for "car" is itself marked as a complete word and has a child leading to "card" — a node being a real stored word and also being a prefix of a longer one are independent facts, not mutually exclusive, which is exactly why that flag exists separately from the tree structure itself.

Why Starts With doesn't need to scan anything

A prefix search over a plain list or a hash set means checking every entry — O(n) in the number of words, regardless of how short the prefix is. A trie walks directly to the prefix's node in O(L) steps, where L is just the prefix's own length, then collects every complete word in that one subtree — never touching any node outside it. That's the entire reason autocomplete systems reach for a trie instead of filtering a list: the cost depends on what you typed, not on how many words exist to search through.

Delete has to clean up after itself

Unmarking a word's end-of-word flag isn't enough on its own — a node with no children and no reason to exist (not the end of any word) is dead weight. Watch a delete run on a word whose nodes aren't shared with anything else and the trie prunes backward from the deleted node toward the root, removing each now-useless node in turn, and stops the instant it reaches a node that's still needed — either because it has another child, or because it's the end of a different word.

FAQ

Why does the root show a dot instead of a letter?

The root represents the empty string — zero characters typed yet — so it has no letter of its own. Every actual word starts at one of the root's direct children.

Can a node be both the end of a word and have children?

Yes, and the seeded trie is built specifically to show it: "car" is both a complete stored word and the prefix leading to "card" and "care". The end-of-word flag and "has children" are completely independent — nothing about being a real word prevents it from also being a prefix of a longer one.

How does this relate to the rest of the site?

See Binary Search Tree Visualizer for a tree where the ordering comes from comparing whole values, and Hash Table Visualizer for a completely different approach to fast lookup that gives up prefix search entirely in exchange for average O(1) exact-match access.

Is anything I enter here sent anywhere?

No — every operation runs entirely in your browser. Nothing here is ever sent to a server.

Related tools