Mykonos Island Voxels: a framework-free island builder you can read in an afternoon

A toy with taste

The premise is stated with unusual honesty: a small, self-contained creative toy, drop blocks on a 14-by-14 grid and a tiny village builds itself, with no goal, no resource grind and no scoring, just the puzzle-piece pleasure of arranging things until they look right.

What elevates it above the average grid painter is a committed art direction: cobalt-blue domes on whitewashed walls, bougainvillea spilling over stone, olive trees, windmills, narrow cobble paths, and a sea you can carve with a click. The 75-plus assets are organized as terrain, nature, props, water and buildings, with chapels, two-story villas, cypress, agave, wells, lanterns, fences and bridges named individually. A one-click fill-with-grass carpets the island so arranging starts in seconds.

It is playable immediately on the web, and the repository is the source of the same site, which makes it as much a study in how little tooling a polished browser toy needs as a toy.

The no-build-tools bet, taken literally

The stack declaration reads like a checklist of absences: pure ES modules, no bundler, no transpiler, no node_modules, open index.html and it runs. The one caveat is the browser's own: ES modules refuse to load from file URLs, so local development needs an HTTP server, and the README offers three one-liners:

python3 -m http.server 8000
npx serve .
npx http-server -c-1 .

Then the site is on localhost. Deployment is a single command to Netlify:

netlify deploy --prod

The deployment story is more engineered than it first appears: a build script produces a clean output folder containing only runtime files, with no design references, no desktop cruft and no duplicate images, and ships deliberate cache headers, immutable for assets and must-revalidate for code and markup. That is the cache discipline of a production site, applied to a toy, and it is why the deployed version loads fast on repeat visits.

For learners, the bet pays off in the most direct way: every file you open is the file the browser runs. There is no generated bundle to reverse-engineer between you and the source.

Input: mouse and touch as equal citizens

The control tables cover both input worlds without treating touch as an afterthought. With mouse and keyboard: click places the selected asset, drag brush-places across cells, right-click erases with right-drag brush-erasing, shift plus drag pans, the scroll wheel zooms, H and V flip the placement preview, E toggles erase mode, G toggles the grid overlay, keys one through five switch palette categories, and S and R save and reset.

Touch gets its own mapping rather than a port: tap places, drag brush-places, a long press of about 420 milliseconds erases the tile under the finger, two-finger pinch zooms and two-finger drag pans. The layout adapts from desktop down to small phones, with safe-area insets handling the iPhone notch.

Placement feedback carries through to sound: distinct placement sounds for water, stone, wood, small vegetation, large vegetation and interface clicks, with debounced overlap so brush-painting does not flood the audio bus. It is a small detail that most hobby projects never notice, and it is the difference between a toy that feels cheap and one that feels made.

The renderer, and why idle frames are free

The architecture notes are the best part of the README, because they document load-bearing invariants rather than marketing. Rendering is layered caching: the renderer keeps four cache canvases, a screen-space backdrop and vignette pair rebuilt on resize, a world-space platform rebuilt on grid resize, a world-space terrain layer rebuilt when a terrain version counter changes, and a world-space static-objects layer rebuilt on add or remove. Each frame composites those caches and draws only the currently animating tiles, so idle frames are essentially free.

High-DPI correctness is handled by sizing cache canvases at world scale times a cache factor, two times on standard displays and three on retina, and by pre-rendering asset display canvases at up to six times their reference size, so detail survives camera zoom without intermediate softening. The source images are pre-rendered at six-times display resolution at load and baked into cached layers.

Two more invariants close the loop: a spatial occupancy index in the tile map makes object lookup and free-cell checks constant-time per cell instead of linear over the object list, and dirty-flag rendering early-exits the loop when the scene is static and no animations are pending. The contributing rules defend these invariants explicitly: keep it framework-free, keep the asset count modest, and do not add per-frame canvas filters or anything that would re-introduce frame drops, because the caching invariants are load-bearing.

Project layout, persistence, and provenance

The source tree is flat and readable, which is the whole point of the no-tools bet; its top reads:

.
├── index.html               # entry point
├── styles.css               # the entire UI (no framework)
├── src/
│   ├── main.js              # boot, asset loading, starter scene
│   ├── config.js            # grid size, tile dims, palette, debug flags
│   ├── core/
│   │   ├── Game.js          # game state + tool dispatch
│   │   ├── Camera.js        # pan / zoom / change notifications
│   │   ├── Renderer.js      # layered canvas caching + animations
│   │   └── InputManager.js  # mouse + touch + keyboard
│   ├── grid/
│   │   ├── IsoGrid.js       # screen ↔ cell math
│   │   └── TileMap.js       # terrain + objects, occupancy index

Each module has one job and says so: game state and tool dispatch, camera with change notifications, the layered renderer, an input manager covering mouse, touch and keyboard, isometric screen-to-cell math, a tile map with the occupancy index, and separate modules for asset loading, silhouette extraction and a procedural voxel fallback for when PNGs are missing.

Persistence is localStorage with auto-save and reload on the next visit, appropriate to the stakes. The licence is MIT, and the provenance notes are careful: the PNG asset pack is released under the same licence and was generated for the project, while the audio clips were authored separately, with file metadata as the attribution source. The last push was on 2026-05-14.

Who it is for, and the neighbours

Three audiences get value here. Players get a free, instant, gentle island-painting toy that works on a phone. Learners get a complete, readable, framework-free web game codebase with documented rendering invariants, which is rarer than it should be. And anyone building isometric web tools gets a reference implementation of cached-canvas rendering with high-DPI scaling, worth reading before reaching for a game engine.

The nearest neighbour is Townscaper, the genre's reference: instant, generative towns with no grid editing at all, sold as a paid application on desktop and mobile, where Mykonos is free, browser-based, hand-placed and fully source-available. They are complementary moods: one generates beauty for you, the other lets you arrange it yourself.

The limits are the toy's own terms: a 14-by-14 grid, no sharing or export beyond the browser's storage, no multiplayer, and a single-maintainer project pushed last in May. As a piece of craft whose entire source you can read before lunch, it does precisely what it sets out to do.

Editorial conclusion

Mykonos Island Voxels fits players wanting a five-minute island-painting break in a browser tab, learners wanting a complete framework-free web game to read, and developers wanting a working reference for cached-canvas isometric rendering with high-DPI assets. It does not fit anyone seeking depth mechanics, sharing or export, or a maintained engine to build on, since it is a deliberately small single-maintainer toy. Verify first: that your target phone's browser handles the pinch and pan gestures as documented, that localStorage persistence covers your expected session pattern, and the audio file metadata if you plan to reuse the sounds. The licence is MIT, and the last push was on 2026-05-14.

Frequently asked questions

Official sources

1. boona13/mykonos-island-voxels on GitHub
2. Issues
3. License: MIT
4. Project website
5. README