Vrite Editor: Open-Source WYSIWYG Markdown Editor

• vrite

  23 1,487 9.2 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.

• Monaco Editor

  113 38,268 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 😅).

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• vite

  787 64,769 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

Vite — build tool for putting it all together;

• unocss

  56 15,386 9.6 TypeScript

  The instant on-demand atomic CSS engine.

  

UnoCSS — for styling with Tailwind-like atomic CSS;

• tiptap

  81 23,734 9.6 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

  43 7,362 3.8 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

  440 48,241 9.8 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 😅).

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• notion-auto-pull

  484 28 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

  60 31,885 9.5 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