DEV Community: Evolved-Tech

title: We Built a Full Game IDE in a Browser Tab and Our CPU Barely Complained

Evolved-Tech — Tue, 22 Sep 2026 19:01:06 +0000

We Built a Game IDE in the Browser and Lived to Brag About It

Hey, we're Evolved Tech — the crew behind Limn Studio, a browser-based game IDE where you can build, run, and publish 2D games without installing a single thing. No npm. No webpack. No 45-minute node_modules folder that somehow weighs more than the actual game. Just us, a browser, a questionable amount of caffeine, and an unreasonable number of <span> tags.

You'll mostly hear from Kehinde and Desire in this one, but there's a wider crew behind the scenes at Evolved Tech who deserve just as much credit for keeping this thing running — you know who you are, thank you.

Somewhere along the way we also lost four hours to a bug that turned out to be a smart quote sneaking in from a pasted Google Doc. We're still not over it.

Grab a coffee. This is the full, slightly unhinged tour of everything we built, why we built it, and the one CPU-saving trick that finally stopped our animations from moving like they were wading through molasses.

Part 1: The Editor Shell (or: How to Build an IDE Out of Spite and `<div>`s)

Here's a fun fact that will make actual frontend engineers wince: Limn Studio's editor is one HTML file. No framework. No build step. No bundler crying softly in the corner about peer dependencies. Just <style> and <script> tags, stacked like a JavaScript lasagna.

Why? Because every dependency you add is a tiny gremlin that wakes up in six months, demands a major version bump, and takes your whole app down over a null check nobody asked for. No gremlins allowed here. This thing deploys to any static host and will probably still run in 2040, long after everyone else's React app has dependency-rotted into digital compost.

The layout has four zones: a top bar, tabs, main content, and a floating action button that pops open like it's got somewhere important to be. Very dramatic. Very "we contain multitudes."

Mobile: The Great Padding Massacre

Turns out, on a 380px phone screen, our lovely 24px of padding on each side of the editor was quietly eating 12% of the horizontal space. Twelve percent! That's not padding, that's a landlord. So on mobile we ripped out every border, radius, and ounce of breathing room and went full edge-to-edge. The editor now goes commando on small screens, and everyone's happier for it, especially the pixels.

Part 2: The Code Editor (Handmade, Like Artisanal Bread, But It's a Syntax Highlighter)

This is where we lost the most sleep. We did not build a mini Monaco. We do not have the staffing, the sanity budget, or frankly the will to live required for that. What exists instead is about 400 lines of vanilla JavaScript doing an extremely convincing impression of a real code editor, and getting away with it.

The trick: stack two elements directly on top of each other like a syntax-highlighting sandwich.

A <pre> on the bottom layer, rendering pretty colored <span> tokens
A <textarea> on top with the text made completely invisible (color: transparent), but the caret stays visible

The textarea handles all the boring-but-critical native stuff — selection, undo, autocorrect, whatever mysterious ritual iOS performs when you triple-tap — while the <pre> just sits there looking pretty. It's a magician's assistant setup: one element does all the labor, the other gets all the applause.

The Tokenizer: 80 Lines, Character by Character, No Regrets

We hand-wrote a tokenizer that walks the code one character at a time and slaps a <span class="tok-*"> on everything — keywords, strings, numbers, comments, operators, punctuation, function calls, the works. No parser library. No AST. Just vibes and a while loop. And somehow it works beautifully, in GitHub Dark Modern colors, because taste doesn't take a day off just because we're suffering.

The Bracket Analyzer: Snitching on Your Unclosed Curly Braces Since Day One

Ever forgotten to close a {? Of course you have, you're a person who writes code. The bracket analyzer walks your file, tracks a stack of open brackets, and drops a glowing red dot in the gutter the second something doesn't match. It runs 350ms after you stop typing — not on every keystroke — because nobody needs their editor having a nervous breakdown every time they press a key.

The Minimap

A tiny compressed column showing your whole file as 2px colored bars, because sometimes you want to feel like you're piloting a submarine sonar screen instead of writing a Snake clone.

Part 3: The Console (It's Not a `<div>`, It's a Whole Personality)

The console has color-coded log levels, a real REPL, and message batching so that a game logging 60 times a second doesn't turn your browser tab into a space heater.

The REPL is the fun part: the editor lives in the parent window, the game runs inside an iframe, and we bridge the two dimensions with iframe.contentWindow.eval(). Type player.speedX = 500 into the console mid-game and watch your character rocket off screen like it just heard the ice cream truck. Basically necromancy, but for pixels.

Part 4: The Engine (epic.js) — Small, Mighty, Slightly Feral

Games run on epic.js, the canvas engine we built from scratch, along with the entire editor, the console, the Build tab, and the arcade around it. Two people, one engine, way too many late nights.

The whole thing boils down to one sacred law: every game has an update(dt) function, and if you multiply your movement by dt, your game runs at the same speed whether it's on a gaming rig or a haunted Chromebook from 2013. Frame-rate independence — the closest thing game dev has to a peace treaty.

The New Thing: Teaching Animations to Stop Choking the CPU

Here's the update we're actually proud of this week, and credit where it's due: Kehinde went in and fixed the animation system in epic.js so it stops hammering the CPU into submission. Before this, a busy scene with a lot going on would start visibly dragging — like the game had suddenly remembered it has responsibilities and needed a minute. Now the animation loop is lighter on its feet, the frame pacing holds up under pressure, and games stay smooth even when there's a lot happening on screen at once. No CPU fans spinning up like a jet engine just because someone added a few extra particles.

Part 5: The Build Tab — 15 Templates, Zero Native `<select>` Elements

There are 15 starter templates — Platformer, Runner, Shooter, Snake, Dungeon Crawler, and eleven of their cousins — each one a JS object that spits out working game code based on a form you fill in.

We also built a custom dropdown instead of using a native <select>, because native selects on Android tablets like to float over your entire app like a UFO that doesn't respect your design system. Rude. Not on our watch.

Color pickers got the same glow-up: instead of the sad native <input type="color">, every color field is a full card with a swatch, a live hex code, and a copy button. If we're building a game IDE, it's going to look like one, not a 2004 HTML form that time forgot.

Part 6 & 7: Command Palette and Find & Replace

Ctrl+K opens a fuzzy-search command palette straight out of VS Code. Type "fmt," get "Format Code." Type "sv," get "Save" and "Save As" fighting for the top spot like siblings arguing over the last slice of pizza. Ctrl+F opens Find & Replace with a match counter, because scrolling through 400 lines hunting for a typo by eye is a form of self-harm we do not endorse.

Part 8, 9 & 10: Cloud Sync, Sharing, and the Arcade

Save your file and it goes to Supabase if you're logged in, or quietly to localStorage if you're not — either way, your work survives, because losing an hour of game-dev progress should be a punishable offense in several countries.

Hit Share and you can either publish your game to the Arcade (the public gallery of everyone's creations) or grab a private link. The Arcade has search, a Featured banner for the week's most-liked game, and auto-generated thumbnails — template games get a stylized scene, custom games get a procedurally chosen art style based on a hash of the game ID. No two games end up looking alike, which is more than we can say for most portfolio sites.

And yes — Desire already told Kehinde he's topping the leaderboard this week. Screenshot pending. Bragging rights secured in advance. If it doesn't happen, this paragraph never existed and you didn't read it.

Part 11, 12 & 13: The Player, Profiles, and the Leaderboard

Every game has its own player page with Like, Fork, Fullscreen, and a comment thread (nested one level deep, because we're not trying to recreate a Reddit thread war inside a game IDE). Every user gets a public profile with an animated rainbow banner that we are, frankly, a little too proud of.

And then there's the weekly leaderboard — a literal podium with a bobbing 👑 on first place, resetting every Monday UTC. Nothing motivates a small team quite like public, weekly, slightly humiliating rankings that reset right when you're finally winning.

Part 14 & 15: Inbox and Settings

The inbox tells you your stats, your leaderboard standing, and any engine updates, so you always know exactly how many people liked your Flappy Bird clone this week (the answer is never enough, there is no number that will satisfy you, this is the curse of shipping things publicly).

Settings let you set a permanent username, a changeable display name, an avatar URL, and subscribe to weekly updates, because everyone deserves the chance to opt back into our nonsense on a weekly cadence.

Part 16: The Database

Games, likes, comments, profiles, follows, saved files, share links, changelog entries — all living in Supabase tables with Row Level Security turned all the way up, because nobody's editing anybody else's stuff except through the front door, with a badge, and an auth.uid() check standing guard.

Part 17 & 18: Design System and Performance

Dark background, blue/purple/pink accents, nothing animates faster than 0.15 seconds because slow motion reads as expensive and we would like to seem expensive. Under the hood: console messages batch per animation frame instead of spamming the DOM 60 times a second, bracket checking is debounced, the console caps at 500 lines, all UI animations freeze the instant a game starts running, and — as of this week, thanks to Kehinde — the epic.js animation loop no longer treats your CPU like a personal enemy. Smooth frames, happy fans, no jet-engine noises from your laptop.

Part 19: Deployment (Or: How We Avoided Docker Like It Owed Us Money)

Static frontend on Vercel. Supabase for the backend. No Docker, no Kubernetes, no CI pipeline beyond "push to git and pray a little." Edit a file, push, it's live. It's the deployment pipeline equivalent of a shrug that somehow always works.

Part 20: What's Next

Multiplayer via Supabase Realtime, sprite and tilemap editors, an audio library, fork trees, playlists, achievements, and scheduled tournaments. Basically, we're not done — we're just done for today.

📋 The "I Don't Want to Read All That" Summary Table

Feature	What It Actually Does	Why You Should Care
Single-file editor shell	Whole IDE in one HTML file, no build step	Deploys anywhere, breaks nowhere
Custom code editor	Hand-built syntax highlighting, gutter, minimap	Feels like a real IDE, weighs like a text file
Auto-indent & bracket matching	Smart `{}()[]` handling, red-dot error markers	Fewer "why won't this run" moments
Live console + REPL	Real-time `eval()` into your running game	Poke your game's guts while it's alive
epic.js engine	Lightweight canvas game engine with `update(dt)`	Frame-rate independent games out of the box
New: epic.js animation fix (by Kehinde)	Animation loop no longer hogs the CPU	Smooth gameplay even in busy, particle-heavy scenes
Build Tab (15 templates)	Form-driven game generator	Go from blank page to playable game in minutes
Command Palette (`Ctrl+K`)	Fuzzy-searchable action menu	VS Code energy, browser-tab price
Find & Replace (`Ctrl+F`)	Search, replace, match counter	Stop scrolling like it's 1998
Cloud sync	Supabase-backed save, falls back to `localStorage`	Never lose your masterpiece
Share & Publish	Private links or public Arcade publishing	Show off or keep it secret, your call
The Arcade	Public gallery, search, featured games, auto thumbnails	Where games (and egos) go to be discovered
Player page	Like, fork, comment, fullscreen	Full game-consumption experience
Creator profiles	Rainbow banner, badges, follow system	Internet fame, minus the algorithm
Weekly Leaderboard	Podium, crowns, resets every Monday	Wholesome public pressure
Inbox & Settings	Notifications, stats, account controls	The boring-but-necessary stuff, handled
Performance tricks	Message batching, debounced checks, animation freezing	Smooth even when your game logs like it's angry

🤝 Need Help, Found a Bug, or Just Want to Say Hi?

We built this thing in public and we'd love for you to poke at it, break it, and tell us about it.

Where	Link
💬 Discord community	discord.gg/kVpSmYWXr
🧑‍💻 GitHub	github.com/terracodes004
📧 Support / general questions	evolvedtech004@gmail.com

Closing Thoughts

Limn Studio exists because we refused to install a framework and then dared each other to keep going. No npm install, no webpack, no dependency graph plotting against us at 2am. It loads in one HTTP request, works offline after the first visit, and runs on anything with a browser and a pulse.

If you're building something similar: start small, add one feature at a time, and only optimize once you've actually measured something slow. Almost nothing in this project exists because it looked clever. It exists because something was annoyingly slow — like, say, an animation loop dragging our CPU down with it — and we fixed it out of spite.

So go open the editor. Type a few lines. Hit Run. You don't need a gaming rig, a 40GB SDK, or a computer science degree with a minor in suffering. You need a browser, an idea, and the willingness to write one line, watch it run, and write the next one.

Stop waiting for inspiration. Draw your game into existence. 🎮

Limn Studio is live at limn-engine-doc.vercel.app — go break it and tell us how.

Limn Engine Just Got Smarter — Here's What We Added (And Why It Matters)

Evolved-Tech — Mon, 07 Sep 2026 19:08:00 +0000

The question that started it all: "Why do we have to write the same code in every single game?" So we built Limn Engine — a zero-configuration, browser-based 2D game engine that hits 60 FPS on hardware old enough to vote. It got published on SitePoint and ranked #3 among 2D JavaScript game engines, which we now mention in every conversation, including this one.

Today's post is about what's new. And to be crystal clear: all of it is live right now. Not "coming soon," not "in beta," not "works on our machine." You can go use every single feature below today, this minute, before you even finish this sentenc—okay you finished it, go use them.

Fair warning: some of these features exist purely because we got tired of doing something annoying, several times, in a row, forever.

📋 The TL;DR (For Those Who Scroll First, Read Later — No Judgment)

Feature	What It Does	Why You'll Care
🔐 Google OAuth	One-click sign-in via Google, plus email OTP as backup. Powered by Supabase Auth.	No passwords, no forms, no "forgot password" emails haunting your inbox at 3 AM.
🔗 Shareable Code Snippets	Write code in the playground, hit Share, get a unique URL.	Send exact working code to friends instead of dumping 200 lines into Discord like a ransom note.
🔍 Universal Search	Global search overlay — hit ESC or click the icon.	Find docs, API refs, tutorials, and community posts instantly. Even we use it now.
📱 Touch-Friendly Design	Fully responsive interface across desktop, tablet, and phone.	Build your game from the couch. We don't make the rules, we just enable them.
💬 Inbox & Messaging	Built-in messaging system for updates and collaborator chats.	Stay in the loop without alt-tabbing to five other apps.

Status: all shipped. All live. Go bother them.

Now, for those of you who like the director's commentary — here's the full story behind each one.

The Problems That Kept Us Up At Night

Rule one of building Limn Engine: "Common outcomes should be functions." Edge detection, camera math, collision loops — if we typed it twice, it became move.bound(player) or camera.shake(5,5) before we typed it a third time out of spite.

But the engine's infrastructure needed the same intervention. Three problems in particular were staging a nightly protest in our brains:

· Authentication — every game needs users, and building sign-up/login/password-reset from scratch takes weeks we do not have and would rather spend on, frankly, anything else.
· Collaboration — "send us your code" in Discord meant receiving 200 unformatted lines that looked like a ransom note.
· Discovery — finding anything on our own website had become a scavenger hunt with no prize at the end.

So, in the spirit of turning problems into functions, we fixed them. All three. They're live. We already told you that but it bears repeating because we're proud of ourselves.

🔐 Google OAuth: One Click, No Passwords — Live Now

Nobody has ever, in the history of the internet, been excited to "Create an account." You see that button, your soul leaves your body a little, and you close the tab. We know. We've done it to other websites while building the fix for our own.

So Limn Engine now runs on Google OAuth as the primary login method:

· One click, and you're in. No forms, no email verification purgatory, no "forgot password" email arriving at 3 AM to remind you of your own incompetence.
· Instant onboarding — straight to building, zero friction, zero excuses left to procrastinate with.
· We never see your password, mostly because we don't want that responsibility. Google can have it. Google seems more organized than us.

Prefer not to hand Google the keys? We also added email OTP login, because choice is nice and so is not being cornered.

Under the hood, this runs on Supabase Auth, a real production-grade auth system built by people who are much better at this than we are. We know our strengths, and "building auth from scratch" is not one of them. We have games to make.

The takeaway: authentication should never be the reason someone bounces off your engine. Consider that reason eliminated. You're welcome.

🔗 Shareable Code Snippets: Collaboration Without The Crime Scene — Live Now

This one's personal.

Every debugging session in Discord went the same way: "send us your code," followed by 200 lines of unindented JavaScript arriving like evidence at a trial nobody asked for. Our DMs looked less like a support channel and more like a crime scene with syntax errors.

So now the playground has a Share button that generates one clean URL, sendable anywhere — Discord, WhatsApp, Twitter, email, and yes we did consider carrier pigeon and no it did not make the roadmap.

What that gets you:

· Debugging that doesn't require detective work — stuck on a physics bug? Send the link. Your friend sees exactly what you see, and "works on my machine" officially retires.
· A place to flex — nailed a particle effect in 30 seconds? Send the link and let people watch it run live, no copy-paste required.
· A Discord server that's actually readable — no more scrolling past a wall of code to find the one message that matters. Our eyes, and yours, say thank you.

The takeaway: sharing code is now exactly as easy as sharing a meme, which was frankly always the bar.

🔍 Universal Search: Find Anything, Instantly — Live Now

Our website had grown a lot of rooms and forgotten to build any hallways. Docs, API references, tutorials, community posts — all real, all somewhere, none easily findable, including by us. We have genuinely spent 10 minutes hunting for our own documentation, which is a special kind of humbling.

So we built a global search overlay. Hit ESC, or click the icon, type your question, get your answer. No reloads, no menu spelunking.

Searchable: API references, documentation, community threads, game templates, tutorials, and everything else we forgot to list here (which the search bar will also find, conveniently).

It's fast, it's obvious, and it makes Limn Engine feel like a serious tool built by serious people — a costume we are, at this point, fully committed to wearing in public.

📱 Touch-Friendly Design: Build Anywhere — Live Now

Games get played on desktops, tablets, and phones, so it never made sense that you could only build one hunched over a laptop like it's a ritual. We rebuilt the interface to be genuinely touch-responsive, whether you're:

· Skimming docs on a tablet in bed
· Managing your community from your phone on a lunch break
· Poking at your game on whatever screen happens to be nearby

No pinch-to-zoom archaeology, no buttons sized for a smaller species of thumb. Just an interface that works wherever you decided to be productive today, including the couch, which we fully endorse.

💬 Inbox & Messaging: Stay Connected — Live Now

Building alone is fine. Building with people who occasionally message you back is better. So we added a built-in inbox and messaging system for:

· Getting updates and announcements, so "what's new" isn't a mystery
· Talking to collaborators without leaving the platform
· Staying plugged into the wider Limn Engine community

It's a small feature that makes us feel disproportionately like a real company — one with an actual office, not just a room, some laptops, and a shared refusal to give up.

🎮 What's Next?

Currently in the workshop (these ones, unlike everything above, are genuinely not out yet — we'd tell you):

· TypeScript support — for developers who like their errors caught before runtime, understandably
· An NPM package — npm install limn-engine is coming, we promise, for real this time
· More game templates — for when the blank canvas is scarier than the actual coding
· Better physics and particles — because if something explodes in your game, it should look incredible

We're building this for the long haul, and we'd like some company.

🙌 Join The Community

Already here? You're basically family at this point, and we mean that with zero legal obligation attached.

New? Come say hi:

· #beginner-help — no question is too small, we've asked worse
· #showcase — show us your first game, we will cheer, possibly too loudly
· #engine-dev — help build the engine itself, we need every hand we can get
· #performance — help us make this thing run on a toaster, we're only half joking

🏁 Final Thoughts

We started with a Toshiba laptop, 4GB of RAM, and one stubborn question: "Why do we have to write the same code in every single game?"

That question is now a real, live, shipped engine with:

· Zero configuration, because life is complicated enough already
· 60 FPS on low-end hardware, yes, even that one
· Google OAuth, one click, no passwords, no drama
· Shareable code snippets, because copy-paste had its moment and that moment ended
· Universal search, so nobody has to hunt for their own documentation again (looking at us)
· Touch-friendly design, because the couch is a legitimate workstation
· A community that keeps showing up, which is honestly the part we're proudest of

Built by a team that refused to give up, mostly out of stubbornness.

🔗 Links


💬 Discord	discord.gg/kVpSmYWXr
💻 GitHub	github.com/terracodes004
✉️ Support Email	evolvedtech004@gmail.com

Got questions, bugs, or just want to show off what you built? Drop into the Discord or email us — we read everything, we promise, we're not just saying that like a company that doesn't.

Draw your game into existence — the easy and advanced way.

How We Upgraded Our Limn Engine Playground Editor To Support Version 4

Evolved-Tech — Mon, 24 Aug 2026 23:17:17 +0000

Introduction: See What We Built

Every game engine creator dreams of a seamless developer experience. Imagine opening a web-based playground, clicking a version dropdown menu, switching to Version 4, and instantly seeing your game run with brand-new features like built-in particle systems and audio management. Today, we want to walk you through how we updated our custom HTML5 canvas framework editor—Limn Engine—so it dynamically detects and routes Version 4 (epic.js) alongside our older releases.

Step 1: Download Limn Engine

Before writing or running any editor logic, you need to acquire the core engine build:

Go to the official website and download the core engine script file named epic.js.
Keeping this file hosted and accessible allows your playground editor to inject it directly into runtime previews whenever a developer tests their game.

Teaching Style: Understanding How Version Routing Works

Let me explain what this means for our editor architecture. A web-based code playground does not magically know which engine version a developer wants to use; it has to inspect the user interface dynamically. Here's what each part does:

Our editor scans the DOM for any select dropdown elements.
It evaluates their text content for version numbers.
It maps that selection to the correct script file URL.

Let's look at how we implemented this logic.

Breaking Down the Code Line by Line

Before looking at code, here is what we are about to build: a two-part update to our editor's runn() function that checks for Version 4 and maps it to our new asset URL.

1. Updating the Scanner Loop

First, let's examine how we updated the scanner loop to recognize V4:

for (let select of allDropdowns) {
  let text = select.textContent.toUpperCase();
  // Include V4 so the version detector targets it correctly
  if (text.includes('V2') || text.includes('V3') || text.includes('V4') || select.value.toUpperCase().includes('V')) {
    versionDropdown = select;
    break;
  }
}

text.includes('V4'): We added this check so that when the editor reads our UI elements, it officially registers Version 4 as a valid release option instead of skipping it.

2. Updating Script Routing Conditionals

Next, let's look at how we updated the script routing conditionals:

if (versionDropdown) {
  let selectedVersion = versionDropdown.value.toLowerCase();
  if (selectedVersion.includes('v2')) {
    engineScriptFile = "tcjsgame-v2.js";
  } else if (selectedVersion.includes('v3')) {
    engineScriptFile = "tcjsgame-v3.js";
  } else if (selectedVersion.includes('v4')) {
    engineScriptFile = "[https://limn-engine-doc.vercel.app/asset/epic.js](https://limn-engine-doc.vercel.app/asset/epic.js)"; // Points to v4
  }
}

selectedVersion.includes('v4'): When a user selects v4 from the dropdown, this conditional matches the string and targets our newly hosted epic.js file for preview injection. After coding, what we've accomplished is a lightweight, zero-dependency version switcher that connects UI dropdowns directly to our core framework files without requiring a heavy backend server.

Honesty About Our Limitations

While string-matching UI elements is a fast and straightforward way to build a custom code playground, we have to be honest about its trade-offs:

If someone alters our HTML label text or renames option values without updating the script check, version routing can fail.
Larger commercial IDEs use robust configuration objects or package manager manifests instead.

However, for a lightweight, custom-built framework like Limn Engine, string filtering keeps things simple and easy to maintain. We believe in letting developers choose the architecture that best fits their project goals.

What You've Learned

To summarize the key concepts we covered while making these changes:

DOM Traversal: Dynamically scanning page dropdowns using querySelectorAll('select').
String Filtering: Extending conditional logic to recognize the V4 keyword.
Dynamic Script Injection: Mapping user version selections directly to the core epic.js source URL.

Resource Hub

If you want to check out our framework files or connect with our creator community, explore these links:

Documentation & Assets: Visit the Limn Engine Vercel Assets.
Community & Support: Join our Discord server to share feedback and get help.
Source Code: Review updates and templates on GitHub.