Stefan BohacekAn idea I'm playing with: A tool that lets you build a basic HTML page, and shows you how to host it for free.
candide.xyz@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.
fLaMEd (@[email protected])
📝 New Post: An Easy Web. Jumping on internet discourse again 🔥 https://flamedfury.com/posts/an-easy-web/ #web #webdev #blog #indieweb
@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.
Penpot 2.0 sneak peek: new CSS Grid Layout & Components coming soon!
@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?
yianiris (@[email protected])
This is a great idea, many get trapped starting with big commercial "free" sites then get blackmailed and pushed-around to buy services (blogspot, wordpress.com, .. etc) Maybe take it a step further and create a css style sheet sampling, where you have a simple page, with a table, an image, some headers, and how the same page would look with choice of simple free style sheets. Nice, good work! @[email protected]
@candide This looks great!
The Studio version of GrapesJS looks pretty nice too: https://studio.grapesjs.com/
I'm just not seeing much information about it online, so I'm not sure if this is the next version of their editor, or something that's separate, maybe even paid.
