I built a FireCMS Clone using Svelte 4 — Here’s what I learned

#webdev #showdev #svelte #firebase

Why I built this

For many Firebase projects, a lightweight headless CMS is incredibly useful — whether it’s to integrate a small blog, manage app content, or simply provide a structured way to handle Firestore data.

There are not many choices which are well integrated with Firebase. In fact its's FireCMS or Flamelink. I like the integration of FireCMS, but for simple projects the full framework can feel a bit heavy. So I built my own alternative using Svelte 4.

FireCMS is great in many ways, but for my use cases it often felt like more than I needed. The data model system is impressive, but sometimes the flexibility becomes complexity. The UI also didn’t quite fit how I wanted to work: large tables are hard to navigate, editing inside popups feels clumsy, and handling subcollections never clicked for me. At least in the free plan, there was no built-in file manager. (Also there is no free plan for cloud anymore)

So instead of adapting my workflow to FireCMS (or learning React to contribute to it), I built my own alternative using Svelte 4. (Svelte 5 wasn't out when the project was started)

Why Svelte?

I’ve tried React a few times, but it never felt right for me. Svelte, on the other hand, was immediately comfortable. I already used it in another project, and the idea of building a prototype quickly and scaling from there was appealing. Svelte’s ergonomics helped me get the first version running without too much overhead.

What I ended up building

The result is Firelighter CMS, a minimal CMS that you can host yourself without any backend or auth layer. You paste your Firebase config into the UI, it gets stored in LocalStorage (nothing leaves your browser), and you’re ready to go.

The data schema lives directly inside your own Firestore project under a special __schema collection. That way the schema belongs to your project, not to the CMS. The schema itself is described through a JSON5 editor — nowhere near as sophisticated as FireCMS, but it kept development manageable, and you can reuse FireCMS-style models almost 1:1. I also added a few extra property types such as set (array.oneOf), url, and a file type with the existing storage config from the string property.

The editing UI avoids modals completely. I wanted something calmer and less fiddly, so everything happens inline. I evaluated milkdown as an editor, but it didn't work. bytemd works really well.

Wouldn't it be nice to have a quick look into the contents of your storage? Or upload an image at a glance?

Quick overview of the tech stack:

Svelte 4
Svelte-SPA-Router
TypeScript
CodeMirror
bytemd
boxicons

What I learned (the hard way)

One thing I underestimated was Svelte’s reactivity system. At the beginning everything feels straightforward, but once the app grows, store timing and dependency behavior can get tricky. In hindsight, I should have used RxJS from day one. I eventually introduced it anyway, and it solved several issues that Svelte stores didn’t handle well in a predictable way.

I’m still unsure whether Svelte 5 would have made this smoother. Maybe. Maybe not. In fact, there were moments where I wondered if Angular — despite requiring more boilerplate — might actually have been the safer long-term option simply of its opinionated structure making use of best practices.

That said, Svelte did help me move quickly early on, and that speed is what enabled this project in the first place.

What’s next (Roadmap)

Maybe migrating to Svelte 5
A visual data model editor
More property types and validation options
Better component tests
More documentation and examples

Who this is for

If you’re building small to medium Firebase projects and want something simple, transparent, and easy to host yourself, Firelighter CMS might be useful.

Final Thoughts

This project grew out of my own frustration and curiosity. FireCMS remains a great tool with impressive capabilities, but I wanted something lighter, more direct, and easier to adapt to my personal workflow. Building it taught me a lot about Svelte, about reactivity, and about keeping scope under control.

If you’re working with Firebase and want a minimal CMS, give it a try — and feel free to send feedback or issues.