Grid Notes — Map and Collision Sketcher

Preview and download a free example map in JSON, SVG and PNG before buying the editor source kit.

Sketch small orthogonal maps, mark collision cells and check a shortest four-direction route between start and goal. Grid Notes is an editable HTML/CSS/JavaScript source kit for developers who want a readable map-data workflow.

Includes floor, wall and water brushes; independent collision toggles; start/goal markers; up to 64 undo/redo changes; validated JSON import; map JSON, SVG and PNG export. Maps are 6–32 columns and 6–32 rows. The included 12 × 8 example has a fourteen-step route. Wall painting sets collision and water clears it; the route uses the blocked array, regardless of terrain color.

Click one cell per edit, or use arrow keys and Enter/Space with the keyboard. Importing invalid JSON leaves the current map unchanged. The browser keeps data only in session memory; export before reloading. The 10-file ZIP includes the offline editor, pure data/route core, embedded and standalone example, guide, manifest, design notes and reuse terms.

No custom tileset import, drag painting, flood fill, diagonal routes, terrain costs, actor physics or engine importer. JSON is the documented grid-notes-1 format, not Tiled format. The route check is not a full game-solvability test.

Original AI-assisted code, documentation and procedural diagrams, without third-party artwork. Personal/commercial incorporation and source editing permitted; attribution optional. Unchanged-kit competing resale excluded, no exclusive copyright promised.

Tested through a local preview server in the Codex desktop browser, including a 390px responsive layout, route/undo/import/keyboard checks and real JSON/SVG/PNG exports. Direct local-file launch, physical mobile devices, other browsers and engine integration are unverified. Extract the archive and open index.html; no build dependencies, accounts, analytics or uploads. $4; USDC Solana checkout.