Zum Hauptinhalt springen
Echtzeit-Radar & Feeds
Alle RSS Feeds ➔
👥 Community & Social
••
Sichere ProgrammierungCloudflare outage 2019: how one regex caused 27 minutes of 502s(29.09.2026 um 05:46 Uhr)
•
Sichere ProgrammierungHow boxr runs rootless: namespaces, a trampoline, and uid mapping(29.09.2026 um 05:47 Uhr)
••
Sichere ProgrammierungTech Stack for Thumbrella Cloud(29.09.2026 um 05:51 Uhr)
•
AI & KI NachrichtenStructured Outputs vs function calling in the OpenAI API(29.09.2026 um 05:53 Uhr)
•
Sichere ProgrammierungSMS OTP API Ownership: 6 Rate Limit Rules for SaaS Login Recovery(29.09.2026 um 05:55 Uhr)
•
Sichere ProgrammierungHow I Review AI-Generated HTML Before Publishing It(29.09.2026 um 05:58 Uhr)
•
Sichere ProgrammierungAI - Weights(29.09.2026 um 05:59 Uhr)
•••
Sichere ProgrammierungCloudflare outage 2019: how one regex caused 27 minutes of 502s(29.09.2026 um 05:46 Uhr)
•
Sichere ProgrammierungHow boxr runs rootless: namespaces, a trampoline, and uid mapping(29.09.2026 um 05:47 Uhr)
••
Sichere ProgrammierungTech Stack for Thumbrella Cloud(29.09.2026 um 05:51 Uhr)
•
AI & KI NachrichtenStructured Outputs vs function calling in the OpenAI API(29.09.2026 um 05:53 Uhr)
•
Sichere ProgrammierungSMS OTP API Ownership: 6 Rate Limit Rules for SaaS Login Recovery(29.09.2026 um 05:55 Uhr)
•
Sichere ProgrammierungHow I Review AI-Generated HTML Before Publishing It(29.09.2026 um 05:58 Uhr)
•
Sichere ProgrammierungAI - Weights(29.09.2026 um 05:59 Uhr)
•
Intelligence View
⚡ tsecurity.de Intelligence

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

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 ch…

0
↗ Quelle (dev.to)
Reagiere als Erste:r — dein Feedback zählt!




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.



Index page



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.



Editing Content



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.



Browsing Media



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.





👉 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/

Ähnliche Beiträge
🔍 Verwandte News

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

Thematisch verwandte Begriffe: built, FireCMS, Clone, using · 6 Treffer

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

💬 Kommentare werden geladen…
Zum Aktualisieren ziehen
ZERO-DAY CVE-2026-101093 | Cotonti through 1.0.0 contains a cross-site request forgery vulnerabili…
Advisory →
tsecurity.de Icon
Offline-Lesen, Eilmeldungen & 0ms Ladezeit

Installiere tsecurity.de direkt auf deinen Home-Bildschirm für das ultimative Vollbild-Magazinerlebnis ohne Browser-Leisten.

Nächster Beitrag