Sorting Algorithms Visualizer - Online Bubble, Quick & Merge
Watch classic sorting algorithms step through a randomized bar chart. Adjust speed and array size. Great for learning algorithm efficiency.
UD5 Toolkit
Interactive visualization of Array, Stack (LIFO), and Queue (FIFO). Perform operations and see real-time updates.
Indexed collection ¡ O(1) access ¡ O(n) insert/delete
Last-In, First-Out ¡ O(1) push/pop ¡ Single access point
First-In, First-Out ¡ O(1) enqueue/dequeue ¡ Two access points
| Feature | Stack | Queue |
|---|---|---|
| Principle | LIFO (Last-In, First-Out) | FIFO (First-In, First-Out) |
| Insertion | Push (at top) | Enqueue (at rear) |
| Removal | Pop (from top) | Dequeue (from front) |
| Access points | One (top only) | Two (front & rear) |
| Analogy | Stack of plates | Waiting line / queue |
| Use cases | Undo/redo, recursion, parsing | Task scheduling, BFS, buffering |
list as stack, collections.deque as queue; Java's Stack class and LinkedList as queue).
collections.deque, Java's ArrayDeque, C++'s std::deque).
Watch classic sorting algorithms step through a randomized bar chart. Adjust speed and array size. Great for learning algorithm efficiency.
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHEDâŚ) and see the animated transitions. Networking education.
Plot different BigâO complexities on a chart. See how O(log n) stays flat while O(2^n) explodes. Educational reference.
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.
Draw walls on a grid and watch A*, Dijkstra, or BFS find the shortest path. Interactive animation. Learn graph traversal.
Build a simple decision tree by adding yes/no nodes. Flowchart style. Export as text outline.
Enter a URL and see a visual map of the tab order. Detect broken tabindex values. Improve keyboard navigation.
Enter text and see each character's 8âbit binary laid out in a blackâandâwhite grid. Beautiful data art. Local.
Paste HTML and see the order in which elements would receive focus via Tab key. Highlight issues. Local accessibility testing.
Highlight elements with ariaâdescribedby and see the linked description text. Verify a11y annotations.
Enter a simple regular expression and see its equivalent Deterministic Finite Automaton diagram. Learn how regex engines work.
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Create simple 2â or 3âset Venn diagrams by entering commaâseparated lists. Shareable via URL fragment. No account.
Paste your JSONâLD or Microdata and test it against Google's Rich Results criteria. Get warnings. Local linter.
Paste your AcceptâLanguage header and see which languages your site should serve based on quality values. Internationalization helper.
Paste plain text and turn it into a nested outline using indent levels or Markdown headings. Great for planning.
Create categorized shopping lists (produce, dairy, meat, etc.). Add items, check them off, and print. Data stored in your browser. Never lose a list.
Drag a slider to compare your original image with a compressed version (e.g., WebP). See the quality difference and file size savings.
Enter a regular expression and see a visual railroad diagram explaining the pattern. Learn and debug regex.
Paste a website's HTML and see which text is only visible to screen readers (e.g., .srâonly). Preview the accessible layer.
Enter a URL and extract tabâindex order violations and focusable elements. Quick accessibility audit. Clientâside fetch.
Animate elements as they enter and exit the viewport using view() timeline. Parallax and reveal effects without JS.
Start from a base color and use `oklch(from color l c h)` to create lighter or darker variants. Copy the code.
Browse, edit, and delete keys stored by the idbâkeyval library in your browser. Handy for debugging PWAs.
Compare width/height with blockâsize/inlineâsize in different writing modes. Understand intrinsic sizing. Copy best practices.
View, edit, and manage JSON objects saved in your browser's localStorage. Delete, export, or import keys. No setup.
Visually name grid areas in a table and generate gridâtemplateâareas CSS. Perfect for complex layouts. Dragâfree.
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.
See how WeakMap and WeakSet work. Add objects as keys and watch references. Understand memoryâefficient collections.
Visualize how caffeine decays in your body over time. Enter intake amount and see remaining caffeine at bedtime to optimize sleep. Uses standard 5-hour half-life.