An educational tool for performing matrix operations with step-by-step explanations for every calculation.
Matrix Solver is a single-file web application that performs the most common linear algebra operations — addition, multiplication, inverse, determinant, and more — while showing a detailed, step-by-step breakdown of the process behind each result.
It was built not just to give you the answer, but to help you understand how and why each operation works. Ideal for students, teachers, or anyone learning linear algebra.
- 11 matrix operations supported
- Step-by-step explanation for every result
- Matrix sizes from 1×1 up to 6×6, configurable per matrix
- English, Turkish, Spanish and Portuguese language support (us / 🇹🇷 / 🇪🇸 / 🇧🇷)
- Works as a PWA — installable on mobile home screen with its own icon
- No dependencies, no build step — pure HTML, CSS, and JavaScript
- Built with Claude AI
| Operation | Description |
|---|---|
A + B |
Matrix addition |
A − B |
Matrix subtraction |
A × B |
Matrix multiplication |
k · A |
Scalar multiplication |
Aᵀ |
Transpose |
det(A) |
Determinant (Laplace cofactor expansion) |
A⁻¹ |
Inverse (Gauss-Jordan method) |
rank(A) |
Rank (Gaussian elimination) |
tr(A) |
Trace |
Ax = b |
Linear system solver |
Aⁿ |
Matrix power |
- Choose an operation from the button grid at the top
- Set the matrix size using the rows and columns controls
- Enter your values in the matrix cells
- Press Calculate
- Read the step-by-step breakdown below the result
For operations that require two matrices (A + B, A − B, A × B), a second matrix input will appear automatically.
Matrix Solver supports being added to your home screen as a Progressive Web App.
On iOS (Safari):
- Open the file in Safari
- Tap the Share button
- Select "Add to Home Screen"
- Confirm — the Matrix Solver icon will appear on your home screen
On Android (Chrome):
- Open the file in Chrome
- Tap the menu (⋮)
- Select "Add to Home Screen"
matrix-solver/
└── index.html # The entire application — HTML, CSS, and JS in one file
All styles are defined with CSS custom properties at the top of the file, making it easy to adjust colors, fonts, and spacing:
body {
--accent: #f0eb9e; /* Main accent color */
--bg: #0a0a0f; /* Background */
--surface: #111118; /* Card/surface color */
}Works in all modern browsers (Chrome, Firefox, Safari, Edge). No polyfills needed.
Concept by Tiago de Souza