Vrite Editor: Open-Source WYSIWYG Markdown Editor

• vrite

  23 1,637 9.3 TypeScript

  Open-source developer content platform

  

  Since Vrite (and Vrite Editor for that matter) is currently in Public Beta, new features and improvements are in active development. The best way to try it out right now is through the hosted version at app.vrite.io (free while in Beta) with better self-hosting support in the works.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• Monaco Editor

  116 40,598 8.4 JavaScript

  A browser based code editor

  

  By referencing the ProseMirror docs, forwarding the editor state back and forth, and adjusting the layout, I managed to integrate Monaco Editor — the web editor extracted from VS Code — together with Prettier (for code formatting) right into the Vrite Editor (I know, that’s a lot of editors in one place 😅).

• vite

  859 68,731 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

  Vite — build tool for putting it all together;

• unocss

  60 16,693 9.6 TypeScript

  The instant on-demand atomic CSS engine.

  

  UnoCSS — for styling with Tailwind-like atomic CSS;

• tiptap

  88 27,638 9.8 TypeScript

  The headless rich text editor framework for web artisans.

  

  No good tool is built without using good tools, and Vrite Editor is no different. Before getting into WYSIWYG editors, I extensively researched available RTE frameworks, that could provide the tooling and functionality I was looking for. Ultimately, I picked TipTap and underlying ProseMirror — IMO, the best tools currently available for all kinds of WYSIWYG editors.

• ProseMirror

  46 7,759 3.9 JavaScript

  The ProseMirror WYSIWYM editor

  

  No good tool is built without using good tools, and Vrite Editor is no different. Before getting into WYSIWYG editors, I extensively researched available RTE frameworks, that could provide the tooling and functionality I was looking for. Ultimately, I picked TipTap and underlying ProseMirror — IMO, the best tools currently available for all kinds of WYSIWYG editors.

• prettier

  472 49,506 9.7 JavaScript

  Prettier is an opinionated code formatter.

  

  By referencing the ProseMirror docs, forwarding the editor state back and forth, and adjusting the layout, I managed to integrate Monaco Editor — the web editor extracted from VS Code — together with Prettier (for code formatting) right into the Vrite Editor (I know, that’s a lot of editors in one place 😅).

• notion-auto-pull

  488 30 0.0 Shell

  Bash script to automatically download a notion workspace

  Something that I always felt was lacking in WYSIWYG editors (even the top ones, like Notion) is good support for code editing. Granted, technical writing is a niche use-case and you can get by with simple syntax highlighting and some copy-pasting. That said, I wanted to try something else — I wanted to integrate a full-blown code editor.

• marked

  65 33,283 9.4 JavaScript

  A markdown parser and compiler. Built for speed.

  

  To handle pasting block Markdown content like this, I had to tap into ProseMirror and implement a custom mechanism (though somewhat based on TipTap’s paste rules), detecting starting and ending points of the blocks and parsing them with Marked.js.

Suggest a related project