DEV Community

Cover image for How I Built a Unity-Like Editor for HTML5 Games in One Day Using AI
Andrii Volodko
Andrii Volodko

Posted on

How I Built a Unity-Like Editor for HTML5 Games in One Day Using AI

Hi everyone! My name is Andrii, and my career in IT started way back in 2008. I initially worked in web development — corporate websites, online stores, and landing pages. It was an interesting experience working at a web studio.

At some point, I came across an article about how people make games and earn money from them. I thought: why not me? So I decided to give it a try. It also seemed more interesting than traditional web development. I started with Unity, which at the time still supported JavaScript — something I already had experience with.

Later, I moved to Flash and eventually to Pixi.js. One thing that always surprised me was the lack of a proper visual scene editor for Pixi.js. From that point on, I occasionally thought about building my own editor.

At one point, I even started working on one, but it quickly became clear that it was a very large task. With the rise of AI, I decided to give the idea another shot. Honestly, my expectations were much lower, which is why I decided to share the experience.

I started by discussing the idea with ChatGPT (Plus subscription). Then I asked it to create a prompt for Cursor, selected High Fast in the agent settings, and started generating the project. The name was fairly obvious — HTML5 Game Editor.

After getting the first result, I was, to put it mildly, impressed. It actually looked pretty decent.

HTML5 Game Editor screenshot

The implementation became addictive, and after literally one day of working with Cursor, I already had a version that was reasonably usable for simple tasks. The first iteration already allowed me to create scenes and nodes such as Sprite and Text.

The next day, I hit the Cursor Pro usage limit, so I upgraded to Pro+. I also discussed it with ChatGPT and disabled Fast mode in the settings to reduce token usage.

One important factor, in my opinion, was that the new Grok 4.6 model had been released just one day before I started working on the project. It played a significant role in making all of this possible at a relatively low cost.

I then spent roughly a week adding new features and demos to the editor.

Here is a screenshot showing how many tokens have been used so far (100M tokens had already been used before I started working on the editor):

Cursor token usage screenshot

And here is an example of token usage after a week of working on the project:

Cursor token usage screenshot

The idea was to build an editor that runs in the browser, with a Node.js backend responsible for interacting with the file system. Communication happens over regular HTTP.

One potential advantage of this approach in the future is collaborative development: designers and integrators could work on game assets while developers work on the code in parallel.

The editor itself uses React and dockview. It also supports hybrid scenes where 2D objects rendered with Pixi.js can work alongside 3D objects rendered with Three.js. Multiple projects can be opened and managed. Everything is implemented in a pnpm monorepo.

Quite a lot of time also went into adding demos. There are currently three: the editor's core features, a card game, and a 3D game.

HTML5 Game Editor demos

Here is a screenshot showing the current project size:

Project lines count

Without AI, I think something like this would have taken roughly a year of development for a very experienced developer.

Problems That Remained After Code Generation

  • Nodes could not be nested
  • Text configuration options were very limited
  • There were only a few node types compared to the capabilities of the underlying 2D library
  • There were some usability issues
  • There were minor bugs in editing controls

All of these were relatively easy to fix through additional prompts to the AI.

As for new functionality, I added support for Prefabs, color schemes, advanced text settings, additional scene and project parameters, hitbox editing, object masks, and Spine animations.

Another important part is game resources/assets. While looking for free assets, I came across an interesting format used by Aseprite and decided to add support for it. This turned out to be relatively straightforward.

Conclusion

After this experience, I realized that AI is already capable of taking on fairly complex tasks and can be a very good fit for developing various kinds of editors and development tools.

If you're interested, you can explore the project in more detail on GitHub:

github.com/andvolodko/html5-game-editor

Top comments (0)