I built a simple Grid Visualizer because I hate wasting paper

Revision en2, by Himalaya_, 2026-01-31 09:50:11

Hello Codeforces!

Like many of you, I struggle to visualize grid/coordinate geometry problems when I don't have a pen and paper handy. Debugging DFS/BFS paths or complex geometry on a blank screen is painful.

I couldn't find a simple, lightweight tool that did exactly what I wanted, so I built CP Grid Visualizer.

It's a single-file, browser-based tool to instantly plot points and lines on an infinite grid.

Link: https://himalaya-pahar.github.io/cp-grid-visualization/

github repo: https://github.com/himalaya-pahar/cp-grid-visualization

Features:

  • Infinite Grid: Handles negative coordinates and large ranges easily.

  • Fast I/O: Left-click to add points. Click any two points to draw a line.

  • Interactive: Click points to connect them with lines.

  • Precision Control: Switch between Snap-to-Grid (Integers) and Decimal Mode (Floats) instantly.

  • Safe Mode: Toggle "Allow Adding Points" OFF to lock the board and prevent accidental clicks.

  • Fast Edit: Right-Click any point to delete it instantly.

  • Export: One-click "Download Image" to save your visualization (great for editorials or asking for help).

  • Dark Mode: Because we are programmers.

How to use:

  • Add Point: Left-click empty space (or type coordinates in the sidebar).

  • Connect: Click Point A, then Click Point B to draw a line.

  • Delete: Right-Click any point to remove it instantly.

  • Navigate: Drag to pan, Scroll to zoom.

  • Settings: Use the sidebar to Lock the board or switch to Decimal mode.

UI of CP Grid Visualizer

My Visualizer UI

Visualizing the third sample case for 2193F — Pizza Delivery. Calculated the optimal path visually in seconds

My Visualizer UI

Problem link: https://mirror.codeforces.com/contest/2193/problem/F

I kept it very simple (just HTML/JS) so it's fast and works offline if you save the file.

Let me know if you find any bugs or have feature requests!

Tags tool, visualization, coordinate geometry, interactive

History

 
 
 
 
Revisions
 
 
  Rev. Lang. By When Δ Comment
en5 English Himalaya_ 2026-02-04 18:07:32 26
en4 English Himalaya_ 2026-01-31 10:34:58 89
en3 English Himalaya_ 2026-01-31 09:53:27 0 (published)
en2 English Himalaya_ 2026-01-31 09:50:11 585 Tiny change: '., 5, 5).- Decimal Mo' -> '., 5, 5).-Decimal Mo' (saved to drafts)
en1 English Himalaya_ 2026-01-30 19:57:49 1675 Initial revision (published)