Ghost Theme Editor

From shaping the idea to shipping it in hours

Ghost Theme Editor

Yesterday, I was writing notes for a backlog feature for Synaps Media called “Theme Editor”. The idea was to add a theme editor to the Synaps Media Panel, so customers can edit their theme files directly without the usual “download, unzip, edit, zip, upload” flow. This is one of the most frustrating parts of setting up a Ghost blog. So much hassle just to change the label of that “Subscribe” button.

Creating a pull request on Ghost for this felt too risky. It would be a huge PR and very unlikely to be merged. Since I now host hundreds of Ghost sites on Synaps Media, I thought at least I can help them.

I created a note titled “Theme Editor” and started listing desired features. It should allow selecting a theme, listing files, editing them, and “somehow” saving without breaking anything.

Then I continued writing, thinking out loud:

👉🏻 It would be great to make this run as a patch to Ghost Admin, right inside it, as an open source project. But I see some challenges:

* File Manager is too complicated to maintain as an open source project (Maybe another project can be used)
* Backend/UI should manage authentication with Ghost
* Backend should handle different storage types, file system or S3
* Actually, it can be a client-side only library, fetches zip file, opens on client, edit, zip and upload. All on client side... Wow!

That “wow” point was exciting. It was an “Aha!” moment.

As a veteran web developer who spent his career on the frontend, I’ve always believed in the power of client-side apps. If it fits the requirement, client-side is the most scalable approach. And web apps are the most flexible.

Downloading a zip file, decompressing it, editing it, compressing it again, and uploading the result looks challenging at first, but Web APIs and browsers have had these capabilities for years.

I validated the idea with Claude. It pointed me to JSZip for the hardest part. Then I asked it to create a detailed implementation plan. I already knew we can inject scripts into Ghost Admin via config. I also knew how theme download/upload works. I gave those constraints and asked for an implementation.

It took around 30 minutes to get the first running version on my local Ghost instance. Editing was just a textarea, but the core functionality was there. Thankfully, it didn’t generate a React app, and no signs of Tailwind (I think it knows me well enough). Pure JS and CSS.

After a few hours of iteration, I added Monaco Editor with syntax highlighting, file/folder create/rename/delete, and set up a GitHub repo and an npm package.

Monaco Editor is impressive. It leverages browser capabilities well, stays fast, and feels solid.

And here is the result:

GitHub - synapsmedia/ghost-theme-editor: Edit theme files directly inside Ghost Admin with a completely client-side editor
Edit theme files directly inside Ghost Admin with a completely client-side editor - synapsmedia/ghost-theme-editor

I like the result.

  • Way better than a platform-specific solution
  • No hacks on Ghost
  • No server-side work
  • Fast and secure

And again, I’m impressed by the speed of building this with AI. I could write this app myself, but not in a few hours. I’m not an AI fanboy, but the potential is obvious—if you use it beyond vibe coding or generating trash content. That’s a separate topic.

I hope the Ghost community and Synaps Media publishers will like this Theme Editor. Since it’s fully client-side (no server load), maybe the Ghost team can consider building something similar into Ghost Admin in the future, as well.

I expect to have more updates on the extension soon, some polishing and features according to first feedbacks.

Feel free to use and contribute.