Here’s a quick and messy preview of what I’ve been working on in my spare time lately - a Ghost-compatible page builder!
What? Grapesjs-based drag and drop builder that generates HTML & CSS, then transfers it over to Ghost (as an HTML card in a page).
When can we try it? Well, not this week. It’s a bit glitchy, and I don’t have nearly enough building blocks yet.
Will it work on Ghost Pro / for self-hosters? Yep. It’ll just need an API key, or you can cut and paste if you’re on a no-integrations plan.
Why’s your headshot in the corner of the video? Because I was using Zoom as a cheap screen recorder, and I forgot it does that. sigh.
Can the content be edited in Ghost later? The builder produces fairly clean HTML that it puts into a Ghost HTML card, so it won’t be terrible to change a few words. But it’ll probably be easier to go back to the builder, make the changes, and copy the page over to Ghost again.
Will it work in any theme? Pretty much. If your theme’s page template has a sidebar or something, you may need a custom blank template or some code injection, but I’m aiming for high cross-theme compatibility.
Does it simply update the HTML of a target page? This is indeed can be very helpful. Some of my clients are asking how to make a text centered, or an image left aligned. My last advice was using an online WYSIWYG editor, make your style there, copy and paste HTML to a HTML card. But for many non-technical people, this looks like a total non-sense. And it was already on my list to provide a smoother solution for that kind of needs. I mean, I think connecting a more flexible visual HTML editor to Ghost to edit pages or posts externally, is a simple but good idea.
Do you already have a plan about how to publish this? As an open-source tool or as a service? I would like to contribute in both ways.
Because HTML → Ghost Lexical is lossy (and won’t put up with fancy landing page layouts), I’m wrapping the whole thing in an html card, but yes, I’m updating the html of the page when the save button is clicked. So it’s would largely be a choice: build in the page builder or build it in the Ghost editor. (No one wants to edit html in the Ghost editor - ugh.)
I’m thinking that the majority of folks who will want it will be non-technical enough that it needs to be a hosted solution.
Various thoughts:
Getting enough components to be useful is probably the biggest barrier. I’m not an amazing designer, so I’m leaning on existing appropriately-licensed landing pages and components. But of course, those parts don’t always play well together without some work.
I can drop basic html into the builder pretty easily.
Fancy components like carousels and sliders need some special handling to make them actually editable in the builder, and functional after export to Ghost.
It’d be super cool if the builder could let theme creators could offer theme-specific blocks. Maybe your theme license includes builder access, and you provide some styles that look great with your theme to people who’ve bought it. [There’s no reason I couldn’t allow import of custom components also. It’d be json with html inside.]
How well the built page is going to work with themes is going to depend on the theme a bit. Ideally, the deployed landing page might pick up the colors, fonts, border styles, etc that the theme is using already. But since we have no common set of css variables that all themes use, that adds some complexity.
Fancy components like carousels and sliders need some special handling to make them accessible and usable. They are like the Sirens in Homer’s Odyssey - they are SO attractive but so dangerous. Don’t use them for anything you want people to click on.
