Mirage — See to Understand

👁

YOU FOUND IT

// the mirage was real all along

⌕ esc

MIRAGE

⌕ Search Ctrl K

Visual Dev Learning

SEE TO UNDERSTAND

Mirage turns abstract dev concepts into visual diagrams, interactive playgrounds, and living references — because some things only click when you see them move.

Explore Tools → ⌕ Search

13

Tools

6

Categories

∞

Growing

SCROLL

All Tools

THE LIBRARY

●CS Fundamentals

Big O Complexity Table

Every data structure and sorting algorithm's time + space complexity with bar charts and plain-english explanations.

arraystreessortinggraphs

Algorithm Visualizer

Watch bubble, selection, insertion, merge sort + binary search run step by step. 3 speed modes.

sortingsearchanimated

●Web

HTTP Request / Response Flow

Every step from typing a URL to seeing a page. DNS → TCP → TLS → server → database → response.

SQL Joins Visual Reference

Every join type with Venn diagrams, real sample data, actual result tables, and when to use each one.

SQLjoinsPostgreSQL

●React

React Component Lifecycle

Mount → update → unmount with every hook explained. useEffect dependency patterns, common mistakes, and the complete hooks quick reference.

hooksuseEffectlifecyclestate

●Dev Tools

Color Palette Generator

Pick a base color → get a full dark/light theme with CSS variables, shade scale, and one-click copy.

CSS varscolorsdesign

Regex Tester + Explainer

Write a pattern → see matches highlighted + breakdown of each symbol in plain English. Preset patterns included.

regexpatternsstrings

Terminal Commands

Every command you use as a dev. Navigation, files, search, processes, git, pipes. Click any to copy.

Keyboard Shortcuts

Linux · Vim · VS Code · Browser DevTools. Tabbed layout, every shortcut you need to go fully mouseless.

vimvscodedevtools

●UI / UX

UI Components Reference

Every component named, shown, and explained. Buttons, inputs, cards, modals, toasts, tables, skeletons.

componentsdesign system

CSS Properties Reference

Every CSS property with all values explained. Layout, flexbox, spacing, typography, animations.

Flexbox Playground

Tweak justify-content, align-items, flex-direction, gap in real time with live preview.

flexboxlayoutlive

●Git

Git Flow — Visual Branching

main, develop, feature, release, hotfix branches as a real SVG diagram with all commands and rules for solo and team projects.

branchingworkflowmergerebase

↑