Browser SQL Sandbox for Games: Build Guide

This guide shows you how to build a browser-based SQL sandbox where you can run queries against sample game data (players, items, quests) without setting up a server. You’ll get a working page with a query box, a results table, and error messages, all running locally in your browser.

What You’ll Need

A modern browser (Chrome, Firefox, Edge, or Safari)
A text editor (VS Code, Notepad++, or plain Notepad)
Basic HTML and JavaScript familiarity
No server or database installation required — everything runs client-side

Step-by-Step

Set up your project folder. Create a new folder on your computer, e.g., sql-sandbox. Inside, create three files: index.html, style.css, and app.js. This keeps things organized.
Write the HTML skeleton. Open index.html and add the basic structure: a <textarea> for SQL input, a <button> to run the query, a <div> for results, and a <div> for error messages. Link your CSS and JS files.
Choose a SQL engine. The easiest way to run SQL in the browser is to use a library like sql.js (SQLite compiled to WebAssembly). Download sql-wasm.js and sql-wasm.wasm from the official sql.js GitHub releases, or load from a CDN. Place them in your project folder.
Initialize the database. In app.js, create a function that loads the sql.js module, initializes a new SQLite database, and creates sample tables. Use initSqlJs() to load the library, then new SQL.Database() to create the in-memory database.
Create sample game data. Write SQL statements to create tables like players, items, and quests. Insert a handful of rows (e.g., 10 players, 5 items, 3 quests). Use realistic game data: player names, levels, scores, item names, quest objectives.
Run a query. Add an event listener to the button. When clicked, take the SQL from the textarea, call db.exec(sql), and display the results. sql.js returns an array of result objects with columns and values.
Render results as a table. Write a function that takes the query results and builds an HTML table. Create a header row from columns and data rows from values. Handle empty results gracefully (e.g., for INSERT or UPDATE statements).
Handle errors. Wrap the query execution in a try-catch block. If an error occurs (like a typo in SQL or referencing a missing table), display the error message in the error div, styled in red.
Style the page. In style.css, make the layout clean: a textarea that takes most of the width, a button below it, and a results table with borders. Use a monospace font for the SQL input to make it look like a code editor.
Add a reset button (optional). Since the database is in-memory, any changes (INSERT, UPDATE, DELETE) are lost when the page reloads. To let users start fresh, add a button that re-initializes the database by calling your init function again.
Test thoroughly. Open index.html in your browser. Run a simple query like SELECT * FROM players; to verify everything works. Try a few edge cases: selecting a non-existent column, using a semicolon, or running multiple statements.
Package for small games. To make it feel like a game, add a few predefined queries in a dropdown or as buttons (e.g., “Show top 5 players by score”). This turns the sandbox into a learning tool for players.

Common Mistakes

Forgetting to load the WASM file. sql.js requires the sql-wasm.wasm file alongside the JS. If you get a “Failed to fetch” error, check that the file path is correct.
Using db.run() for SELECT queries. db.run() is for INSERT/UPDATE/DELETE and doesn’t return results. Use db.exec() for SELECT, or db.prepare() for parameterized queries.
Not handling multiple result sets. If a query returns multiple result sets (e.g., two SELECTs separated by a semicolon), db.exec() returns an array. Loop through all of them and render each.
Ignoring asynchronous loading. initSqlJs() returns a Promise. If you try to create a database before it resolves, you’ll get an error. Always use await or .then().
Hardcoding data in the HTML. Keep sample data in the JavaScript so you can easily modify it without touching the markup.

Tips

Use a CDN for quick prototyping. Instead of downloading files, you can include sql.js from a CDN like https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js. This is great for testing, but for offline use, download the files.
Add syntax highlighting. Use a library like CodeMirror or Monaco to turn the textarea into a code editor with SQL highlighting. This makes the sandbox more professional.
Export/import data. Use db.export() to get a Uint8Array of the database, and new SQL.Database(bytes) to load it. This lets users save their work or share databases.
Limit query results. To prevent performance issues, use LIMIT 1000 in your sample queries or truncate the results in the render function.
Make it game-themed. Use a fantasy-style font, dark background, and color-coded tables to match your game’s aesthetic.

Troubleshooting

“Failed to fetch” error when loading sql.js. This usually means the WASM file isn’t in the right location. Check the path in your script tag or locateFile option. If using a CDN, ensure the URL is correct.
Query returns nothing. If you run SELECT and get no output, check that the table name and column names are correct. Use SELECT name FROM sqlite_master WHERE type='table'; to list all tables.
Multiple statements in one call. If you paste two queries separated by a semicolon, db.exec() handles it, but the results array will have multiple entries. Loop through them and render each table.
Changes not persisting. The database is in-memory, so any changes are lost on page reload. If you need persistence, use localStorage to save the exported database bytes.
Performance issues with large data. If you insert thousands of rows, rendering might be slow. Consider paginating results or using virtual scrolling.

Frequently Asked Questions

Can I use this without internet?

Yes, if you download the sql.js files and include them locally. The page will work entirely offline.

Is this safe to use with untrusted SQL?

Yes, because the database runs entirely in your browser’s memory. There’s no server, so no risk to your backend. However, be cautious about allowing users to run arbitrary JavaScript — that’s not possible with SQL.

Can I add my own game data?

Absolutely. Modify the CREATE TABLE and INSERT statements in app.js to match your game’s schema. You can even load data from a JSON file.

How do I let users save their queries?

Store the query text in localStorage when the user clicks a “Save” button, and populate the textarea on page load.

Can I use this for multiplayer or shared databases?

No, this is single-user only. For multiplayer, you’d need a server-side database and an API.

What if I need a different SQL dialect?

sql.js uses SQLite syntax. If you need MySQL or PostgreSQL syntax, look for other WASM-based engines like AlaSQL or PGlite.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →