8 ms·

Show HN: An open-source, collaborative, WYSIWYG Markdown editor

460 points by arek_nawo 3y ago

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. Some features worth highlighting: - Monaco editor and Prettier integration for code snippets - Tables (apparently the holy grail of WYSIWYG editing) - Embeds (for CodePen, CodeSandbox and YouTube, most useful for HTML or JSON exports) - Accepts Markdown paste-in, and "exports"/generates HTML, Markdown and JSON outputs - Collaboration (with real-time awareness and initial commenting system, available only when logged in) - GPT-3.5 integration (only when logged-in with the corresponding extension installed) Stack used: TipTap, Solid.js, HocusPocus, Fastify, tRPC. Some notable drawbacks: - No mobile support - Collaboration available only between signed-in users, in the same workspace; - I tried my best to support most common Markdown formatting, pasting and in-editor shortcuts, though there might still be room for improvement - Self-hosting isn't easy right now, though you should be able to figure it out from the source code The editor itself is a standalone app, extracted from the larger Vrite CMS project (https://github.com/vriteio/vrite https://github.com/vriteio/vrite) which you can also test out (only with sign-in) here: https://app.vrite.io/ https://app.vrite.io/

jitl 3y ago
> We're sorry but Vrite currently doesn't support small viewports. > Please resize your browser window or visit Vrite from a desktop browser. :( 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.
- arek_nawo 3y ago
  Sorry for that. Forgot to include it in the drawbacks. I tried the editor as-is on iOS and it wasn't a good experience. All the menus (for blocks and inline) just mess with the OS's built-in menus and aren't good for touch. I'm working on a dedicated layout for mobile, though it'll likely only go so far. For mobile it's really difficult to create a compelling WYSIWYG editor on the Web. Plus, for Vrite Editor, the Monaco Editor used for code snippets doesn't officially support mobile (and it's a hit or miss in my experience) so it'll likely have to be disabled there.
  - jitl 3y ago
    CodeMirror (from the same author as ProseMirror the library under TipTap) works great on mobile, you should consider it over Monaco for that feature.
    - arek_nawo 3y ago
      I know. I've explored pretty much all the options when working on this and Monaco and CM are definitely top choices. That said, for languages I'm working with (web) and for the future potential of e.g. connecting to remote language server, Monaco is a better choice. Will see if switching between CM on mobile and Monaco on desktop will be doable.
      - tmzt 3y ago
        How are you using TipTap with Monaco instead of ProseMirror, do you have the bindings/plugins working the same way? How does this compare to something like Milkdown using markdown as a native format? I see you solved some of the hard problems (tables, etc.) with Yjs and CRDT in general. Are the backend components also open source?
        arek_nawo 3y ago
        TipTap is built on ProseMirror. Basic elements of the editor are made in TipTap, while for more advanced use (tables, menus, integrating code editor) I had to tap into ProseMirror. I'm not really familiar with Milkdown so I can't say. The entirety of Vrite is open-source under AGPL-3.0 license (with parts under MIT): https://github.com/vriteio/vrite https://github.com/vriteio/vrite
  - Turing_Machine 3y ago
    I don't think there's really any good solution for phones... text editing is probably always going to suck there. Maybe just try your best to get it working on tablets? CodeMirror (ProseMirror's sister project) works okay on iPads, in my experience.
- paholg 3y ago
  It even shows that message if I request the desktop site. I don't care if it works well on mobile, just show render something so I can kind of play with it.
tommoor 3y ago
For those interested TipTap is doing the heavy lifting here – https://tiptap.dev/examples/default https://tiptap.dev/examples/default
- arek_nawo 3y ago
  Forgot to mention underlying ProseMirror (https://prosemirror.net/ https://prosemirror.net/) as well. It's doing "even-heavier" lifting and is necessary for implementing more complex mechanisms like the code editor integration or various side-menus.
Brendinooo 3y ago
Congrats on building and shipping something! That said, from the original document about Markdown[0]: > 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. From my experience, the benefit of Markdown is that it eliminates the need for WYSIWYG, because WYSIWYG is awful to work with. 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. [0]: https://daringfireball.net/projects/markdown/ https://daringfireball.net/projects/markdown/
- avgcorrection 3y ago
  These Wysiwyg MD editors are either very popular to make or use though. I don’t know why.
  - sbjs 3y ago
    Because I want to store my document's data in a standard text-only human-readable human-editable format, but be able to do the majority of my writing more easily and with wysiwyg which is an free, automatic and space-conservative preview.
- arek_nawo 3y ago
  I think there is use for good WYSIWYG-Markdown integration. Can't really speak for others but, when writing longer forms of content (technical blog posts, docs, etc.) Markdown becomes a bit more difficult for me to navigate. I always fallback to a visual editor (even if it's just StackEdit) and then try to somehow convert that content back to Markdown destination (which can sometimes be hard). Vrite's primary format is JSON, but with MD shortcuts, parsing on paste and parsers converting JSON to MD, I think it integrates quite nicely in most cases.
  - chii 3y ago
    > primary format is JSON the primary format is prosemirror document format, rather than JSON (even tho it is in JSON).
Palmik 3y ago
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.
- arek_nawo 3y ago
  I agree. Will consider adding that.
- DistractionRect 3y ago
  Indeed, perhaps a middle ground would be something like concealment as described/demoed in Gilles Castel's workflow [0]. This way you can see the formatted content without the tags/markdown but get access to the unformatted markdown to edit/correct. [0] https://news.ycombinator.com/item?id=19448678 https://news.ycombinator.com/item?id=19448678
- ddejohn 3y ago
  I specifically really enjoy using HackMD because you get a naked markdown editor on the left, and the rendered version on the right. I haven't used it for a while, so I'm not sure if these features have been added, but at the time I was heavily using HackMD, there was no linting/auto-formatting available in the linter, unfortunately.
HeckFeck 3y ago
Nice. I have been on the lookout for a collaboration platform to keep docs + help plan dev, will give Vrite a look as well.
- arek_nawo 3y ago
  Nice! If you have any feedback or feature requests afterwards definitely let me know on GitHub.
deleted 3y ago
[deleted]
samwillis 3y ago
Nice, building with TipTap/ProseMirror is such a joy. 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. This is one of my favourite stacks.
revskill 3y ago
I want MDX support instead.
- Wurlitzer 3y ago
  Try motif.land
- arek_nawo 3y ago
  If you decide to sign up for Vrite, it provides a JSON output accessible through the API. You can then process it to any format you want using JS SDK and Transformers. MDX doesn't make a lot of sense though as, with the supported features, it's basically the same as pure MD. That said, custom content blocks are in the pipeline and once that's added, MDX, MarkDoc and other formats will work really nicely with Vrite.
cmer 3y ago
It looks beautiful and is very user friendly. Congrats!
unshavedyak 3y ago
Tangent, but does anyone have any resources they link for writing something like this? I want to write (experiment, more likely) a thin layer over an editor for some basic highlighting of markdown stuff and a couple autocomplete-like features from the DB (ie link to existing records). I hear writing these editors over a content-editable (or whatever) field is super difficult. So.. are you aware of any good sources of information to mitigate the pain? 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.
lewisjoe 3y ago
A little dissapointed to see ProseMirror not mentioned. 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. The project is using TipTap and that is mentioned. https://prosemirror.net https://prosemirror.net
- arek_nawo 3y ago
  Yeah, my bad. Already mentioned it in one of the other comments and it's also noted in the docs. I had to tap a lot into PM to implement more advanced features so it definitely should have been included.
solarkraft 3y ago
I've been wanting this. Like an Etherpad that feels better and works on Markdown. I'll definitely have a look!
CGamesPlay 3y ago
Looks great on Chrome. It completely hangs Safari, though. Version 16.3 (17614.4.6.11.6, 17614)
- arek_nawo 3y ago
  For me Safari seems to be working fine, except some broken styling. Will try to explore more and fix what I can.
MitPitt 3y ago
Is anyone else using an internal wiki engine like Outline or Wiki.js, for their company or community? I am stuck self-hosting Outline because it has the most intuitive navigation and wysiwyg for non-IT people. I wonder if any better alternatives appeared since then.
- arek_nawo 3y ago
  I'd like to encourage you to check out Vrite as a whole. I'm actively working on this to make it better for documentation and knowledge base management. Good UI and UX are among my top priorities. There's already Kanban for better management of content production process and I'd say the editor is comparable to Outline. Other views and more editor features are on the way. Still, as I'm updating it almost daily, self-hosting isn't easy right now. I plan to have a stable version sometime in Q3 of this year, with self-hosting and more features so keep an eye out on that if you're interested.
- cmer 3y ago
  I went down that rabbit hole as well, and I also settled on Outline for our business. We haven't widely deployed it yet, but it's been working great during our limited testing. It is sorely missing robust embeds, however!
dbrgn 3y ago
Ah, the joys of contenteditable HTML elements... Such an under-specified and utterly horrible part of the web specs. 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. 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!
- twsted 3y ago
  It uses Prosemirror, which is pretty well tested.
- Turing_Machine 3y ago
  Safari is actually much better than some when it comes to contenteditable. For one, Safari (along with Chrome, Edge, Android Webview, etc.) supports the plaintext-only attribute for contenteditable, which Firefox does not. That means you don't have to worry about getting some ugly blob of broken HTML pasted into your document.
  - dbrgn 3y ago
    TIL abuot plaintext-only. Thank you, that's very useful.
    - Turing_Machine 3y ago
      You're welcome. There are some minor inconsistencies (e.g., some browsers add a normal newline when one is pasted in, while others insert a <BR>, which seems like broken behavior to me), but dealing with those inconsistencies is much easier than dealing with random chunks of HTML being pasted in.
masukomi 3y ago
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.
ch_sm 3y ago
Thanks for sharing! Looks awesome! 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.
villgax 3y ago
I want MarkDown & CSVs to just eat Microsoft's lunch at some point
erezsh 3y ago
Looks nice! I might give it a try when I get the chance. A few nitpicks: - It would be nice if exports included the metadata as comments - 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.
- arek_nawo 3y ago
  - I don't quite understand what "metadata" you're referring to? - Makes sense. These are the kind of edge cases to figure out with special blocks like code. In theory, the selection you have before enter is a block selection, which would usually remove the block when anything is inserted (enter is specifically handled to move focus to the code editor). Will consider making other characters do the same.
  - erezsh 3y ago
    > what "metadata" you're referring to Metadata as in author, tags, and such, which your app allows to add outside of the actual contents. I think it's nice to have, and even nicer if I could export/import them. Maybe support something like [this](http://fletcher.github.io/MultiMarkdown-5/metadata.html http://fletcher.github.io/MultiMarkdown-5/metadata.html) or [this](https://peterbabic.dev/blog/yaml-metadata-in-markdown/ https://peterbabic.dev/blog/yaml-metadata-in-markdown/)
YousefED 3y ago
Congrats! Having wrestled a lot with contenteditable I realize this is no easy feat. I'm building a similar library, but with a block-based (Notion style) approach, also on top of Prosemirror (see https://www.blocknotejs.org https://www.blocknotejs.org) - great to see more projects in this problem space! Welcome any feedback!
nip 3y ago
Neat! I write every blog post / documentation in Markdown, so I'll definitely be following your progress! 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 <iframe src="https://embed.simplePDF.eu/editor"> </iframe>
- arek_nawo 3y ago
  Yeah, generic embeds aren't allowed - only CodePen, CodeSandbox, and YouTube. In Vrite, all the embeds are actually processed separately when auto-publishing to different platforms (e.g. Medium, Dev.to, Hashnode), that's why I don't want to allow generic iframes. That said, I do plan to add some more embeds to the core (e.g. Twitter) but others will likely be supported through custom content blocks and extensions. That said, definitely report any feedback or feature request you have (if not as an issue then possibly as a discussion).
  - amendegree 3y ago
    interesting, I checked out the md, and it looks like you don't capture your embeds there, so the youtube embed is just gone from the markdown... I would expect it to at least show up as a link.
    - arek_nawo 3y ago
      The main output is JSON ProseMirror format. Other formats are processed from this JSON using Transformers and Vrite SDK: https://github.com/vriteio/vrite/tree/main/packages/sdk/javascript https://github.com/vriteio/vrite/tree/main/packages/sdk/java... In the GFM transformer I try to follow GitHub Flavored Markdown spec, which technically doesn't support embeds. Since I didn't find any "common" syntax to use for the embeds, I just left them out. They're still there in JSON and HTML outputs. That's one of the drawbacks of MD. That said, I plan to add an option like Markdoc, which has clearly defined spec for implementing custom blocks like embeds. That said, for now, if you sign up for the full Vrite CMS, you can create a custom Transformer and process the output so that embeds are included in your desired format. That's what I'm doing for auto-publishing extensions for platforms like Dev.to and Hashnode. I don't know what your use-case is, but I thought it's worth noting.
thekingshorses 3y ago
Yesterday, someone posted a really nice editor too. I wish one of this is available as a custom element with attributes and callbacks, and I can just use it.
- arek_nawo 3y ago
  I can see how this would be useful, though there are some options already available that can do that, e.g. Editor.js or BlockNote.js. Vrite's goal is to be more like a self-hostable writing platform/tool, so making the editor into custom element isn't really on the roadmap. If anything, it would be embeddable but not customizable, which limits possible use-cases.
WolfOliver 3y ago
funny how many layers you can put on top of prosemirror and claiming to have implemented real time collaboration.
0xbadcafebee 3y ago
I like it! I would prefer an icon bar along the top or side, rather than have to select text for the icons to show up
sergiotapia 3y ago
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!
codingdave 3y ago
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. 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. 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.
- mlajtos 3y ago
  > WYSIWYG is or is not compatible with markdow Markdown keyboard shortcuts in WYSIWYG editor works well together.
hhh 3y ago
Haven’t used it yet, any support for Mermaid diagrams?
- arek_nawo 3y ago
  Not yet, but if you like what you see and would like to see the diagrams added, please open an issue or discussion on GitHub. This will help manage things better.
bighoki2885000 3y ago
[dead]
johnwheeler 3y ago
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.
- misnome 3y ago
  > I personally find the combination of Markdown syntax with a WYSIWYG editor to be a bit odd. I can see where you are coming from in terms of wanting to stay "true" to the intention of being able to read the plain text (although it always supported the html escape hatch from the beginning), but for me personally the value is that I can write in something WYSIWIG, and drop photos/screenshots/diagrams/sketches into my notes without having to switch back and forth (or have a preview-window by the side taking double the space) - with the absolutely crucial feature that I can do so without being beholden to a single app or nonportable file format. I mainly use Obsidian for this now, but if I wanted to switch away the Obsidian-only features are small/unobtrusive enough that I wouldn't really miss them; I can edit things remotely on the terminal easily enough; and in the end the entire thing is just a git repository of markdown files.
  - deleted 3y ago
    [deleted]
- toastal 3y ago
  A lot of folks only care about the visual output of Markdown with little regard for the HTML semantics of the output or the plaintext legibility. This is why tools like these are created. Its also the audience that made READMEs no longer plaintext readable—embedded with all sorts of HTML, graphics, badges, manual table of contents, center tags, etc. Meanwhile the focus on the visual will help increase the rampant abuse of > to put a box around things instead of a semantically denoting blockquotes for quoting sources.
tomcam 3y ago
Wondering why it refuses show on an iPhone pro max? The display resolution is 2796 x 1290
d4rkp4ttern 3y ago
Skimmed the comments but didn’t see mention of : Open source — MarkText https://github.com/marktext/marktext https://github.com/marktext/marktext Not open source — Typora https://typora.io/ https://typora.io/ Open source — https://hackmd.io/ https://hackmd.io/ 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. Curious how Vrite compares with these.
- arek_nawo 3y ago
  Vrite as a whole can be referred to as a headless CMS, though it’s different compared to other tools in this category. Essentially it’s a toolkit intended primarily for technical content (like programming blogs or docs), with multiple features in one: - WYSIWYG editor focused on good UI/UX (including good support for code), and collaboration; - Kanban dashboard (and other views in the future) for managing the content and its production process; Especially useful for larger teams; - The “headless CMS” part for hosting and delivering content and related assets; This includes API and Extension system; (in the future planned additions are asset optimization and Git integration) So, tl;dr; it’s a lot more than the mention tools and I’m still looking for a way to categorize it clearly.
  - d4rkp4ttern 3y ago
    Thanks for detailing this. Does it support math(Jax)/latex/katex ?
    - arek_nawo 3y ago
      Not yet. That’s in the pipeline.

460 points by arek_nawo 3y ago

jitl 3y ago

> We're sorry but Vrite currently doesn't support small viewports. > Please resize your browser window or visit Vrite from a desktop browser. :( 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.

arek_nawo 3y ago
Sorry for that. Forgot to include it in the drawbacks. I tried the editor as-is on iOS and it wasn't a good experience. All the menus (for blocks and inline) just mess with the OS's built-in menus and aren't good for touch. I'm working on a dedicated layout for mobile, though it'll likely only go so far. For mobile it's really difficult to create a compelling WYSIWYG editor on the Web. Plus, for Vrite Editor, the Monaco Editor used for code snippets doesn't officially support mobile (and it's a hit or miss in my experience) so it'll likely have to be disabled there.
- jitl 3y ago
  CodeMirror (from the same author as ProseMirror the library under TipTap) works great on mobile, you should consider it over Monaco for that feature.
  - arek_nawo 3y ago
    I know. I've explored pretty much all the options when working on this and Monaco and CM are definitely top choices. That said, for languages I'm working with (web) and for the future potential of e.g. connecting to remote language server, Monaco is a better choice. Will see if switching between CM on mobile and Monaco on desktop will be doable.
    - tmzt 3y ago
      How are you using TipTap with Monaco instead of ProseMirror, do you have the bindings/plugins working the same way? How does this compare to something like Milkdown using markdown as a native format? I see you solved some of the hard problems (tables, etc.) with Yjs and CRDT in general. Are the backend components also open source?
      - arek_nawo 3y ago
        TipTap is built on ProseMirror. Basic elements of the editor are made in TipTap, while for more advanced use (tables, menus, integrating code editor) I had to tap into ProseMirror. I'm not really familiar with Milkdown so I can't say. The entirety of Vrite is open-source under AGPL-3.0 license (with parts under MIT): https://github.com/vriteio/vrite https://github.com/vriteio/vrite
- Turing_Machine 3y ago
  I don't think there's really any good solution for phones... text editing is probably always going to suck there. Maybe just try your best to get it working on tablets? CodeMirror (ProseMirror's sister project) works okay on iPads, in my experience.
paholg 3y ago
It even shows that message if I request the desktop site. I don't care if it works well on mobile, just show render something so I can kind of play with it.

tommoor 3y ago

For those interested TipTap is doing the heavy lifting here – https://tiptap.dev/examples/default https://tiptap.dev/examples/default

arek_nawo 3y ago
Forgot to mention underlying ProseMirror (https://prosemirror.net/ https://prosemirror.net/) as well. It's doing "even-heavier" lifting and is necessary for implementing more complex mechanisms like the code editor integration or various side-menus.

Brendinooo 3y ago

Congrats on building and shipping something! That said, from the original document about Markdown[0]: > 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. From my experience, the benefit of Markdown is that it eliminates the need for WYSIWYG, because WYSIWYG is awful to work with. 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. [0]: https://daringfireball.net/projects/markdown/ https://daringfireball.net/projects/markdown/

avgcorrection 3y ago
These Wysiwyg MD editors are either very popular to make or use though. I don’t know why.
- sbjs 3y ago
  Because I want to store my document's data in a standard text-only human-readable human-editable format, but be able to do the majority of my writing more easily and with wysiwyg which is an free, automatic and space-conservative preview.
arek_nawo 3y ago
I think there is use for good WYSIWYG-Markdown integration. Can't really speak for others but, when writing longer forms of content (technical blog posts, docs, etc.) Markdown becomes a bit more difficult for me to navigate. I always fallback to a visual editor (even if it's just StackEdit) and then try to somehow convert that content back to Markdown destination (which can sometimes be hard). Vrite's primary format is JSON, but with MD shortcuts, parsing on paste and parsers converting JSON to MD, I think it integrates quite nicely in most cases.
- chii 3y ago
  > primary format is JSON the primary format is prosemirror document format, rather than JSON (even tho it is in JSON).

Palmik 3y ago

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.

arek_nawo 3y ago
I agree. Will consider adding that.
DistractionRect 3y ago
Indeed, perhaps a middle ground would be something like concealment as described/demoed in Gilles Castel's workflow [0]. This way you can see the formatted content without the tags/markdown but get access to the unformatted markdown to edit/correct. [0] https://news.ycombinator.com/item?id=19448678 https://news.ycombinator.com/item?id=19448678
ddejohn 3y ago
I specifically really enjoy using HackMD because you get a naked markdown editor on the left, and the rendered version on the right. I haven't used it for a while, so I'm not sure if these features have been added, but at the time I was heavily using HackMD, there was no linting/auto-formatting available in the linter, unfortunately.

HeckFeck 3y ago

Nice. I have been on the lookout for a collaboration platform to keep docs + help plan dev, will give Vrite a look as well.

arek_nawo 3y ago
Nice! If you have any feedback or feature requests afterwards definitely let me know on GitHub.

deleted 3y ago

[deleted]

samwillis 3y ago

Nice, building with TipTap/ProseMirror is such a joy. 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. This is one of my favourite stacks.

revskill 3y ago

I want MDX support instead.

Wurlitzer 3y ago
Try motif.land
arek_nawo 3y ago
If you decide to sign up for Vrite, it provides a JSON output accessible through the API. You can then process it to any format you want using JS SDK and Transformers. MDX doesn't make a lot of sense though as, with the supported features, it's basically the same as pure MD. That said, custom content blocks are in the pipeline and once that's added, MDX, MarkDoc and other formats will work really nicely with Vrite.

cmer 3y ago

It looks beautiful and is very user friendly. Congrats!

unshavedyak 3y ago

Tangent, but does anyone have any resources they link for writing something like this? I want to write (experiment, more likely) a thin layer over an editor for some basic highlighting of markdown stuff and a couple autocomplete-like features from the DB (ie link to existing records). I hear writing these editors over a content-editable (or whatever) field is super difficult. So.. are you aware of any good sources of information to mitigate the pain? 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.

lewisjoe 3y ago

A little dissapointed to see ProseMirror not mentioned. 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. The project is using TipTap and that is mentioned. https://prosemirror.net https://prosemirror.net

arek_nawo 3y ago
Yeah, my bad. Already mentioned it in one of the other comments and it's also noted in the docs. I had to tap a lot into PM to implement more advanced features so it definitely should have been included.

solarkraft 3y ago

I've been wanting this. Like an Etherpad that feels better and works on Markdown. I'll definitely have a look!

CGamesPlay 3y ago

Looks great on Chrome. It completely hangs Safari, though. Version 16.3 (17614.4.6.11.6, 17614)

arek_nawo 3y ago
For me Safari seems to be working fine, except some broken styling. Will try to explore more and fix what I can.

MitPitt 3y ago

Is anyone else using an internal wiki engine like Outline or Wiki.js, for their company or community? I am stuck self-hosting Outline because it has the most intuitive navigation and wysiwyg for non-IT people. I wonder if any better alternatives appeared since then.

arek_nawo 3y ago
I'd like to encourage you to check out Vrite as a whole. I'm actively working on this to make it better for documentation and knowledge base management. Good UI and UX are among my top priorities. There's already Kanban for better management of content production process and I'd say the editor is comparable to Outline. Other views and more editor features are on the way. Still, as I'm updating it almost daily, self-hosting isn't easy right now. I plan to have a stable version sometime in Q3 of this year, with self-hosting and more features so keep an eye out on that if you're interested.
cmer 3y ago
I went down that rabbit hole as well, and I also settled on Outline for our business. We haven't widely deployed it yet, but it's been working great during our limited testing. It is sorely missing robust embeds, however!

dbrgn 3y ago

Ah, the joys of contenteditable HTML elements... Such an under-specified and utterly horrible part of the web specs. 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. 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!

twsted 3y ago
It uses Prosemirror, which is pretty well tested.
Turing_Machine 3y ago
Safari is actually much better than some when it comes to contenteditable. For one, Safari (along with Chrome, Edge, Android Webview, etc.) supports the plaintext-only attribute for contenteditable, which Firefox does not. That means you don't have to worry about getting some ugly blob of broken HTML pasted into your document.
- dbrgn 3y ago
  TIL abuot plaintext-only. Thank you, that's very useful.
  - Turing_Machine 3y ago
    You're welcome. There are some minor inconsistencies (e.g., some browsers add a normal newline when one is pasted in, while others insert a <BR>, which seems like broken behavior to me), but dealing with those inconsistencies is much easier than dealing with random chunks of HTML being pasted in.

masukomi 3y ago

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.

ch_sm 3y ago

Thanks for sharing! Looks awesome! 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.

villgax 3y ago

I want MarkDown & CSVs to just eat Microsoft's lunch at some point

erezsh 3y ago

Looks nice! I might give it a try when I get the chance. A few nitpicks: - It would be nice if exports included the metadata as comments - 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.

arek_nawo 3y ago
- I don't quite understand what "metadata" you're referring to? - Makes sense. These are the kind of edge cases to figure out with special blocks like code. In theory, the selection you have before enter is a block selection, which would usually remove the block when anything is inserted (enter is specifically handled to move focus to the code editor). Will consider making other characters do the same.
- erezsh 3y ago
  > what "metadata" you're referring to Metadata as in author, tags, and such, which your app allows to add outside of the actual contents. I think it's nice to have, and even nicer if I could export/import them. Maybe support something like [this](http://fletcher.github.io/MultiMarkdown-5/metadata.html http://fletcher.github.io/MultiMarkdown-5/metadata.html) or [this](https://peterbabic.dev/blog/yaml-metadata-in-markdown/ https://peterbabic.dev/blog/yaml-metadata-in-markdown/)

YousefED 3y ago

Congrats! Having wrestled a lot with contenteditable I realize this is no easy feat. I'm building a similar library, but with a block-based (Notion style) approach, also on top of Prosemirror (see https://www.blocknotejs.org https://www.blocknotejs.org) - great to see more projects in this problem space! Welcome any feedback!

nip 3y ago

Neat! I write every blog post / documentation in Markdown, so I'll definitely be following your progress! 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 <iframe src="https://embed.simplePDF.eu/editor"> </iframe>

arek_nawo 3y ago
Yeah, generic embeds aren't allowed - only CodePen, CodeSandbox, and YouTube. In Vrite, all the embeds are actually processed separately when auto-publishing to different platforms (e.g. Medium, Dev.to, Hashnode), that's why I don't want to allow generic iframes. That said, I do plan to add some more embeds to the core (e.g. Twitter) but others will likely be supported through custom content blocks and extensions. That said, definitely report any feedback or feature request you have (if not as an issue then possibly as a discussion).
- amendegree 3y ago
  interesting, I checked out the md, and it looks like you don't capture your embeds there, so the youtube embed is just gone from the markdown... I would expect it to at least show up as a link.
  - arek_nawo 3y ago
    The main output is JSON ProseMirror format. Other formats are processed from this JSON using Transformers and Vrite SDK: https://github.com/vriteio/vrite/tree/main/packages/sdk/javascript https://github.com/vriteio/vrite/tree/main/packages/sdk/java... In the GFM transformer I try to follow GitHub Flavored Markdown spec, which technically doesn't support embeds. Since I didn't find any "common" syntax to use for the embeds, I just left them out. They're still there in JSON and HTML outputs. That's one of the drawbacks of MD. That said, I plan to add an option like Markdoc, which has clearly defined spec for implementing custom blocks like embeds. That said, for now, if you sign up for the full Vrite CMS, you can create a custom Transformer and process the output so that embeds are included in your desired format. That's what I'm doing for auto-publishing extensions for platforms like Dev.to and Hashnode. I don't know what your use-case is, but I thought it's worth noting.

thekingshorses 3y ago

Yesterday, someone posted a really nice editor too. I wish one of this is available as a custom element with attributes and callbacks, and I can just use it.

arek_nawo 3y ago
I can see how this would be useful, though there are some options already available that can do that, e.g. Editor.js or BlockNote.js. Vrite's goal is to be more like a self-hostable writing platform/tool, so making the editor into custom element isn't really on the roadmap. If anything, it would be embeddable but not customizable, which limits possible use-cases.

WolfOliver 3y ago

funny how many layers you can put on top of prosemirror and claiming to have implemented real time collaboration.

0xbadcafebee 3y ago

I like it! I would prefer an icon bar along the top or side, rather than have to select text for the icons to show up

sergiotapia 3y ago

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!

codingdave 3y ago

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. 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. 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.

mlajtos 3y ago
> WYSIWYG is or is not compatible with markdow Markdown keyboard shortcuts in WYSIWYG editor works well together.

hhh 3y ago

Haven’t used it yet, any support for Mermaid diagrams?

arek_nawo 3y ago
Not yet, but if you like what you see and would like to see the diagrams added, please open an issue or discussion on GitHub. This will help manage things better.

bighoki2885000 3y ago

[dead]

johnwheeler 3y ago

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.

misnome 3y ago
> I personally find the combination of Markdown syntax with a WYSIWYG editor to be a bit odd. I can see where you are coming from in terms of wanting to stay "true" to the intention of being able to read the plain text (although it always supported the html escape hatch from the beginning), but for me personally the value is that I can write in something WYSIWIG, and drop photos/screenshots/diagrams/sketches into my notes without having to switch back and forth (or have a preview-window by the side taking double the space) - with the absolutely crucial feature that I can do so without being beholden to a single app or nonportable file format. I mainly use Obsidian for this now, but if I wanted to switch away the Obsidian-only features are small/unobtrusive enough that I wouldn't really miss them; I can edit things remotely on the terminal easily enough; and in the end the entire thing is just a git repository of markdown files.
- deleted 3y ago
  [deleted]
toastal 3y ago
A lot of folks only care about the visual output of Markdown with little regard for the HTML semantics of the output or the plaintext legibility. This is why tools like these are created. Its also the audience that made READMEs no longer plaintext readable—embedded with all sorts of HTML, graphics, badges, manual table of contents, center tags, etc. Meanwhile the focus on the visual will help increase the rampant abuse of > to put a box around things instead of a semantically denoting blockquotes for quoting sources.

tomcam 3y ago

Wondering why it refuses show on an iPhone pro max? The display resolution is 2796 x 1290

d4rkp4ttern 3y ago

Skimmed the comments but didn’t see mention of : Open source — MarkText https://github.com/marktext/marktext https://github.com/marktext/marktext Not open source — Typora https://typora.io/ https://typora.io/ Open source — https://hackmd.io/ https://hackmd.io/ 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. Curious how Vrite compares with these.

arek_nawo 3y ago
Vrite as a whole can be referred to as a headless CMS, though it’s different compared to other tools in this category. Essentially it’s a toolkit intended primarily for technical content (like programming blogs or docs), with multiple features in one: - WYSIWYG editor focused on good UI/UX (including good support for code), and collaboration; - Kanban dashboard (and other views in the future) for managing the content and its production process; Especially useful for larger teams; - The “headless CMS” part for hosting and delivering content and related assets; This includes API and Extension system; (in the future planned additions are asset optimization and Git integration) So, tl;dr; it’s a lot more than the mention tools and I’m still looking for a way to categorize it clearly.
- d4rkp4ttern 3y ago
  Thanks for detailing this. Does it support math(Jax)/latex/katex ?
  - arek_nawo 3y ago
    Not yet. That’s in the pipeline.