TypeScript Wysiwyg

Open-source TypeScript projects categorized as Wysiwyg
Edit details
Topics: Editor Rich Text Editor React wysiwyg-editor JavaScript
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.
surveyjs.io
featured

Top 23 TypeScript Wysiwyg Projects

  • quill

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

    • Project mention: Release Radar · April 2024 Edition: Major updates from the open source community | dev.to | 2024-05-03

    Speaking of text, here's another one for you. Quill is a rich text editor also built for compatibility and extensibility. The latest version prevents mistakenly overriding theme default toolbar settings, and Quill is now a valid ESM package for better ecosystem. There's nested Quill support, improved spelling support, and improved support for pasting from Google Docs and Microsoft Word. Check out all the changes on the Slab website.

  • Editor.js

    A block-style editor with clean JSON output

    • Project mention: How I optimized Carousel for EditorJS 2x in size. | dev.to | 2024-03-29

    I am supporting a project where lawyers, advisors can publish articles or news, to get more attention and clients. Initially it was made through TinyMCE, but they wanted not just HTML, but also a way of showing many pictures with interactions. I was seeking UI editor like Medium, and I guess best what I found was EditorJS and during checking its Awesome List there were several carousel plugins and I stopped on this.

  • SurveyJS

    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.

    SurveyJS logo

  • tiptap

    The headless rich text editor framework for web artisans.

    • Project mention: Encrypted Note Editor App In React Native | dev.to | 2024-03-04

    The Editor: The core of our app is the editor. We need an easy to use and robust rich text editor, that supports all of the features we want such as: headings, lists, placeholders, markdown, color, images, bold italic etc… For this we will use @10play/tentap-editor which is a rich text editor for react native based on Tiptap.

  • lexical

    Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

    • Project mention: Quill – Your powerful rich text editor | news.ycombinator.com | 2024-04-19

    I remember using https://github.com/facebook/lexical for a project a year ago and mostly things worked our of the box.

    Any reason to prefer quill?

  • TOAST UI Editor

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

    • Project mention: UX Case Study: Markdown Heading | dev.to | 2024-04-27

    A step in that direction can be seen in TOAST UI editor:

  • TinyMCE

    The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

    • Project mention: TinyMCE (also) moving from MIT to GPL | news.ycombinator.com | 2024-03-27

    TinyMCE provided a bit more information about this change in a GitHub discussion thread here: https://github.com/tinymce/tinymce/discussions/9496

    As I posted there, this directly affects my open source project which is heavily tied to TinyMCE so I may end up forking, and reducing down to what my project needs to reduce maintenance scope & burden.

    TinyMCE have been jumping around with their licensing. They were under LGPL, with some (what I believe were) misleading guidance into meeting the LGPL (they specified rules about keeping specific branding elements). They then jumped to MIT, and since moved some of the open plugins to their commercial offering. Now they're making this change.

  • milkdown

    🍼 Plugin driven WYSIWYG markdown editor framework.

  • InfluxDB

    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.

    InfluxDB logo

  • plate

    The rich-text editor for React.

    • Project mention: What are headless UI libraries? | dev.to | 2024-03-21

    UI libraries aside, the whole headless rave has spread to packages and libraries for standalone components, headless text editors like Tiptap and Platejs, headless table components like Tanstack table, and more out there to explore.

  • vditor

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

  • craft.js

    🚀 A React Framework for building extensible drag and drop page editors

    • Project mention: Craft.js – A React Framework for building extensible drag and drop page editors | news.ycombinator.com | 2024-04-16

  • builder

    Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more

    • Project mention: Introducing GPT Crawler - Turn Any Site Into a Custom GPT With Just a URL | dev.to | 2023-12-21

    I created my first custom GPT based on the Builder.io docs site, forum, and example projects on github and it can now answer detailed questions with code snippets about integrating Builder.io into your site or app. You can try it here (currently requires a paid ChatGPT plan).

  • BlockNote

    A React Rich Text Editor that's block-based (Notion style) and extensible. 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

  • plasmic

    Visual builder for React. Build apps, websites, and content. Integrate with your codebase.

    • Project mention: A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev | dev.to | 2024-02-05

    Plasmic - A fast, easy-to-use, robust web design tool and page builder that integrates into your codebase. Build responsive pages or complex components; optionally extend with code; and publish to production sites and apps.

  • blocksuite

    🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.

    • Project mention: BlockSuite is the open-source block-based editor | news.ycombinator.com | 2023-07-26

  • 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

  • ngx-quill

    Angular (>=2) components for the Quill Rich Text Editor

  • jodit

    Jodit - Best WYSIWYG Editor for You

    • Project mention: WYSIWYG editor for a new Rails project | /r/rails | 2023-12-10

    I use https://xdsoft.net/jodit/

  • react-contenteditable

    React component for a div with editable contents

  • vrite

    Open-source developer content platform

    • Project mention: I Published This with Drag and Drop using Vrite | dev.to | 2024-03-12

    These reasons (and many others) are why I decided to create Vrite - an open-source developer content platform.

  • HyperMD

    A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

  • element-tiptap

    🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)

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

    View on GitHub

  • bangle-io

    A web only WYSIWYG note taking app that saves notes locally in markdown format.

  • tiptap-vuetify

    Vuetify editor. Component simplifies integration tiptap editor with vuetify.

  • SaaSHub

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

    SaaSHub logo
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).

TypeScript Wysiwyg related posts

  • Quill – Your powerful rich text editor

    7 projects | news.ycombinator.com | 19 Apr 2024

  • TinyMCE (also) moving from MIT to GPL

    3 projects | news.ycombinator.com | 27 Mar 2024

  • Quill: Open-source, powerful rich text editor in JavaScript

    1 project | news.ycombinator.com | 25 Mar 2024

  • What are headless UI libraries?

    1 project | dev.to | 21 Mar 2024

  • TinyMCE 7 - Revision History, Document Converters, Markdown and more!

    1 project | dev.to | 20 Mar 2024

  • Introducing EmailBuilder.js - a free and open source block-based email template builder

    2 projects | dev.to | 5 Mar 2024

  • TinyMCE Dumping MIT for GPL

    1 project | news.ycombinator.com | 29 Feb 2024
  • A note from our sponsor - InfluxDB
    www.influxdata.com | 4 May 2024
    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. Learn more →

Index

What are some of the best open-source Wysiwyg projects in TypeScript? This list will help you:

Project Stars
1 quill 41,293
2 Editor.js 26,912
3 tiptap 23,848
4 lexical 17,375
5 TOAST UI Editor 16,774
6 TinyMCE 14,383
7 milkdown 8,322
8 plate 7,866
9 vditor 7,748
10 craft.js 7,088
11 builder 6,710
12 BlockNote 5,287
13 plasmic 4,167
14 blocksuite 3,811
15 remirror 2,612
16 ngx-quill 1,738
17 jodit 1,582
18 react-contenteditable 1,577
19 vrite 1,492
20 HyperMD 1,454
21 element-tiptap 1,237
22 bangle-io 993
23 tiptap-vuetify 795

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com