HN Explorer

Ask HN: What is your favorite FOSS WYSIWYG editor?

53 points by firemelt ↗ HN
Used to use trix but my current project is CMS-like, so I think I need better WYSIWYG HTML based editor

atleast I need to be as useful as wordpress article editor

for extra note I think I will built the project using ruby on rails, if anyone have stack suggestions, please tell me I will happy to have that

53 comments

[ 335 ms ] story [ 2022 ms ] thread
joshxyz
almost everything i used has bugs and edge cases.

these days i just try to stick with markdown, which is more controlled and scope-limited, albeit more targetted for technical people.

ZiiS
https://lexical.dev/ is nice.
wackget
Literally the first piece of explanatory text on their homepage and already I'm confused:

> Lexical is comprised of editor instances that each attach to a single content editable element. A set of editor states represent the current and pending states of the editor at any given time.

What does that even mean? Seriously, if this is how they introduce their product I don't even want to think about how bloated the rest of it is.

vore
What does the fluffiness of the marketing copy have to do with bloat?
DwnVoteHoneyPot
HN likes to make fun of MBAs but that description is what happens when programmers do marketing.
azangru
> that description is what happens when programmers do marketing

To me, this statement implies that developers of Lexical would be interested in maximizing their user base, as opposed to, say, attracting the right kind of users.

xigoi
What happens it that the product actually says what it does and how it works? Great, let's have more of that.
dubcanada
It means it is a WYSIWYG editor that attaches to a "single content editable element" such as a div. There is then a set of editor states (user typed hello, user backspaced 2 so now it says hel, user typed p it now says help.

I mean it's pretty easy to understand wording if you are a developer.

ch_sm
I really enjoyed working with Prosemirror/TipTap2. It‘s extremely flexible!
mkl
Have you hooked it up to Yjs for realtime collaboration? I'm about to try that. The docs (https://tiptap.dev/guide/collaborative-editing) make it seem fairly straightforward.
danielvaughn
I did it last year. Implementing the server was challenging, only because I was working with a large database of existing documents. The thing about YJS is that it's a data structure itself, which means that your document is going to be a YJS document. I remember thinking "okay so there must be a way to convert the YJS doc into html and write that to the database once the session is over." I never figured that part out, and had to do a bunch of hacky shit to get it to work.

If you're working on a greenfield project it'll probably be easier. And the integration with TipTap itself was simple. I love TipTap.

mkl
For the server, did you use hocuspocus, or something else? Mine is a greenfield project, so using Yjs's data structure as the canonical source of truth seems okay (though I expect to need some sort of indexing or something for search etc.).
danielvaughn
At the time, hocuspocus was still somewhat new and I didn't want to rely on it, but I'd be willing to revisit it again if I were you. I know that TipTap is a YC graduate so I'd assume they're going to invest heavily into hocuspocus because IIRC it's their only source of revenue.
braden-lk
I've been using Prosemirror on LegendKeeper for 5 years now. It's a challenging library to use, but there's very little you can't do with it. Chasing down cross-platform bugs is a nasty business though.
ulrischa
Use Gutenberg or a block editor like this (https://github.com/codex-team/editor.js) for a CMS. The HTML based WYSIWYG days are over.
mkl
Editor.js is WYSIWYG.
ulrischa
It is not HTML based. It generates JSON
mkl
Hm, really? It uses contenteditable. Paragraphs in the live editor are like this:

  <div class="ce-paragraph cdx-block" contenteditable="true" data-placeholder="Type text or paste a link">...</div>
Edit: it's a bit rude to edit the parts of your comments I've replied to.
ulrischa
I had no reply button only later. Sometimes HN is Strange so I edited it.
mkl
There's no reply button for the first 2 minutes or something in a busy thread, but you can get one by clicking the comment's time stamp.
ulrischa
Where is the comments timestamp?
mkl
The link in a comment's header that says "0 minutes ago", "8 hours ago", or whatever. That's how you get a direct link to a comment.
e12e
> I will buil[d] the project using ruby on rails

Not an editor, but you might want to look at:

"Modern Front-End Magic With Rails 7: A Visual Editor For Markdown (Part 1)" and part 2 (no part 3?):

https://kuy.io/blog/posts/modern-front-end-magic-with-rails-...

https://kuy.io/blog/posts/modern-front-end-magic-with-rails-...

Or just use their rail engine for blogging:

https://kuy.io/blog/posts/today-we-released-bloak-the-rails-...

https://github.com/kuyio/bloak

firemelt
that is really interesting but I think I prefer html yet I forget why I prefer HTML
e12e
If you only interact vi a wysiwyg editor - html is probably easier to deal with generate/parse/lint/clean up. As always beware of copy paste from Ms word.

Either way the article should give some ideas (ignore the markdown stuff).

warthog
Spent some time researching on this a while back

I think best bet is Lexical. It is actively maintained and simple yet extensible with a lot of things

[deleted]
(comment deleted)
Danjoe4
There isn't one.

This space has a lot of churn; a hot new project is started by a dev who claims they'll finally have "the solution" for the WYSIWYG space. Then it gets dropped after a few years. In fact many of the comments are listing archived projects no longer under development.

This is an unfortunate drawback to truly free software. The only two WYSIWYG editors I can recommend are OSS but have premium plans and premium plugins. However even their free plans are more capable than most other options. Corporate backing has upsides.

I would try TinyMCE. The docs are okay and it is a true WYSIWYG. If you're ready for the learning curve, and want to make something with virtually unlimited capabilities, CKeditor cannot be beat. The CKeditor model is a subtle abstraction you don't notice is there, unless you need it in which case it's very powerful. The documentation is incredible. The pre-built editors and plugins cover many use cases.

CPLX
Recently built a content driven rails site and chose CKeditor and would recommend it as well.
mkl
In my experience using CKeditor in Moodle, CKeditor generates invalid HTML (especially around lists) and sometimes bad HTML that does weird things like insert random spans and hardcode font sizes. I still prefer it over TinyMCE, another Moodle option, but I can't trust it to do the right thing.
extra88
Can you give examples of invalid HTML generated? I haven't had that experience with CKeditor 4 on Drupal.
mkl
The most common problem I hit is a bunch of extra close tags when working with nested lists, like this:

  <ul>
    <li>A</li>
    <li>
      <ul>
        <li>B1</li>
        <li>B2</li>
      </ul>
    </li>
  </ul>
  </li>
  </ul>
kfogel
Please consider editing the original question's headline to specify "HTML" too :-).

Otherwise a reader might think (as I did) that you're asking a question the answer to which could be LibreOffice Writer or other things like that.

ajdude
This is exactly what I thought when I saw the headline
firemelt
I have no button to edit my title sorry for the convenience
justchad
I love TipTap, easy to use and setup even with Rails. I wrote an internal gem (that I should publish) where I can generate TipTap document JSON/HTML from the Rails side of things as well.
claudiulodro
> atleast I need to be as useful as wordpress article editor

The WordPress article editor (Gutenberg) is FOSS, so you could just use that in your project. That's definitely at least as useful as the WordPress article editor! ;)

KRAKRISMOTT
https://webstudio.is/
wackget
Another utterly useless homepage which doesn't actually explain what the product is.

> "Open visual development".

OK. What is that? I assume this a tool for designers to produce mockups of websites?

> "Webstudio visually translates CSS without obscuring it".

Uh... OK? It translates CSS? Into what? Do I first write the CSS then it translates it? I thought this was a visual design tool? If I need to write CSS then what's the point of this tool?

> "We deploy your site to Cloudflare Workers".

Oh, so it's not a design tool. It's a website builder and a hosting platform? I didn't think this could get any more confusing.

> "With style sources built on top of Design Tokens, keeping your work in sync with your design system won’t feel like a burden."

What the fuck are style sources and design tokens?

...

Seriously people. If your home page can't actually explain what your product does then you have failed spectacularly.

jrm4
This doesn't exactly answer the question, but as someone who's done web stuff for years and who is an extreme fan of the GPL, nevertheless I end up using stuff like Divi and Elementor under Wordpress.

This, to me, is where the "paying for software that isn't free in either sense" has finally reached a fair equilibrium? Which is to say, thanks to the free-ness of the underlying platform -- it seems absolutely equitable to be like, "dig in and use the free but more difficult stuff that's out there, or just drop some money on this pay stuff (which you're also still generally free to hack with.)

I don't think very much software under "you can't have it unless you pay for it" is very good, but this is an exception.

starbugs
ProseMirror.

It's by far the best codebase I've seen so far with regard to web editors.

https://prosemirror.net

Another comment mentioned TipTap2. If you're using React and like abstractions, TipTap2 is a good choice in my opinion.

But I also enjoyed working with ProseMirror without another library on top.

PS: AtlasKit has a lot of boilerplate code for working with PM that makes things easier: https://atlaskit.atlassian.com/packages/editor/editor-core

lemt93
ProseMirror and CodeMirror, been using them in a project for a while, the documentation is a little bit hard to approach though, but once you got used to with all the concepts, it's just great.
curo
I've had a lot of fun working with both:

1. Lexical

2. ProseMirror/Tiptap

Both of these are very extensible, actively developed, and well-built. Tiptap is indy and pushes its pro product now (fair). Lexical is supported by meta. Pros and cons to both of these FOSS types.

65
ckeditor works for me most of the time
ulrischa
I'm bot sure if it is FOSS. Seems like Not free for commercial products
amedviediev
I've been using TipTap2/Prosemirror extensively in a side project, and I'm really happy with it so far.