DEV Community

Cover image for A Figma-like level design editor
Hugo Duprez
Hugo Duprez

Posted on

A Figma-like level design editor

Hey folks,

My small level design tool recently hit 35k users. A lot of people ask how it's built so here we go!

Frontend:
All frontend things are made using SvelteKit, it's really a magical tool to build things fast with all the performance you need for kind of creative tools. For the rendering I use a custom engine I built on top of PixiJS.

Backend:
The tool allows you to export you map to native formats accepted by different engines, so I have had to compile maps into native files like .unitypackage files.
This is handled by a backend written in Rust!

Desktop app version:
I then used Tauri to bundle my SvelteKit app as a desktop app. The cool thing here is since Tauri can run Rust commands, I just put all my backend logic in a standalone Rust crate so I can use the same code for my backend server (for the web app) and for the desktop app (Rust functions are directly called from my static frontend in Tauri).

That's it! You want to try the web version here

Cheers!

Hugo

Top comments (4)

Collapse
 
pengeszikra profile image
Peter Vivo

Congratulation, very usefull editor like a time machine! Great job! I never use tile map editor, but I sure to spend some time with it just for fun.

Collapse
 
hugoduprez profile image
Hugo Duprez

thank you :)

Collapse
 
trymnilsen profile image
Trym Nilsen

Woah, cool!

Collapse
 
hugoduprez profile image
Hugo Duprez

Thanks!