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

Ortwin — Sun, 30 Nov 2025 20:32:55 +0000

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 on a dedicated page. A special set named 'content' will be interpreted as content sections of custom types defined prior in the properties scheme. Of course it supports markdown. I evaluated milkdown as an editor, but it didn't work since it does not support multiple instances on the same page. bytemd on the other hand works really well. Also the addition of the image selector was a piece of 🍰! Speaking of which (not the cake) you can browse to your storage and upload new images very easily.

Isn't it be nice to have a quick glance into the contents of your storage and mange your files?

Here a quick overview of the tech stack, for those who wanna know.

Svelte 4 as SPA
TypeScript
CodeMirror
bytemd
tabulator-tables
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 since I don't want to waste to much time which I could invest into other projects. (The actual heads for the headless CMS)

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.

Demo & Links

👉 Live Demo: https://fl-cms.web.app/
👉 GitHub Repo: https://github.com/ortwic/web-apps/tree/main/apps/fl-cms
👉 My Profile: https://ortwic.github.io/

DEV Community: Ortwin