Wordgard: In-browser rich-text editor from the creator of ProseMirror

Join the discussion

• Hacker News
• ProseMirror is an excellent project, but it’s always been a bit awkward using it directly in React. I remember that NYT had to rewrite the renderer to make it work for their use-case.

  I wonder how Wordgard compares in this aspect!

  by haroldadmin
• That's due to the React constraints, though
  by alserio
• The people developing that left NYT and spun it out into a separate (really great!) project https://github.com/handlewithcarecollective/react-prosemirro...

  They are also working on a collaborative editing suite for ProseMirror as an alternative to TipTap https://pitter-patter.dev/

  by tefkah
• For people who have dealt with react, this part might give some insight into that topic (https://wordgard.net/docs/prosemirror/#h-transactions-and-ch...)? Nevertheless, it would be good if this could be addressed in the docs.

  I am not sure if this makes things easier for react interop, but this piece might be of interest too:

    > One of the biggest mistake blunders in ProseMirror is that the editor view does not get access to the transaction objects when updating, just the state. Wordgard does not repeat this mistake, and makes updates take transactions, not just a new state.
  
    > This means that things like the DOM update logic and UI plugins can precisely observe what happened, and handle changes in a efficient and more effective way. The weird unexpected DOM redraws that are still a thing in ProseMirror should not occur. Only the precise DOM structure affected by the new transactions will be updated.
  
  
  

  Anyways, it is great to see Merijn still going strong with his free work. Anyone needing interactive rich text on the web won't find anything better than his brain childs.
  by exceptione
• Why this over Lexical by Meta?
  by keepupnow
• Because Meta is a harmful company, for one.
  by jamwil
• I'd rather trust Marijn's design skills and extensive experience.
  by davidpapermill
• Because Meta is not the default to everything.

  I've personally been hoping for something like this for a while now. Especially a toolset that is not just targeting yet another SaaS or LLM or social media clone interface.

  I don't know if you ever used Draft.js that FB put out some time ago, but it was a horribly buggy monstrosity that was a heavy lift to move away from. One could not write several paragraphs and edit them without losing a lot of work. I wouldn't touch "Lexical" no matter the marketing they put on top. I wouldn't be half as critical if it wasn't one of the wealthiest companies on the planet known for injecting billions into black holes while they raid every area of your life they possibly can for data to be used to manipulate socio-political matters everywhere. If they're going to do that, and release open source libraries, then at least make them good enough to be seductive. They aren't.

  ProseMirror and seemingly WordGard have real thought and care put into them by people who have long made the DOM/developer experience and the writing experience priorities– not just their "mind share" for whatever dark purposes drive companies like Meta.

  by 52-6F-62
• The person who got inspired by prosemirror and built lexical is no more at meta. Go to the repository and you'll find it's already in maintenance mode. Its promise of cross platform extensible editor is unrealised yet.

  I'd pick prosemirror any day over Lexical.

  by lewisjoe
• I am so, so happy to see real art for once? It looks great.
  by azeirah
• I don't like WYSIWYG on the web. You do a long and tedious formatting of a forum post, then close the tab and it's all gone. I prefer to use a local text editor then Ctrl+V into web form. Which I can with markdown
  by jiffygist
• There are good backends available for ProseMirror and other editors. It's not hard to set them up.
  by davidpapermill
• I'm with you but many people do, simple is a side by side just like many html editors/markdown editors
  by BorisMelnik
• Any sites that have forms or editors that don't save your progress with localstorage need to leave the web and not come back.
  by keepupnow
• It depends for me. For my blog I have a web based editor, but one, that is just plain markdown with a preview. Similar to your described workflow. For a note taking app I decided to use WYSIWYG because I don't have the space for a split view and didn't want to just look at the markdown as is.

  My main gripe with WYSIWYG is that they can get in your way. When I create a verbatim block and can't leave that block anymore (looking at you Teams). I guess thats also why I enjoyed LaTeX as much as I did.

  by 8-prime
• Check out Linear, I'm not affiliated, just yesterday I happened to close the dialog by misclicking and when I pressed create issue again there was the wall of text I wrote. My point is it's not a technical problem but a product one.
  by yard2010
• I've seen this solved in some platforms with localstorage, so that it automatically saves your "draft" as you type and seamlessly restores it if you re-open the page. It was a really nice surprise the first time I experienced it (after closing a tab by mistake).
  by justusthane
• One area every editor has failed for me is a very basic one: can I type a full sentence in the editor using my iPhone?

  Wordgard failed that test. Inputs coming from autocorrect or the keyboard suggestions are swallowed and delete the partially typed/misspelled word.

  by dstaley
• Yeah I did a review of web based rich text editors a couple years ago. They all seemed fine on desktop, but on mobile every one I tried was junk. I couldn’t select. Autocorrect was broken. Tapping text didn’t move the cursor. Typing would stop working. The keyboard wouldn’t disappear when the element lost focus. And so on.

  There have been several efforts over the last couple decades to add a proper rich text element to the web. I don’t know why they have all failed - I guess it’s a large, complex and thankless task. It’s a pity. Proper native rich text support is one of the web’s big blind spots. It’s a problem native platforms have solved decades ago.

  by josephg
• ProseMirror (and as the sibling comment mention, Lexical) should handle this fine.

  Both mobile Safari and Chrome Android do a ton of weird things that their desktop siblings don't, and play loose and fast with standards, so getting things to work correctly there tends to involve a long tail of hacks. Wordgard will get there but the focus before this first release has been on architecture.

  by marijn
• The artwork on the website is beautiful! What a (forgotten) way to draw ones attention.
  by yule
• With AI slop everywhere it is extremely refreshing to see hand-drawn beautiful illustration.
  by keepupnow
• "contains 0% AI" too! This artist is awesome
  by yard2010
• ~6 years ago had a very hard time researching and implementing an @-style remote resource completion (other users and documents to reference) and the style of extensions in this editor seem very much like an evolution of prosemirror.

  I'd really appreciate it this was something built in, not something I have to build based on the dinosaurs example. Every time I need to reach for one of these text editor libraries that is my no. 1 usecase, followed by WYSIWYG.

  by mhitza
• @ mention style built in would be fabulous, just provide an API.

  As would first class mobile support.

  by CrzyLngPwd
• One thing i've struggled with with Prosemirror (via TipTap) is that I very often need to interact with JSON representation of the document programmatically to extract data from it, this means I need (okay, strongly prefer) a statically-typed representation of it.

  Prosemirror doesn't really have any mechanism to do this, so i've ended up doing one of these two things:

  1. Define the schema twice, once using Prosemirror and once using something like Zod. Then having a battery of equivalence tests to assert that the schemas match. 2. Build a meta schema definition layer that can output a Prosemirror schema, but conforms to the standard schema spec (https://standardschema.dev/), this approach is more viable if not using something like Tiptap.

  I haven't tried using Wordgard yet, so I can't tell if it does anything to address this, but just calling it out as a pain point i'd love to see solved.

  by andrewingram
• This looks staggeringly brilliant.

  I was searching for something like this recently but ended up rolling my own using a block-based OT to local server and diff sync to remote ones.

  I’m reading the system guide and nodding along. It’s super validating to see the similarities and contrasts.

  by wood_spirit
• ProseMirror (and presumably Wordgard) just gets so much right.
  by davidpapermill
• Getting that WYSIWYG editor up and running was a major stumbling block that I overcame to get my school newspaper a PHP-Nuke site ~25 years ago.

  It is insane that there isn't a web standard implementation for this passed 15 years ago.

  by mapt
• For the longest time browser vendors couldn't even agree on the details of how just text selection should work.
  by Tade0