A powerful, lightweight 2D map editor for game developers.
Built with Electron, Svelte 5, and HTML5 Canvas.

---

About

Axon is a desktop map editor designed for 2D game development. It supports tile-based maps, free-form object placement, polygon zones, drawing layers, and image overlays — all in a single, cohesive workflow. Maps can be exported to multiple formats including Tiled (TMX) and Godot (.tscn) for seamless integration into your game engine.

Features

Layer System

Axon uses a flexible multi-layer architecture with four distinct layer types:

• Tile Layer — Grid-based tile painting with configurable tile size. Supports paint, eraser, and flood fill tools.
• Object Layer — Place, move, resize, rotate, and flip objects freely on the canvas. Includes polygon zone drawing for defining regions (spawn areas, triggers, etc.) and collision zone support.
• Image Layer — Import full images as background or overlay layers with position, rotation, opacity, and optional isometric projection.
• Drawing Layer — Freehand sketching directly on the canvas with brush tools (pencil, line, rectangle, circle, arrow, text).

Layers can be reordered, renamed, toggled visible/invisible, and adjusted in opacity.

Tools

Tool	Key	Description
Paint	B	Paint tiles onto tile layers
Eraser	E	Erase tiles from the grid
Fill	G	Flood-fill connected tile regions
Select	S	Select, move, and transform tiles
Object	O	Place and manipulate objects on object layers
Zone	Z	Draw polygon zones (triggers, spawn areas)
Collision	C	Draw collision boundaries
Sketch	K	Freehand drawing with sub-tools (pencil, line, rectangle, circle, arrow, text)

All keybindings are fully customizable via Settings.

Tileset Management

• Import individual tile images or full spritesheet atlases
• Built-in Spritesheet Slicer with configurable tile dimensions, margin, and spacing
• Folder-based asset watching — point Axon at a folder and it tracks changes automatically
• Visual tile palette with grid and list view modes

Object Library

• Import reusable objects (characters, props, items) into a persistent library
• Drag and place objects anywhere on object layers
• Per-object properties: position, size, rotation, flip (X/Y), visibility, lock
• Object grouping and depth sorting (auto or manual)
• Search and filter within the library

Presets / Prefabs

• Save reusable object arrangements and tile stamps as presets
• Holographic preview before placement on the canvas
• Preset library with search and categories

Path / Waypoint System

• Draw patrol routes and movement paths on object layers
• Add, move, and delete waypoints along a path
• Visual path rendering with directional indicators

Real-Time Collaboration

Axon includes built-in multiplayer editing — work on maps together in real time.

• Host-Mode: One client runs an embedded WebSocket server, others connect directly via IP
• Standalone Server: Run a dedicated collab server on any machine (see below)
• Real-time map sync via operation-based deltas (last-write-wins)
• Remote cursor rendering with colored diamonds and name labels
• In-overlay chat with message history
• Snapshot system to create and restore map states
• Password protection for server access
• Upload current map to share with connected clients

Export Formats

Format	Description
PNG	Render the full map as a high-resolution image
JSON	Axon's native format for programmatic use
TMX	Tiled Map Editor format — compatible with Tiled and engines that support it
Godot (.tscn)	Direct export as a Godot scene file

Canvas & Rendering

• Hardware-accelerated HTML5 Canvas 2D rendering
• Smooth pan (Space + drag or middle mouse) and zoom (scroll wheel)
• Configurable grid overlay (toggle with Ctrl+G)
• Frustum culling for efficient rendering of large maps
• Dirty-flag optimization — only redraws when changes occur
• Tile layer caching, grid caching, and sort cache for large maps
• GPU detection with automatic performance tuning

Undo / Redo

Full undo/redo support via the command pattern. Every edit (paint, erase, fill, object move, zone edit) is tracked and reversible.

• Ctrl+Z — Undo
• Ctrl+Shift+Z — Redo

Project Files

Axon saves projects as .axon files (JSON-based). These include:

• All layers with their data (tiles, objects, zones, drawings)
• Tileset references and embedded tile images
• Object library contents
• Camera position and zoom state
• Full backward compatibility with older project versions

Map Configuration

• Configurable grid dimensions (columns x rows)
• Adjustable tile size (pixels)
• Map properties dialog for renaming and resizing

Auto-Update

Axon checks for updates automatically on launch and can also be triggered manually via Help > Check for Updates. When an update is available, a toast notification appears in the bottom-right corner with options to download and install.

• Automatic check on startup (NSIS installer version)
• Manual check via Help menu
• Download progress with visual progress bar
• One-click restart to apply updates

Settings

• Fully customizable keybindings for all tools and canvas actions
• Settings persist across sessions via localStorage
• Reset individual or all keybindings to defaults

Tech Stack

Component	Technology
Framework	Electron 40.7
UI	Svelte 5 (Runes)
Language	TypeScript 5.9
Build Tool	electron-vite 5
Packaging	electron-builder 26
Updates	electron-updater
Theme	Catppuccin Mocha

Installation

Installer (Recommended)

Download Axon-x.x.x-setup.exe from the latest release. The installer supports automatic updates.

Portable

Download Axon-x.x.x-portable.exe from the latest release. No installation required — runs directly. Note: the portable version does not update itself — it tells you when a newer version exists and opens the download page, and you replace the exe yourself.

Development

# Install dependencies
npm install

# Start in development mode (with HMR)
npm run dev

# Build for production
npm run build

# Package as installer + portable
npm run dist

Standalone Collaboration Server

Axon ships with a standalone WebSocket server that can run on any machine (e.g., a VPS or LXC container). Your team connects via ws://your-server:7777 (or wss:// behind a reverse proxy).

cd server
npm install

# Start the server
npx ts-node collab-server.ts --port 7777

# With password protection
npx ts-node collab-server.ts --port 7777 --password your-secret

Reverse Proxy (Nginx Proxy Manager)

To expose the server with SSL via a domain, add a proxy host in Nginx Proxy Manager:

Setting	Value
Domain	collab.yourdomain.com
Scheme	http
Forward IP	127.0.0.1 (or container IP)
Forward Port	7777
Websocket Support	ON
SSL	Let's Encrypt

Clients then connect to wss://collab.yourdomain.com in Axon.

Project Structure

src/
├── main/              # Electron main process
│   ├── index.ts          # App entry, window creation
│   ├── ipc-handlers.ts   # File I/O, dialogs
│   ├── menu.ts           # Application menu
│   ├── updater.ts        # Auto-update logic
│   └── collab-server.ts  # WebSocket server for collaboration
├── preload/           # Context bridge (IPC API)
│   └── index.ts
└── renderer/          # Svelte frontend
    ├── App.svelte     # Root component
    ├── lib/
    │   ├── models/    # Data types (layer, map, tile, tileset, project)
    │   ├── stores/    # State management (pub/sub pattern)
    │   ├── engine/    # Canvas renderer, camera, grid, viewport
    │   ├── commands/  # Undo/redo command pattern
    │   ├── collab/    # Real-time collaboration (client, store, sync)
    │   └── export/    # PNG, JSON, TMX, Godot exporters
    └── components/
        ├── layout/    # TitleBar, Toolbar, Sidebar, StatusBar, UpdateToast
        ├── panels/    # LayerPanel, TilePalette, ObjectPanel, PropertiesPanel
        ├── canvas/    # MapCanvas
        ├── collab/    # CollabOverlay (connection, chat, snapshots)
        └── dialogs/   # NewMapDialog, MapPropertiesDialog, SettingsDialog
server/                # Standalone collaboration server
├── collab-server.ts      # WebSocket server (Node.js)
├── package.json
└── tsconfig.json

License

All rights reserved.