TypeScript Editor

Open-source TypeScript projects categorized as Editor

Top 23 TypeScript Editor Projects

  • Visual Studio Code

    Visual Studio Code

    Project mention: How to Use ConfigCat Feature Flags with Docker | dev.to | 2023-11-30

    A code editor such as VS Code

  • quill

    Quill is a modern WYSIWYG editor built for compatibility and extensibility.

    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)

    Project mention: 5 Not-So-Typical React Libraries for an Outstanding Project | dev.to | 2023-08-03
  • Editor.js

    A block-style editor with clean JSON output

    Project mention: 5 Github Repositories To Master Next.js 😎 | dev.to | 2023-10-30

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

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

  • tiptap

    The headless editor framework for web artisans.

    Project mention: Can I create another WordPress that satisfies humanity? | dev.to | 2023-11-27

    A WYSIWYG rich-text editor using tiptap2 and Element Plus for Vue3

  • theia

    Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

    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.

  • TOAST UI Editor

    🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

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

    Website

  • 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-05

    This 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!

  • milkdown

    🍼 Plugin driven WYSIWYG markdown editor framework.

    Project mention: WYSIWYG Markdown editor? | /r/laravel | 2023-01-07

    Page: https://milkdown.dev/

  • vditor

    ♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.

  • graphql-editor

    📺 Visual Editor & GraphQL IDE.

    Project mention: Navigable graph view for any GraphQL schema | news.ycombinator.com | 2023-10-19
  • 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-01

    We 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

  • react-monaco-editor

    Monaco Editor for React.

    Project mention: Build a web editor with react-monaco-editor | dev.to | 2023-05-04

    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.

  • blocksuite

    🎨 BlockSuite is an open-source project for block-based collaborative editing.

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

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

  • regex-vis

    🎨 Regex visualizer & editor

  • core

    🚀 A framework helps you quickly build Cloud or Desktop IDE products. (by opensumi)

    Project mention: A framework helps you quickly build Cloud or Desktop IDE products | news.ycombinator.com | 2023-04-06
  • remirror

    ProseMirror toolkit for React 🎉

    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.

    [0] https://notesnook.com

    [1] https://remirror.io

  • mathquill

    Easily type math in your webapp

    Project mention: MathQuill | /r/brdev | 2023-09-23
  • Python

    This extension is now maintained in the Microsoft fork.

  • 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

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