How I Built LevelSketch: A Browser-Based 2D Level Editor

LevelSketch is a simple but powerful 2D level editor built right in the browser. Designed with game developers and level designers in mind, it allows for quick prototyping and exports with no installations required. It’s fully open and instantly usable via your browser.

Try the live editor here: LevelSketch 2D Editor

⚙️ Tech Stack

This project was built using a lean stack optimized for performance and usability:

NextJs
Vercel – for hosting and continuous deployment

The editor is light enough to run in any modern browser, including mobile devices and Chromebooks.

🛠️ Features & Workflow

LevelSketch gives you everything needed to start building 2D scenes:

Drag-and-drop creation of tiles, blocks, hazards, and characters
Simple grid snapping for clean layouts
Resizable canvas and viewport zoom
Color customization, labeling, and metadata tagging
Save/load projects from local storage
One-click PNG export to integrate into your Unity or Godot pipeline

All tools were designed for clarity. No complex menus — just intuitive interaction.

🚀 Product Hunt Overview

LevelSketch by Krishnamohan Yagneswaran – 2D Level Design Tool was recently launched on Product Hunt. Here's a snapshot of what it offers:

Everything You Need to Design – from starter tiles to full environment layers
Intuitive Canvas – drag, drop, and resize with a clean UX
Powerful Tools – basic shapes, sprites, obstacles, triggers, and text objects
Export Anywhere – save your layout or export as PNG for easy game engine import

This tool supports fast prototyping and is ideal for game jams, early pitch presentations, and dev teams needing a visual design sandbox.

📤 Export & Integration

Exporting your level is straightforward. You can:

Save locally as JSON (to reload later)
Export as a PNG image for reference or game engine overlay

We’re working on future support for CSV/Tilemap export formats to plug into tile-based engines like RPG Maker, Tiled, and others.

🌍 What's Next

LevelSketch is currently in its stable MVP state. Here's what’s in the pipeline:

Layer support – multiple layers for foreground/background
Undo/Redo stack
Custom asset importing
Session sharing – real-time collaboration support

💬 Final Thoughts

LevelSketch is just getting started. As a solo developer tool created by Krishnamohan Yagneswaran, it’s meant to bridge the gap between idea and implementation. No downloads. No builds. Just open the link and start designing.

Whether you're crafting levels for a platformer, puzzle game, or top-down shooter, LevelSketch gives you an instant sandbox for experimentation.

Explore, build, and share. Try LevelSketch now.

— Krishnamohan Yagneswaran