Inspired by the design and UI/UX of apps like Notion, and utility of open-source apps like StackEdit, I decided to create a minimalistic, local-only WYSIWYG Markdown editor.<p>Some features worth highlighting:<p>- Monaco editor and Prettier integration for code snippets<p>- Tables (apparently the holy grail of WYSIWYG editing)<p>- Embeds (for CodePen, CodeSandbox and YouTube, most useful for HTML or JSON exports)<p>- Accepts Markdown paste-in, and "exports"/generates HTML, Markdown and JSON outputs<p>- Collaboration (with real-time awareness and initial commenting system, available only when logged in)<p>- GPT-3.5 integration (only when logged-in with the corresponding extension installed)<p>Stack used: TipTap, Solid.js, HocusPocus, Fastify, tRPC.<p>Some notable drawbacks:<p>- No mobile support<p>- Collaboration available only between signed-in users, in the same workspace;<p>- I tried my best to support most common Markdown formatting, pasting and in-editor shortcuts, though there might still be room for improvement<p>- Self-hosting isn't easy right now, though you should be able to figure it out from the source code<p>The editor itself is a standalone app, extracted from the larger Vrite CMS project (<a href="https://github.com/vriteio/vrite">https://github.com/vriteio/vrite</a>) which you can also test out (only with sign-in) here: <a href="https://app.vrite.io/" rel="nofollow noreferrer">https://app.vrite.io/</a>
Congrats on building and shipping something!<p>That said, from the original document about Markdown[0]:<p>> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.<p>From my experience, the benefit of Markdown is that it eliminates the need for WYSIWYG, because WYSIWYG is awful to work with.<p>Put those two things together, and it's weird for me to see Markdown used like this. Not saying it's wrong or bad or whatever, just that it's weird and seems to cut against the spirit of the thing.<p>[0]: <a href="https://daringfireball.net/projects/markdown/" rel="nofollow noreferrer">https://daringfireball.net/projects/markdown/</a>
Ah, the joys of contenteditable HTML elements... Such an under-specified and utterly horrible part of the web specs.<p>I'm sure you had a lot of fun fighting Safari in general, and also the diverging handling between Chromium and Firefox (for example when pressing the Enter key). Even just changing certain CSS properties on the root editor element will cause the resulting markup on certain key inputs to be different.<p>I admire that you pulled it off, and hope that you have a big collection of cross-browser integration tests for catching all the regressions that will inevitably happen :) Good luck!
> We're sorry but Vrite currently doesn't support small viewports.<p>> Please resize your browser window or visit Vrite from a desktop browser.<p>:( although I get it. In my experience Android and to a lesser degree iOS input is the hardest part of building these kinds of editors.
Nice, building with TipTap/ProseMirror is such a joy.<p>Not mentioned (but inferred from TipTap + HocusPocus, the guys that originally built both are awesome BTW) this is using the Yjs CRDT (conflict free replicated datatypes) library and its bindings to ProseMirror to provide the underlying realtime collaborative system. Again absolute joy to work with these tools.<p>This is one of my favourite stacks.
It would be great if there was a mode that allows you to see the full markdown syntax (while still applying formatting implied by the markdown). I personally find it strange to remove / add invisible characters.
A little dissapointed to see ProseMirror not mentioned.<p>It's an amazing rich-text editing toolkit that provides all the bits and pieces needed to write any kind of rich-text editor. Tiptap is a wrapper over ProseMirror for minimizing the vast API surface and providing simpler configurations.<p>The project is using TipTap and that is mentioned.<p><a href="https://prosemirror.net" rel="nofollow noreferrer">https://prosemirror.net</a>
Thanks for sharing! Looks awesome!<p>If it’s Markdown however, in my personal opinion, it should show the Markdown syntax, too, and not hide it. E.g. the headlines should have the editable ### next to them. Too many editors that "support" Markdown get this wrong. Can’t find the link now, but John Gruber agrees.
Skimmed the comments but didn’t see mention of :<p>Open source —
MarkText <a href="https://github.com/marktext/marktext">https://github.com/marktext/marktext</a><p>Not open source —
Typora <a href="https://typora.io/" rel="nofollow noreferrer">https://typora.io/</a><p>Open source —<p><a href="https://hackmd.io/" rel="nofollow noreferrer">https://hackmd.io/</a><p>I’ve used all three, the first two are are WYSIWYG. All are collaborative. HackMD has a nice two window editor that renders MD as you type.<p>Curious how Vrite compares with these.
I've been working on content management systems for pretty much my entire career since the 90s, so I've seen my fair shares of editors. I understand the comments that markdown is incredible, as well as those that that markdown is horrid, that WYSIWYG is or is not compatible with markdown, etc.<p>At the end of the day, different users have different preferences and different use cases have different needs. This should not be news to anyone who works in software.<p>So I'd venture that this particular editor is definitely an atypical mix of possibilities, but there probably is an audience for it. And while I'm not currently in that audience, I am interested in where this goes over time as OP gets feedback and evolves the idea.
Tangent, but does anyone have any resources they link for writing something like this? I want to write <i>(experiment, more likely)</i> a thin layer over an editor for some basic highlighting of markdown stuff and a couple autocomplete-like features from the DB <i>(ie link to existing records)</i>.<p>I hear writing these editors over a content-editable <i>(or whatever)</i> field is super difficult. So.. are you aware of any good sources of information to mitigate the pain?<p>Note that this would, i believe, be an entirely ground up write. As i'll probably experiment writing it in Rust. Rather than building on top of existing solutions like Prosemirror/etc.
I understand the motivation behind creating a local-only WYSIWYG Markdown editor, but I can't help but feel conflicted about it. Markdown was designed to prioritize simplicity and readability, allowing documents to be published as plain text without any markup clutter. Introducing a WYSIWYG editor seems to contradict the essence of Markdown itself. While I appreciate the effort and consideration for different use cases, the combination of Markdown syntax with a WYSIWYG editor strikes me as odd. However, everyone has their own preferences, so perhaps there is a balance to be found between simplicity and flexibility. Keep exploring and iterating, and who knows, you might discover the sweet spot that works for you and your users.
Is anyone else using an internal wiki engine like Outline or Wiki.js, for their company or community?<p>I am stuck self-hosting Outline because it has the most intuitive navigation and wysiwyg for non-IT people.<p>I wonder if any better alternatives appeared since then.
you say that the editor is a standalone app, but i'm not seeing a link to that anywhere, only to vrite itself. also no mention of how to get the editor separately (or that that's even a thing) on the vrite readme.
Neat! I write every blog post / documentation in Markdown, so I'll definitely be following your progress!<p>Do you accept "embed" requests? I tried embedding an Iframe but it did not work (instead displayed a code-editor view) and would happily join the list of embeds with SimplePDF<p><pre><code> <iframe src="https://embed.simplePDF.eu/editor">
</iframe></code></pre>
Congrats! Having wrestled a lot with contenteditable I realize this is no easy feat.<p>I'm building a similar library, but with a block-based (Notion style) approach, also on top of Prosemirror (see <a href="https://www.blocknotejs.org" rel="nofollow noreferrer">https://www.blocknotejs.org</a>) - great to see more projects in this problem space! Welcome any feedback!
Congrats on the launch! Unfortunate name clashing with Vite. I'm afraid Google will autocorrect to "Did you mean Vite?" a lot. I wouldn't name something "Rhails" for the same reason. If you change the name maybe you get much better SEO so your cool project has better reach!
Looks nice! I might give it a try when I get the chance.<p>A few nitpicks:<p>- It would be nice if exports included the metadata as comments<p>- When I move my cursor over a code block, any key I press that isn't Enter will erase it, when really I just want to enter the code block and start writing. If I wanted to delete it, I could press del/backspace.
For those interested TipTap is doing the heavy lifting here – <a href="https://tiptap.dev/examples/default">https://tiptap.dev/examples/default</a>
Yesterday, someone posted a really nice editor too.<p>I wish one of this is available as a custom element with attributes and callbacks, and I can just use it.