
GrapesJS – Free and Open Source Web Builder Framework - quickthrower2
https://grapesjs.com/
======
kilburn
I'm impressed by this builder. It is without any doubt an awesome technical
achievement. However, I don't picture who will be using it in this form:

a) It feels too advanced for non-technical users. Flex properties, CSS
classes, weird px/vh units, etc.. It just seems very hard to understand for
non-technical users.

b) For technical users it just feels... clumsy. It is hard to pinpoint the box
you want to change, it is hard to move things around, it is hard to find the
property you want, etc.. I can't imagine myself using this editor over any of
the several awesome "css toolkits" and their pre-made templates/widgets
(bootstrap, bulma, uikit, etc.).

Does anyone here have experience on a project done with this editor (or
something similar) where the client ended up actually using and appreciating
it?

~~~
manigandham
There's a giant market for these tools. It's a common misconception that
"technical user" means someone who deals with code but that's just a narrow
subset.

Have you seen Photoshop these days? Or illustrator, indesign, after effects,
or any other graphics and layout tools? They're not exactly simple and require
the same kind of technical skills as coding up some HTML. Visual products are
usually best created using visual tools and the success of Squarespace, Wix
and Webflow seems to show that this trend is only increasing for websites.

~~~
kilburn
> There's a giant market for these tools.

I'm sure it sells and people would pay for it. What I'm not so sure about is
whether it actually works (in the sense that people end up using it and
creating sensible pages they're proud to own). This is why I asked for some
anecdata about happy clients.

> Have you seen Photoshop these days? Or illustrator, indesign, after effects,
> or any other graphics and layout tools?

I haven't seen any layout tool that felt anywhere nearly as good and/or
practical to use as photoshop is for editing graphics or InDesign is to
prepare documents/flyers/etc. The problem of the modern web is that a well-
built page should work from a cellphone all the way up to big desktop screens.
IMHO this is an unsolved problem for all GUI tools still.

Lastly, "technical user" doesn't need to mean "deals with code", except when
"dealing with code" is the most efficient approach to reach a professional
result. Just like CAD people use their program's built-in console all the
time, I would argue that producing professional websites pretty much requires
fiddling with html/css (and even some javascript) nowadays.

~~~
manigandham
It works given the success of the companies I quoted. People dont keep paying
and using tools that dont work.

Websites are just a different kind of complexity in a constantly changing
environment that hasn't had good tools so far, especially if that tool itself
is a webapp, which I think only further creates demand for these kind of
projects to exist and get better.

~~~
kilburn
All of your examples have huge collections of templates and employ lots of
wizard-guided steps that land you to a pretty generated page to get started.
These are _much_ easier to use than the "power-editor" showcased here.

How do you know that people actually care about the "power-editor" and aren't
just paying for that (and domain registration, hosting, maintenance)?

~~~
manigandham
Have you seen Webflow?
[https://webflow.com/designer](https://webflow.com/designer)

Designers and agencies building sites is their main customer base.

~~~
kilburn
Well, this has been a surprise for me. I must concede that Webflow feels much
better than GrapesJS, both in general polish and in functionality. I do see a
class of power users (agencies, designers) using that now.

Let's hope that GrapesJS can reach that level of utility and polish someday.
Kudos to the authors and my best wishes for Graphes' future!

------
ioulian
I literally thought about this idea a few days ago and haven't found anything
for Bulma.css so I created a quick mockup on codepen [0]. But I see this is
much more advanced.

Do you use a frontend framework like Bootstrap or Foundation or is it a custom
implementation?

The reason why I'm asking is that basically we want to prototype the layout
with an existing framework, export it and then extend it later in the backend.

This tool is perfect if you want to create a single page or a html email, but
if you want to build the whole frontend for a big app or site, you want to use
an existing framework that's widely supported (if of course you want to use a
framework)...

Great job otherwise! I see myself using it for specific projects

[0]
[https://codepen.io/yulian/full/rRNxJx](https://codepen.io/yulian/full/rRNxJx)
(still work in progress)

~~~
tmikaeld
Check out PineGrow (Offline) and Webflow (Partly data-driven) too, it's quite
impressive what they can do.

I've built a site builder 5 years ago for a client using Semantic UI, it was a
great choice for data-driven sites but hard for custom sites (which pinegrow
and webflow are more suited for).

Many site-builders these days grow their own framework to ensure a lock-in
effect, you can't move the site off the platform because it takes too much
work to re-bind the data and functionality (Especially eCommerce).

~~~
ioulian
As far as I've seen, these tools are indeed useful. But you are right about
the lock-in. I think this is perfect for non-developers (of small budgets),
allows them to create a "basic" website, but sometimes you just require
another framework.

------
thrownaway954
Posted about this project little over a year ago. Nice to see it getting some
attention again. I noticed that the author also created a hosted service based
off the project similar to Wix which is awesome so he doesn't have to depend
on donations.

Worth mentioning that this project has a HUGE test suite:
[https://github.com/artf/grapesjs/tree/dev/test/specs](https://github.com/artf/grapesjs/tree/dev/test/specs)

Also worth mentioning... his github avatar is hilarious:
[https://avatars2.githubusercontent.com/u/11614725?s=400&v=4](https://avatars2.githubusercontent.com/u/11614725?s=400&v=4)

------
sjroot
The website says "Featured on YCombinator" which might lead people to believe
this was a YC funded project. Is it? If not, I believe there are rules against
using their branding in that way.

That said, this is a nice tool. I was going to ask how it differentiated from
WebFlow, but it is open source. It is nice to see more tools in this area.

~~~
ams6110
I've seen this here at least once before, but agree that an appearance on HN
should not be used to imply a YC endorsement.

------
andybak
I'd love something like this that I can build into a CMS backend. I haven't
dug too deeply here but my primary requirement is along the lines of:

"Can I massively lock things down, remove features and simplify things to the
absolute bear minimum?"

I always want to provide "just enough" functionality in this area to do the
job. Any more results in training and support costs and gives content editors
more footgun ammunition.

~~~
blotter_paper
>"Can I massively lock things down, remove features and simplify things to the
absolute bear minimum?"

I feel like a CMS generally gets too complicated after the first three or four
bears, but if you only have one bear protecting your datums it may get lonely
and eat them out of boredom; I'd recommend two as the bear minimum.

~~~
andybak
Thanks. I really must figure out how to get comment reply notifications on HN.
That was I might have spotted this in time before my comment was locked for
editing.

~~~
tibu
Did you find the solution?

------
chrismorgan
The text on this page is the most invisible I’ve seen for at least a couple of
years. It’s both unreasonably light (#606c71) and _absurdly_ thin (Quicksand
300, which is actually more like a 100 weight). _Completely_ unsuitable for
body text—I’d say it’s unsuitable for anything below about 50px at any colour,
and you wouldn’t catch me using it there, either.

------
dillondoyle
This is great! I am seriously considering using this. My company does email
marketing, and most of our staff who do email have limited tech skills (which
with email is ok we teach them to keep it simple, obviously dont need js or
anything). But I always notice mistakes in putting correct url params, styling
quirks, syntax/order problems. I'm seriously considering using this and
building custom components to give super use-case specific email newsletter
elements - and ONLY those options. And I like the concept of storing simple
plain text -> json -> template, so we can integrate into our existing
analytics & eventually build out more tracking & automation into the
process(copy -> approvals -> html email).

My biggest concern just from reading docs is styling. I see a custom CSS
parser.

My question is if you have real test usage for actual widely deployed html
email? Like very minimal email specific styling, inline styles, render testing
etc.

Any tips or things you've learned if you have real html email examples? I am
seriously considering diving in and trying this out and bumping this project
up higher on my 'value creation' list!

------
wayneftw
Good luck with this, it looks great! Thanks for making it.

Some feedback on the demo:

\- There are no tooltips for the little buttons in the blue border-tab on the
top right of the selected element. I hate clicking things to find out what
they do.

\- The first thing I tried to do to adjust the height of the selected box was
to drag the bottom border. I wish that would have worked.

\- When I adjusted the height in the properties panel to the right, I tried to
press the keyboard-up arrow. That should work, just like in chrome devtools.

\- When I clicked the up arrow inside the property input to move the height
off of `auto`, the first place it went was to 0px. Instead, I think it should
have calculated the current height and used that as the starting point.

Sorry I didn't take the time to enter all of these on GitHub.

------
seanwilson
The icons used to illustrate the different flex properties are great. I find
the naming in pure CSS super unintuitive e.g. align-content, justify-content,
align-self, flex-start.

~~~
andreareina
Are you talking about the {1,1/2,1/3,3/7} Section icons? Or is there something
else that I missed?

------
nailer
Awesome, but there's no grid support (yet). I'm currently using:

    
    
        nav, header, article, section, form, div, q {
          display: grid;
        }
    

For my current project and it works really well. Would love to play with
Grapes in future though.

~~~
tmikaeld
I've found that flexbox is even more flexible (no pun intended) for making
grids.

~~~
franey
One of the things I like most about CSS grid is being able to rearrange
template areas for responsive design. Using flexbox inside a grid template
area gives us the best of both worlds.

~~~
tmikaeld
Aah, I hadn't tested grid since it was introduced - yeah, it's definitely the
best of both! I wish the support was higher than 87% though, but it's
certainly coming :-)

------
darepublic
like the idea but not impressed with the demo, it is hard to move things
around where I want them. I want the ui to let me position components to any
position I'd like, and then translate the layout into clean html/css for me.

~~~
stronglikedan
Boy, have I got just the product for you! [0] Oh, wait, you said, " _clean_
html/css". /s

[0]
[https://www.adobe.com/products/dreamweaver.html](https://www.adobe.com/products/dreamweaver.html)

------
minionslave
Any association with [https://github.com/unlayer/react-email-
editor](https://github.com/unlayer/react-email-editor)

They same to use the same code.

------
duiker101
I feel like the UI is very similar to Webflow, which in some way is similar to
Photoshop... I quite like that! Is there any library with components like
that?

------
eaglehead
This is pretty cool. Is there something like this for building "slides" like
powerpoint decks?

~~~
chris_st
I've used www.slides.com to make and show (pretty simple) presentations, and
it's quick and easy for just that.

I've seen pb.goandmake.app but haven't tried it yet. There are probably
others...

------
iSnow
Does this have some kind of YAML/JSON serialization format so the result could
be exported?

------
thedangler
Curious, did webflow clone this project and turn it into a business? UI is
very similar.

~~~
agilebyte
Webflow has been around since earlier than 2016 _, it may be the other way
round.

_
[https://github.com/artf/grapesjs/commit/69cfec68bd5202a1fbc3...](https://github.com/artf/grapesjs/commit/69cfec68bd5202a1fbc349976938704bf1dbb80c)

