Embed DS Visualizers

Why Embed Visualizers?

Understanding data structures through text alone can be challenging. A static diagram captures a single snapshot, but it cannot convey the step-by-step transformations that make structures like AVL trees, Red-Black trees, and B-trees so fascinating to study.

That's why we have made our data structure visualizers embeddable. Whether you're writing a computer science course on Notion, publishing a tutorial on Medium, or building a personal study guide, you can instantly add high-quality, interactive animations directly to your content. This turns a passive reading experience into active, hands-on exploration without ever leaving your website.

How to Embed

Each data structure visualizer is available through a dedicated embed page, stripped of site navigation and focused entirely on the interactive visualization. To embed it, place the URL inside an iframe element.

The structure of the URL follows a simple pattern:

https://see-algorithms.com/data-structures/embed/{DataStructure}

Available Data Structures

CircularQueue    - Circular Queue
LinkedList       - Linked List
BinaryHeap       - Binary (Max) Heap
BST              - Binary Search Tree
AVL              - AVL Tree
RedBlackTree     - Red-Black Tree
SplayTree        - Splay Tree
BTree            - B-Tree

Basic Example

<iframe
    src="https://see-algorithms.com/data-structures/embed/BST"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>

The iframe loads the external visualizer in a contained window. Platforms like Notion or Medium allow you to paste the URL directly and they will automatically convert it into an interactive embed.

Embed Custom Trees

If you want to display a specific, custom tree structure rather than starting with an empty state, head to the main data structure page, build your desired tree (by inserting nodes), and click the share icon on the control panel. This will copy a unique URL to your clipboard containing a query parameter (which represents your custom tree structure). Simply use this copied URL as the src attribute in your iframe.

Choosing the Right Size

The width is typically set to 100% so the visualization adapts to the width of your container. The height depends on the data structure you are embedding.

Tree-based structures such as AVL, BST, and Splay Tree benefit from more vertical space, since the tree can grow deep as nodes are inserted. A height between 600 and 700 pixels is recommended for these. Simpler structures like Circular Queue work well at around 300 to 400 pixels.

Final Reflection

Data structure visualizers are especially powerful in educational content where the behavior of an operation is difficult to convey purely in words. Watching an AVL tree self-balance after an insertion, or seeing how a Red-Black tree recolors and rotates to maintain its invariants, creates an intuition that prose alone rarely achieves.

A single iframe is all it takes to turn abstract data structure theory into a tangible, interactive learning experience.