This guide will show you how to run an interactive 8 Queens visualizer and all 92 unique solutions locally on your computer, step by step.
Open up any text editor already on your PC. Examples:
-
For Windows: Notepad
-
For Mac: TextEdit (switch to “Plain Text” mode from Format > Make Plain Text)
-
For Linux: vim, nano, etc.
If you're a Linux user like me and prefer using the coommand lines interface instead, open up your terminal and the create a new file with the
touch <file name>.htmlcommand.
Copy the following code and paste it into your text editor.
Click to expand code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>8 Queens Visualizer</title>
<style>
body {
font-family: sans-serif;
text-align: center;
background: #f4f4f4;
padding: 2rem;
}
#board {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 0;
margin: 1rem auto;
border: 2px solid #333;
width: 400px;
}
.cell {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.light {
background-color: #f0d9b5;
}
.dark {
background-color: #b58863;
}
#controls {
margin-top: 1rem;
}
button {
padding: 0.5rem 1rem;
font-size: 16px;
margin: 0 0.5rem;
}
</style>
</head>
<body>
<h1>8 Queens Visualizer</h1>
<div id="board"></div>
<div id="controls">
<button onclick="prevSolution()">Previous</button>
<span id="solution-counter">1 / 92</span>
<button onclick="nextSolution()">Next</button>
</div>
<script>
const solutions = [
[0, 4, 7, 5, 2, 6, 1, 3],
[0, 5, 7, 2, 6, 3, 1, 4],
[0, 6, 3, 5, 7, 1, 4, 2],
[0, 6, 4, 7, 1, 3, 5, 2],
[1, 3, 5, 7, 2, 0, 6, 4],
[1, 4, 6, 0, 2, 7, 5, 3],
[1, 4, 6, 3, 0, 7, 5, 2],
[1, 5, 0, 6, 3, 7, 2, 4],
[1, 5, 7, 2, 0, 3, 6, 4],
[1, 6, 2, 5, 7, 4, 0, 3],
[1, 6, 4, 7, 0, 3, 5, 2],
[1, 7, 5, 0, 2, 4, 6, 3],
[2, 0, 6, 4, 7, 1, 3, 5],
[2, 4, 1, 7, 0, 6, 3, 5],
[2, 4, 1, 7, 5, 3, 6, 0],
[2, 4, 6, 0, 3, 1, 7, 5],
[2, 4, 7, 3, 0, 6, 1, 5],
[2, 5, 1, 4, 7, 0, 6, 3],
[2, 5, 1, 6, 0, 3, 7, 4],
[2, 5, 1, 6, 4, 0, 7, 3],
[2, 5, 3, 0, 7, 4, 6, 1],
[2, 5, 3, 1, 7, 4, 6, 0],
[2, 5, 7, 0, 3, 6, 4, 1],
[2, 5, 7, 0, 4, 6, 1, 3],
[2, 5, 7, 1, 3, 0, 6, 4],
[2, 6, 1, 7, 4, 0, 3, 5],
[2, 6, 1, 7, 5, 3, 0, 4],
[2, 7, 3, 6, 0, 5, 1, 4],
[3, 0, 4, 7, 1, 6, 2, 5],
[3, 0, 4, 7, 5, 2, 6, 1],
[3, 1, 4, 7, 5, 0, 2, 6],
[3, 1, 6, 2, 5, 7, 0, 4],
[3, 1, 6, 2, 5, 7, 4, 0],
[3, 1, 6, 4, 0, 7, 5, 2],
[3, 1, 7, 4, 6, 0, 2, 5],
[3, 1, 7, 5, 0, 2, 4, 6],
[3, 5, 0, 4, 1, 7, 2, 6],
[3, 5, 7, 1, 6, 0, 2, 4],
[3, 5, 7, 2, 0, 6, 4, 1],
[3, 6, 0, 7, 4, 1, 5, 2],
[3, 6, 2, 7, 1, 4, 0, 5],
[3, 6, 4, 1, 5, 0, 2, 7],
[3, 6, 4, 2, 0, 5, 7, 1],
[3, 7, 0, 2, 5, 1, 6, 4],
[3, 7, 0, 4, 6, 1, 5, 2],
[3, 7, 4, 2, 0, 6, 1, 5],
[4, 0, 3, 5, 7, 1, 6, 2],
[4, 0, 7, 3, 1, 6, 2, 5],
[4, 0, 7, 5, 2, 6, 1, 3],
[4, 1, 3, 5, 7, 2, 0, 6],
[4, 1, 3, 6, 0, 2, 7, 5],
[4, 1, 5, 0, 6, 3, 7, 2],
[4, 1, 7, 0, 3, 6, 2, 5],
[4, 2, 0, 5, 7, 1, 3, 6],
[4, 2, 0, 6, 1, 7, 5, 3],
[4, 2, 7, 3, 6, 0, 5, 1],
[4, 6, 0, 2, 7, 5, 3, 1],
[4, 6, 0, 3, 1, 7, 5, 2],
[4, 6, 1, 3, 7, 0, 2, 5],
[4, 6, 1, 5, 2, 0, 3, 7],
[4, 6, 1, 5, 2, 0, 7, 3],
[4, 6, 3, 0, 2, 7, 5, 1],
[4, 7, 3, 0, 2, 5, 1, 6],
[4, 7, 3, 0, 6, 1, 5, 2],
[5, 0, 4, 1, 7, 2, 6, 3],
[5, 1, 6, 0, 2, 4, 7, 3],
[5, 1, 6, 0, 3, 7, 4, 2],
[5, 2, 0, 6, 4, 7, 1, 3],
[5, 2, 0, 7, 3, 1, 6, 4],
[5, 2, 0, 7, 4, 1, 3, 6],
[5, 2, 4, 6, 0, 3, 1, 7],
[5, 2, 4, 7, 0, 3, 1, 6],
[5, 2, 6, 1, 3, 7, 0, 4],
[5, 2, 6, 1, 7, 4, 0, 3],
[5, 2, 6, 3, 0, 7, 1, 4],
[5, 3, 0, 4, 7, 1, 6, 2],
[5, 3, 1, 7, 4, 6, 0, 2],
[5, 3, 6, 0, 2, 4, 7, 1],
[5, 3, 6, 0, 7, 1, 4, 2],
[5, 7, 1, 3, 0, 6, 4, 2],
[6, 0, 2, 7, 5, 3, 1, 4],
[6, 1, 3, 0, 7, 4, 2, 5],
[6, 1, 5, 2, 0, 3, 7, 4],
[6, 2, 0, 5, 7, 4, 1, 3],
[6, 2, 7, 1, 4, 0, 5, 3],
[6, 3, 1, 4, 7, 0, 2, 5],
[6, 3, 1, 7, 5, 0, 2, 4],
[6, 4, 2, 0, 5, 7, 1, 3],
[7, 1, 3, 0, 6, 4, 2, 5],
[7, 1, 4, 2, 0, 6, 3, 5],
[7, 2, 0, 5, 1, 4, 6, 3],
[7, 3, 0, 2, 5, 1, 6, 4]
];
let current = 0;
function drawBoard(solution) {
const board = document.getElementById('board');
board.innerHTML = '';
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const cell = document.createElement('div');
const isLight = (row + col) % 2 === 0;
cell.className = `cell ${isLight ? 'light' : 'dark'}`;
if (solution[row] === col) {
cell.innerHTML = '♛';
}
board.appendChild(cell);
}
}
document.getElementById('solution-counter').innerText = `${current + 1} / ${solutions.length}`;
}
function nextSolution() {
if (current < solutions.length - 1) current++;
drawBoard(solutions[current]);
}
function prevSolution() {
if (current > 0) current--;
drawBoard(solutions[current]);
}
drawBoard(solutions[current]);
</script>
</body>
</html>
✅ Make sure it starts with
<!DOCTYPE html>and ends with</html>.
In your editor, click File, then select Save As…
And then, chose a name for the file while making sure it ends with .html. In this example, we will call the file 8Queens.html.
Save the file somewhere easy to find like your Desktop or a dedicated directory. Your choice.
Locate the 8queens.html file you saved and Double-click it.
It will open in your default browser (Like Chrome, Firefox, Safari, Edge, etc.)
🎉 You’ll see a clean chessboard UI with a “Next” button — click it to explore all 92 solutions to the 8 Queens puzzle!
After clicking next, there is also a "Previous" button that you can use to navigate to a previous solution.
-
You don’t need an internet connection to run it.
-
You can share the file with others via email, USB, or zip it up.
You can also follow me on Twitter for more helpful tips like these. Thanks for Reading!