Structura is an interactive web application that helps students and educators visualize data structures and see the corresponding Java, Python, and C++ code generated in real time. Build a structure visually on the canvas — push, enqueue, insert a node — and watch the exact code for that operation appear on the other side.
- Fifteen data structures: Singly Linked List, Doubly Linked List, Singly Circular Linked List, Doubly Circular Linked List, Array Stack, Linked-List Stack, Array Queue, Linked-List Queue, Binary Tree, Binary Search Tree, AVL Tree, Heap / Priority Queue, Hash Table, and Graph — each with its own canvas and toolbar — plus six applied demos: a two-stack Browser History, a doubly-linked-list Play Queue, a FIFO-queue Print Spooler, a singly-linked-list To-Do List, a priority-queue ER Triage board, and a hash-table Phone Book.
- Interactive Canvas: Drag and drop to build structures, right-click to add or edit nodes, and connect pointers by dragging directly from a node's port.
- Live Code Generation: Every operation is mirrored instantly as syntax-highlighted Java, Python, and C++ code, ready to copy.
- State Management:
- Undo/Redo: A full history stack backs every action.
- Save/Load: Export your diagram (and its code log) to a
.stcfile (minified JSON, tagged with the structure type). Loading one reopens Structura on the matching page automatically, whichever page you triggered Load from.
- Smart Tools:
- Auto GC (Garbage Collection): Clean up orphaned/unreachable nodes with one click, and see the generated cleanup code.
- Traversal Playback: Step or auto-play in-order/pre-order/post-order traversals on the Binary Tree, with the visited node highlighted live and matching code generated as it goes.
- BST Search: Search for a value with a true comparison-based BST walk — highlights the path node by node, generates the matching search code, and flags found/not-found on the final node.
- Graph BFS/DFS Playback: Pick a start node and step or auto-play a breadth-first or depth-first traversal over directed edges, with the same live-highlight and code-generation treatment as the Tree.
- Binary Search Tree: A dedicated BST page with rule-enforced, comparison-driven insertion and a standard leaf/one-child/two-child (in-order successor) delete — unlike the free-placement Binary Tree page, in-order traversal on this page always yields sorted output.
- Heap / Priority Queue: An array-backed binary heap (min or max mode, chosen at creation) visualized as a complete binary tree with an array-index badge on every node. Insert sifts up and Extract Root sifts down with a step-by-step comparison trail in the generated code, and repeated extraction always yields values in sorted (ascending for min, descending for max) order.
- AVL Tree: A self-balancing BST that automatically applies single or double rotations after every insert/delete to keep the tree height-balanced, with a live balance-factor badge on every node and the rotation logic itself shown in the generated code.
- Hash Table (separate chaining): A fixed-bucket-count table using a simple sum-of-char-codes hash function, with each bucket rendered as a small linked-list "chain" of colliding entries. Buckets with more than one entry are flagged with a collision badge and warning border, and Search walks the target bucket's chain live, logging each comparison and highlighting the found entry (or flashing not-found).
- Circular Linked List Ring Traversal: Play a full lap around the ring from the head, highlighting each node in turn and generating the matching do-while traversal code.
- Doubly Circular Linked List: Every node carries both
nextandprevback into a closed ring; Insert/Delete Head & Tail keep both link directions consistent (tail deletion is a singleprevhop, no walk), plus forward and backward ring-traversal playback. - SLL ⇄ DLL conversion: One click turns a singly linked list into a doubly linked list (deriving every
prevpointer from the existingnextchain) or back again, switching to the matching page. inputpointer: Alongsidehead/tail/walk, the SLL and DLL pages carry aninputpointer that automatically follows the most recently added node (also settable by hand from a node's context menu).- Infix ↔ Postfix on the Array Stack: Convert an infix expression to postfix, or evaluate a postfix expression, with the current token and running output/result shown live as the array stack fills and drains.
- Browser History (two stacks): A working browser mock-up — type a URL and press Enter to load a dummy page — that demonstrates how Back/Forward is implemented with two stacks. Visiting pushes the current page onto the back stack and clears the forward stack; Back moves the current page onto the forward stack; Forward moves it back. The two stacks are shown live and read-only (you drive them only through the address bar and the Back/Forward buttons), with the matching Java/Python/C++ shown for every navigation.
- Play Queue (doubly linked list): A music-player mock-up whose "Up Next" queue is a doubly linked list of tracks with a
currentpointer. ⏭ / ⏮ just walkcurrentalongnext/prev; + Queue links a node at the tail; Play next splices a node in right aftercurrent(an O(1) relink of two neighbours — the move an array can't match); the ✕ on a row unlinks it and stitches its neighbours together; tapping a row walkscurrentto it. Play/pause runs a fake progress bar that auto-advances at the end of each track. Every operation shows the matching Java/Python/C++. - Print Spooler (FIFO queue): A printer mock-up whose spooler is a queue of print jobs. Submit enqueues a job at the rear; Print next dequeues the front; Auto-print dequeues repeatedly, feeding a sheet animation whose length tracks the job's page count — so a 2-page memo submitted before a 300-page thesis still prints first. Front/rear are labelled on the queue, an out-tray counts finished jobs, and every enqueue/dequeue shows the matching Java/Python/C++.
- To-Do List (singly linked list): A checklist mock-up where each task is a node linking to
next. Add task links a node at the tail — walking the whole chain fromhead(O(n)); ticking a task flips adoneflag on its node; the ✕ unlinks a node by relinking its predecessor'snext; Clear completed sweeps every done node in one pass.headand the terminating∅are drawn, and every operation shows the matching Java/Python/C++. - ER Triage (priority queue): A hospital emergency-department board whose waiting list is a binary min-heap keyed on acuity level (1 = most critical), ties broken by arrival order. Admit sifts a patient up the heap; See next patient extracts the root and sifts the replacement down; Auto-triage drains the board. The heap is drawn as a binary tree with its backing array and a live "serve order" preview underneath — so a level-1 arrival jumps ahead of the level-4 patients already waiting. Every sift shows the comparison trail in Java/Python/C++.
- Phone Book (hash table): A contacts mock-up backed by an 8-bucket hash table with separate chaining and a sum-of-char-codes hash. Add contact hashes the name and appends to that bucket's chain; Look up hashes once then walks only that one chain, highlighting each comparison and flashing the hit (or the miss). Buckets with more than one entry are flagged as collisions, and every operation shows the hash arithmetic and chain walk in Java/Python/C++.
- Zoom & Pan: Mouse-relative zoom and free panning for large structures.
- Batch Operations: Enqueue/push multiple values at once via comma-separated input.
- User Experience:
- Light / Dark Theme.
- Keyboard Shortcuts: Built-in shortcut guide (press
?). - Toast Notifications: Real-time feedback for every action.
- Resizable Split View: Drag the divider to balance canvas vs. code space, or hide the code panel entirely.
You can access the live version at: rendicahya.github.io/structura
- Clone the repository:
git clone https://github.com/rendicahya/structura.git cd structura - Install dependencies:
npm install
- Start development server:
npm run dev
- Build for production:
npm run build
- Pick a structure: Use the tabs at the top to switch between Singly/Doubly/Circular/Doubly Circular Linked List, Play Queue (Doubly LL), To-Do List (Singly LL), Array/Linked-List Stack, Array/Linked-List Queue, Print Spooler (Queue), Browser History (2 Stacks), Binary Tree, Binary Search Tree, AVL Tree, Heap / Priority Queue, ER Triage (Priority Queue), Hash Table, Phone Book (Hash Table), and Graph. Each category menu groups the plain structures first, then an Applied Examples section with the real-world demos.
- Add Nodes: Right-click anywhere on the canvas to add a node at that position, or use the toolbar for structure-specific operations (push, enqueue, insert, ...).
- Connect: Drag from a node's port to another node to link them (drag from the left port for a
prevpointer on a Doubly Linked List). - Edit Data: Double-click any node to change its value (disabled on the Binary Search Tree and AVL Tree pages, where a value's position is derived from comparisons — use Insert/Delete instead).
- Delete / Manage: Right-click a node for its context menu, or use the toolbar's GC button to sweep up unreachable nodes.
- Pan & Zoom: Drag the empty canvas to pan, scroll to zoom.
- Shortcuts: Press
?to open the Keyboard Shortcut Guide.
All planned data structures (Stack, Queue, Tree) have shipped. Ideas being considered next:
- Binary Search Tree traversal playback (in-order/pre-order/post-order), with play/pause/step controls and matching generated code.
- Binary Search Tree search operation.
- Additional languages for code generation (e.g. JavaScript, C#).
- Exporting the canvas as an image (PNG/SVG).
- Graph structure with BFS/DFS traversal playback.
- Circular Linked List, with Insert/Delete Head & Tail and a ring-traversal playback that generates the matching do-while code.
- Doubly Circular Linked List, with Insert/Delete Head & Tail that maintain both link directions and forward/backward ring-traversal playback.
- Infix-to-postfix conversion and postfix evaluation as an Array Stack mode, with playback controls and matching generated code.
- Browser history (Back/Forward) demo built on two stacks, with a live dummy-browser UI and read-only stack views.
- Music "Up Next" play queue demo built on a doubly linked list, with tail-append, O(1) splice-after-current ("Play next"), unlink, and a
currentpointer walked by ⏭ / ⏮. - Print spooler demo built on a FIFO queue, with enqueue-at-rear (Submit), dequeue-at-front (Print next), and an auto-print loop that drains the queue.
- To-do list demo built on a singly linked list, with O(n) tail-append, in-place done-flag toggle, predecessor-tracking unlink, and a one-pass "clear completed" sweep.
- ER triage demo built on a binary-min-heap priority queue, with sift-up on admit, sift-down on extract-root ("See next"), a tree + array + serve-order view, and an auto-triage drain loop.
- Phone book demo built on a separate-chaining hash table, with hash-and-append on add and a single-chain walk on lookup with per-comparison highlighting.
- Binary Search Tree with rule-enforced insert (comparison-driven placement, duplicates rejected) and standard delete (leaf / one-child / two-child in-order-successor).
- Heap Tree with array-backed insert/extract-root (min or max mode), doubling as a Priority Queue enqueue/dequeue.
- AVL Tree with automatic rebalancing (single and double rotations) after insert and delete.
- Hash Table with separate chaining, a sum-of-char-codes hash function, and a chain-walking Search.
Structura's structures were checked against a standard ASD (Algoritma & Struktur Data) course outline covering linear structures, trees, graphs, searching, and hashing. Gaps identified, roughly in priority order:
| Topic | Status |
|---|---|
| Array, singly/doubly/circular linked list | ✅ covered |
| Stack & Queue (array and linked-list backed) | ✅ covered |
| Stack application: postfix/infix expression evaluation | ✅ covered |
| Stack application: browser history (Back/Forward via two stacks) | ✅ covered |
| Linked-list application: media "Up Next" play queue (splice / unlink) | ✅ covered |
| Linked-list application: to-do list (tail-append, unlink, done flag) | ✅ covered |
| Queue application: print spooler (enqueue / dequeue, FIFO) | ✅ covered |
| Priority Queue (basic and heap-backed) | ✅ covered |
| Priority Queue application: ER triage (heap keyed on acuity) | ✅ covered |
| Hash Table application: phone book (chaining, hash-and-walk lookup) | ✅ covered |
| Binary Tree traversal/search (free node placement) | ✅ covered |
| Binary Search Tree insert/delete/traversal/search (rule-enforced ordering) | ✅ covered |
| Complete Binary Tree | ✅ covered |
| Heap Tree (min/max-heap, heapify) | ✅ covered — insert/extract-root only, no bulk build-heapify from an existing array |
| AVL Tree (rotations/rebalancing) | ✅ covered |
| Graph ADT (adjacency list/matrix) + BFS/DFS | |
| Linear search (array/list/queue/linked list) | ❌ not yet |
| Binary search (sorted array) | ❌ not yet |
| Hashing (hash functions, collision handling) | ✅ covered — separate chaining; open addressing not implemented |
Contributions targeting any of the ❌ items are especially welcome.
Contributions make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Developed with ❤️ by Randy Cahya Wihandika