Click two variable nodes on the canvas (or two rows in the list) to add a ≠ constraint. Double-click an edge to remove it.
Click two nodes to connect them
current assigned conflict backtracked unassignedClick a node to set its value · drag to move
Solver
AC-3 preprocessing
Forward checking
MRV + degree heuristics
51 ms
0
Steps
0
Assigns
0
Backtracks
Search Trace
About CSP Playground
Why this project?
Constraint satisfaction problems (CSPs) are the quiet engine behind some of the most useful algorithms in computer science: timetabling, register allocation, Sudoku, map coloring, and planning systems all reduce to "assign values to variables so that every constraint holds." Yet most learners meet CSPs as a list of abstract algorithms in a textbook — AC-3, MRV, forward checking, backjumping — with little sense of what the search actually does. This project closes that gap by letting you build a problem and then watch the solver think.
What is it?
CSP Playground is a builder and visualizer for constraint satisfaction problems. You define variables with discrete domains (colors, time slots, board rows…) and binary constraints between them, or load a ready-made preset. Then the backtracking search solver runs on a live constraint graph: you watch each assignment, each domain wipeout from forward checking, each dead end, and each backtrack in real time, with full playback controls (step, step-back, speed).
How does it work?
Model: a CSP is a set of variables, each with a finite domain, plus binary constraints (≠, =, <, or "differ by k"). The constraint graph has one node per variable and one edge per constraint.
AC-3: before searching, arc-consistency propagation removes any domain value that has no legal partner in a neighbor's domain. This can detect failure before the search even starts.
Backtracking search: recursively assign one variable at a time. The MRV heuristic picks the unassigned variable with the fewest remaining values; the degree heuristic breaks ties toward the most-constrained variable.
Forward checking: after each assignment, prune values from unassigned neighbors that are now inconsistent. If any domain becomes empty, the branch fails immediately — no need to assign the rest.
Least-constraining values: when several values are legal, the solver tries the ones that leave the most options in neighbors' domains first, which tends to find solutions with less backtracking.
Search trace: every event (assign, prune, conflict, backtrack, result) is recorded as a step with a snapshot of the graph state, which powers the step-by-step playback and the trace log.
How to use it
Load a preset: click any preset button in the left panel — Map Coloring (5 regions, 4 colors), N-Queens (6 queens), Timetable (6 courses, 5 slots — pigeonhole-unsatisfiable, a good demo of the no-solution path), or a Random Graph.
Build your own: "Add Variable" creates a node with a 4-color domain. Click two nodes on the canvas (or two rows in the Variables list) to add a ≠ constraint between them; double-click an edge to delete it. Double-click a node to rename it. Drag nodes to rearrange; "Auto-Layout" re-arranges the graph.
Set values by hand: click a node to cycle its value, or set it from the list. This is a manual baseline to compare against the solver.
Tune the solver: toggle AC-3, forward checking, and MRV in the right panel; drag the speed slider to set playback pace.
Solve: press "Solve" and watch the trace. Use "Step" / "◂" to move one event at a time, and click any line in the Search Trace to jump to that moment. Green = solved (the solution appears as chips), red = no solution exists.