Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev. Learn more →
Top 23 TypeScript Editor Projects
-
A code editor such as VS Code
-
Project mention: You don't need a CRDT to build a collaborative experience | news.ycombinator.com | 2023-11-16
I agree. Yes, you can. Quill is the example here.
Actually, back in 2015 when we started prototyping CKEditor 5, we started with this approach as well. Our goal from the beginning was to combine real-time editing capabilities with an engine capable of storing and rendering complex rich-text structures (nested tables, complex nested lists, other rich widgets, etc.). We quickly realized that a linear structure is going to be a huge bottleneck. In the end, if you want to represent trees, storing them as a linear structure is counterproductive.
So, we went for a tree model. That got many things in the engine an order of magnitude harder (OT being one). But I choose to encapsulate this complexity in the model rather than make it leak to particular plugins.
In fact, from what I remember, https://github.com/quilljs/quill/issues/117 (e.g. https://github.com/quilljs/quill/issues/117#issuecomment-644...) is a good example of issues that we avoided.
I also talked to companies that built their platforms on top of Quill. One of them ended up gluing together countless Quill instances to power their editor and overcome the limitations of the linear data model but is now looking for a way to rebuild their editor from scratch due to the issues (performance, complexity, stability).
So, yes. You can implement a rich-text editor based on a linear model. But it has its immediate limitations that you need to take into consideration.
-
Appwrite
Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.
-
slate
A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)
-
Editorjs [https://editorjs.io/]
-
AFFiNE
There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.
Project mention: Quasi Self-Hosted Quasi Open Source Notion Alternatives from Asia (SiYuan, Affine, AppFlowy) | /r/selfhosted | 2023-11-11Affine.Pro - MPL Licensed - their unique selling point is the ability to switch between text and whiteboard view for the same page: https://github.com/toeverything/AFFiNE
-
A WYSIWYG rich-text editor using tiptap2 and Element Plus for Vue3
-
Project mention: Theia an Open, Flexible and Extensible Cloud and Desktop IDE Platform | news.ycombinator.com | 2023-11-28
-
InfluxDB
Collect and Analyze Billions of Data Points in Real Time. Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
-
Project mention: I'm making a GlowUI text editor to get back into coding | /r/Windows11 | 2023-06-09
If you need a WYSIWYG markdown editor you can try Toast UI Editor or simply use Markdown Live add-on for Visual Studio Code
-
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
Project mention: Join the TinyMCE Challenge at the online API World + AI DevWorld Hackathon 2023 | dev.to | 2023-10-10Website
-
react-page
Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.
Project mention: Show HN: An open source visual editor for React | news.ycombinator.com | 2023-09-05This is really slick! A really fluid and intuitive interface.
We use https://react-page.github.io/ (also MIT licensed) extensively at my startup; it attacks the same problem, and it's been incredibly effective (and hackable!).
Generally speaking, owning your own CMS data, in your own database, with a well-documented JSON data format, and adding the ability to take any React component you've written (that itself may interact with your own data) and make it not only reusable as part of a content editing system but also WYSIWIG, opens up a huge number of opportunities - including adding your own logic to transform content before display.
https://builder.io is another alternative that's very effective at the adapting-custom-components-to-WYSIWIG side of things, but does keep the data in its own cloud storage.
I'm really excited to see innovation in this space, and I'll be following Puck closely!
-
Page: https://milkdown.dev/
-
vditor
♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
-
-
yn
A highly extensible Markdown editor. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, Reveal.js, plug-in, and macro replacement.
Project mention: Yank Note: A Hackable Markdown Editor for Programmers | news.ycombinator.com | 2023-04-09 -
BlockNote
A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
Project mention: Launch HN: Tiptap (YC S23) – Toolkit for developing collaborative editors | news.ycombinator.com | 2023-08-01We think the headless approach is a big factor in why Tiptap has become so popular, but you are right! You can't just add Tiptap to your project without styling. That's why we're always asked about a drop-in Notion-like styling. We don't offer this, but our community has built something that might help you: https://github.com/TypeCellOS/BlockNote
-
The react-monaco-editor package was the first package available for embedding with React and is still actively maintained. However, it requires you to make various webpack changes which are very inconvenient, especially when working with React. This has made the package decline in popularity, as shown by the number of weekly downloads compared to the @monaco-editor/react package.
-
Project mention: BlockSuite is the open-source block-based editor | news.ycombinator.com | 2023-07-26
-
monaco-react
Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins
Project mention: Building a JSON to Typescript converter with React, NodeJS and ChatGPT 🚀 | dev.to | 2023-03-13Monaco Editor for React is a simple package for adding code editors to React apps, and the React Copy to Clipboard package allows us to copy and paste contents via a button click.
-
-
Project mention: A framework helps you quickly build Cloud or Desktop IDE products | news.ycombinator.com | 2023-04-06
-
Project mention: Launch HN: Tiptap (YC S23) – Toolkit for developing collaborative editors | news.ycombinator.com | 2023-08-01
We have been using Tiptap in production for more than a year in Notesnook[0]. Glad to see it finally launching here on HN!
We have had quite a long and rough ride in search of a stable rich text editor. We began with Quill.js then migrated to TinyMCE and then finally settled on Prosemirror. Unfortunately, contenteditable is still absolutely horrible on web browsers, especially mobile ones.
Tiptap is a good choice if you are looking for a framework agnostic and thin abstraction over Prosemirror. However, if you are primarily working with React you should go with Remirror[1]. Tiptap's APIs are heavily inspired by Remirror (almost a duplicate in some places). Remirror takes the edge on the maturity and stability of the API and extensions. The sheer number of utilities offered by them to simplify Prosemirror's APIs is astounding.
In the end, though, its Prosemirror that's doing all the heavy lifting. And no matter how many abstractions you put on it, you will have to get really, really close in with Prosemirror's internals. Tiptap or Remirror do not make that any easier or harder aside from the initial bootstrapping.
-
-
-
Onboard AI
Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2023-11-30.
TypeScript Editor related posts
- How to Use ConfigCat Feature Flags with Docker
- The Most Upvoted Visual Studio Code Feature
- Theia an Open, Flexible and Extensible Cloud and Desktop IDE Platform
- give a thumbs up if you want to see this: Sticky scroll for the file explorer #194903
- You don't need a CRDT to build a collaborative experience
- How to Resolve Merge Conflicts Using the Merge Editor Feature on VS Code
- Navigating JavaScript Waters: Your Friendly Guidebook
-
A note from our sponsor - Onboard AI
getonboard.dev | 30 Nov 2023
Index
What are some of the best open-source Editor projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Visual Studio Code | 153,325 |
| 2 | quill | 37,538 |
| 3 | slate | 28,205 |
| 4 | Editor.js | 24,980 |
| 5 | AFFiNE | 23,563 |
| 6 | tiptap | 22,075 |
| 7 | theia | 18,554 |
| 8 | TOAST UI Editor | 16,479 |
| 9 | TinyMCE | 13,716 |
| 10 | react-page | 9,305 |
| 11 | milkdown | 7,951 |
| 12 | vditor | 7,139 |
| 13 | graphql-editor | 5,899 |
| 14 | yn | 5,112 |
| 15 | BlockNote | 4,052 |
| 16 | react-monaco-editor | 3,487 |
| 17 | blocksuite | 3,077 |
| 18 | monaco-react | 3,022 |
| 19 | regex-vis | 2,696 |
| 20 | core | 2,614 |
| 21 | remirror | 2,487 |
| 22 | mathquill | 2,478 |
| 23 | Python | 2,065 |
Learn any GitHub repo in 59 seconds
Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
getonboard.dev