@stefan I really love this concept, and it reminds me of a thread by @flamed on an "Easy Web": https://social.lol/@flamed/111730917308541254

I've been thinking about an easy way for people unfamiliar with HTML + CSS to easily create websites for an upcoming workshop (beyond a plain "Hello World"), and WYSIWYG Editors that bridge ease of use with visible code like the one you've shared are key! 🔑 Your implementation of GrapeJS is one of the less daunting ones I've encountered so far.

@stefan Another really fascinating example of easy WYSIWYG page creation to code is a demo of @penpot 2.0 (the open source Figma). In the upcoming release, users will be able to visually design flexbox and grid-like layouts, and then copy-paste the HTML and CSS into a code editor to build actual websites / web components.

Demo: https://www.youtube.com/watch?v=r-USvt_p46g&t=317

@stefan Ultimately, though, my dream would be to have an open-source WYSIWYG editor/web page generator like Pagy: https://pagy.co/

What I find with GrapeJS is that creating nice layouts and translating an imagined layout to page is still a bit tricky for users who aren't familiar with CSS principles (even though you do a great job of demoing the margin trick in the docs).

Unfortunately, the dev of this app doesn't have plans to add an export function, so a girl can only dream...

@stefan Maybe this is where a pre-made template/library of templates could come in (as @yianiris alludes to: https://kafeneio.social/@yianiris/112096847989482042).

Perhaps user-generated templates from existing sites?

https://stefanbohacek.online/@stefan/112101011731503904

Pre-built sections?