Semantic Editors in JavaScript – Lets keep that Code Clean! (2026)

22. September 2026

Development / Content Creation / Content Managment / HTML5 / Javascript

.SHARE

If you’ve ever tried to style text in a classic WYSIWYG editor and ended up with HTML that looks like a spaghetti disaster, you’ve already met the reason semantic editors exist. All those nested <span> tags, inline styles and fake lists are the opposite of clean content, and they’re a nightmare to store, query or render consistently.

A semantic editor flips the model. It cares about what the content is — a heading, a paragraph, a list — not just how it looks on screen. The output is structured and machine-friendly, usually clean HTML or JSON that maps to a real document schema. That’s what this article is about: the editors that keep your content sane.

A lot has moved since the last version of this guide. Tiptap shipped a major version 3 with better TypeScript, server-side rendering and JSX support, the block-editor layer has matured into its own category, and — the big one — both CodeMirror and ProseMirror moved their development off GitHub to self-hosted Forgejo instances, leaving archived mirrors behind. Let’s dig in.

What Exactly Are Semantic Editors?

A semantic editor focuses on structure and meaning, not presentation. Instead of injecting endless inline styles or random wrapper tags, it produces clean, meaningful output:

Headings are real headings. A <h2> stays an <h2>, not a bolded paragraph with a bigger font size.
Lists aren’t simulated with divs. Ordered and unordered lists come out as real <ul> and <ol> elements.
Blocks represent meaningful units. Content is modelled as structured nodes, so you can reason about it programmatically.
Data is stored cleanly. Output is usually valid HTML or schema-validated JSON, ready for a database or an API.
Separation of content and design. The editor describes the document tree; your CSS decides how it looks.

In short: semantic editors help you ship tools that both machines and humans understand. That’s the whole pitch.

The 2026 Landscape at a Glance

Here’s where the main players stand right now. Stars and download figures are pulled from GitHub and the npm registry in September 2026.

Editor	Version	GitHub stars	Weekly npm downloads	Output model	Maintenance
ProseMirror	1.42.x	8.7K (meta repo)	~15.2M	Schema-based JSON + HTML	High
Tiptap	3.31.3	38.5K	~13.6M	ProseMirror schema	High
Lexical	0.51.0	23.9K	~4.0M	Node graph	High
Slate	0.126.x	31.7K	~2.0M	Nested JSON	Medium
BlockNote	0.54.2	10.2K	~427K	Block JSON (on ProseMirror)	High
Plate	53.3.x	16.6K	~270K	Slate JSON	High
Milkdown	7.22.1	11.9K	~260K	ProseMirror + Markdown	High
Editor.js	2.31.7	32.0K	~217K	JSON blocks	Medium
Remirror	3.0.2	3.0K	~59K	ProseMirror	Medium
Novel	1.0.2	16.4K	~48K	Tiptap JSON	Low
Yoopta Editor	6.0.5	3.1K	~9K	Block JSON	Medium
Isolated Block Editor	2.30.0	408	~0.8K	Gutenberg block JSON / HTML	Medium

The theme is consolidation. Almost everything interesting in 2026 sits on top of one of two foundations — ProseMirror or Slate — or goes its own way like Meta’s Lexical. And note the download numbers: ProseMirror’s core packages pull in more than 15 million downloads a week, mostly because they power Tiptap, BlockNote, Milkdown and friends under the hood.

The Core Engines

1. ProseMirror — the schema-driven heavyweight

ProseMirror is the engine most modern editors are built on, and for good reason. It uses a strict, schema-driven document model where you define exactly what counts as a paragraph, how bold or italic behave, how nodes nest, and which marks are allowed. Nothing enters the document that your schema doesn’t permit, which is why its output stays so clean.

The trade-off is a real learning curve. You’re assembling an editor from parts — prosemirror-model, prosemirror-state, prosemirror-view and friends — and you write your own toolbar and UI. In return you get a plugin system that can modify almost any aspect of the editor, a clean separation between document state and rendering, excellent performance on long documents, and a huge ecosystem of extensions.

npm install prosemirror-model prosemirror-state prosemirror-view

1	npm install prosemirror-model prosemirror-state prosemirror-view

import { Schema } from "prosemirror-model";
import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";

const schema = new Schema({
  nodes: {
    doc: { content: "block+" },
    paragraph: { group: "block", content: "inline*" },
    text: { group: "inline" },
  },
});

const view = new EditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    schema,
    doc: schema.node("doc", null, [
      schema.node("paragraph", null, [schema.text("Hello ProseMirror")]),
    ]),
  }),
});

import { Schema } from "prosemirror-model";

import { EditorState } from "prosemirror-state";

import { EditorView } from "prosemirror-view";

const schema = new Schema({

nodes: {

doc: { content: "block+" },

paragraph: { group: "block", content: "inline*" },

text: { group: "inline" },

});

const view = new EditorView(document.querySelector("#editor"), {

state: EditorState.create({

schema,

doc: schema.node("doc", null, [

schema.node("paragraph", null, [schema.text("Hello ProseMirror")]),

]),

}),

});

One thing worth knowing in 2026: ProseMirror’s maintainer moved development off GitHub to a self-hosted Forgejo instance, so the GitHub repositories are now read-only archives. The project is as active as ever — the npm packages are released constantly — but don’t be alarmed by the archived banner if you go looking.

Perfect for: custom editors where the rules of the document matter — CMS editors, knowledge bases, long-form tools and technical documentation platforms.

2. Tiptap — ProseMirror for the rest of us

Tiptap takes ProseMirror’s power and wraps it in a friendlier, developer-first package. It’s fully headless, so you bring your own UI — React, Vue, Svelte or plain JavaScript — and it stays framework-agnostic underneath. This is the editor I’d hand to most teams first.

2026’s Tiptap 3 is a substantial release: first-class TypeScript, server-side rendering support, JSX handling and a reworked extension API. It’s at 3.31.3 with around 38.5K stars and roughly 13.6 million weekly downloads, making it the most popular editor framework in this whole list. The catch is that the good stuff beyond the open core — real-time collaboration, comments, AI — lives in the paid Pro extensions, so check the licensing before you commit.

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

1	npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

import { Editor } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";

const editor = new Editor({
  element: document.querySelector("#editor"),
  extensions: [StarterKit],
  content: "<p>Hello Tiptap</p>",
});

// Structured JSON straight out of the editor
const json = editor.getJSON();

import { Editor } from "@tiptap/core";

import StarterKit from "@tiptap/starter-kit";

const editor = new Editor({

element: document.querySelector("#editor"),

extensions: [StarterKit],

content: "<p>Hello Tiptap</p>",

});

// Structured JSON straight out of the editor

const json = editor.getJSON();

Perfect for: teams who want ProseMirror’s document model without writing ProseMirror from scratch, and anyone who needs a friendly API across multiple front-end frameworks.

3. Lexical — Meta’s node-based contender

Lexical is built by Meta and used in Messenger and WhatsApp Web, which tells you it’s been stress-tested at scale. It uses a node-based architecture where every element in the editor is a semantic object in a stable state tree, and its immutable editor state makes updates predictable.

It’s at 0.51.0 with around 23.9K stars and roughly 4 million weekly downloads. Highlights include excellent React integration, a lightweight core that stays fast even on complex documents, plugins for history, lists, code blocks and Markdown shortcuts, and fully configurable custom nodes. If you’re building a complex editor inside a React app and you want something leaner than ProseMirror, Lexical feels like home.

npm install lexical @lexical/react @lexical/rich-text @lexical/list

1	npm install lexical @lexical/react @lexical/rich-text @lexical/list

import { createEditor } from "lexical";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import { ListItemNode, ListNode } from "@lexical/list";

const editor = createEditor({
  namespace: "MyEditor",
  nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode],
  onError: (error) => console.error(error),
});

// Serialize the document state to JSON
const json = editor.getEditorState().toJSON();

import { createEditor } from "lexical";

import { HeadingNode, QuoteNode } from "@lexical/rich-text";

import { ListItemNode, ListNode } from "@lexical/list";

const editor = createEditor({

namespace: "MyEditor",

nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode],

onError: (error) => console.error(error),

});

// Serialize the document state to JSON

const json = editor.getEditorState().toJSON();

Perfect for: React-heavy applications that need stability and performance without pulling in the entire ProseMirror learning curve.

4. Slate — the flexible component-driven engine

Slate is the other big foundation. Instead of being strictly schema-driven, it stores documents as nested JSON trees, which makes it easy to represent custom block types, inline elements and complex structures that don’t fit a rigid schema. You get full control over how every node renders, and it leans heavily on React components — each element can be its own component.

At 0.126.x with around 31.7K stars and roughly 2 million weekly downloads, Slate is mature but still pre-1.0, so expect the occasional breaking change. It’s the engine under Plate, which is why it still shows up in a lot of modern React editors.

npm install slate slate-react

1	npm install slate slate-react

import { useState } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";

const initialValue = [
  { type: "paragraph", children: [{ text: "Hello Slate" }] },
];

export default function Editor() {
  const [editor] = useState(() => withReact(createEditor()));
  return (
    <Slate editor={editor} initialValue={initialValue}>
      <Editable />
    </Slate>
  );
}

import { useState } from "react";

import { createEditor } from "slate";

import { Slate, Editable, withReact } from "slate-react";

const initialValue = [

{ type: "paragraph", children: [{ text: "Hello Slate" }] },

];

export default function Editor() {

const [editor] = useState(() => withReact(createEditor()));

return (

</Slate>

);

}

Perfect for: bespoke, component-driven editors where you need total control over how every piece of content renders.

Block Editors and Abstraction Layers

The biggest shift since 2025 is that most people no longer want to build on a bare engine. They want blocks, a ready-made UI, and an opinionated content model out of the box.

5. BlockNote — Notion-style blocks, ProseMirror underneath

BlockNote is a block-based editor with a Notion-like experience and a clean JSON document model. Under the hood it’s ProseMirror, but you get a polished toolbar, slash menu, drag handles and theming for free. It’s at 0.54.2 with around 10.2K stars and roughly 427K weekly downloads.

import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";

export default function Editor() {
  const editor = useCreateBlockNote();
  return <BlockNoteView editor={editor} />;
}

import { useCreateBlockNote } from "@blocknote/react";

import { BlockNoteView } from "@blocknote/mantine";

import "@blocknote/mantine/style.css";

export default function Editor() {

const editor = useCreateBlockNote();

return <BlockNoteView editor={editor} />;

}

Perfect for: shipping a modern block editor fast, when you want the ProseMirror engine without the ProseMirror build-out.

6. Plate — Slate plus shadcn/ui and AI

Plate is a rich-text framework for React built on Slate, now with AI and shadcn/ui-style components. It ships as composable plugin packages, so you assemble exactly the editor you want from primitives and styled components. It’s at 53.3.x (Plate versions fast) with around 16.6K stars and roughly 270K weekly downloads.

import { createPlateEditor } from "platejs/react";
import { ParagraphPlugin } from "@platejs/basic-nodes/react";

const editor = createPlateEditor({
  plugins: [ParagraphPlugin],
});

import { createPlateEditor } from "platejs/react";

import { ParagraphPlugin } from "@platejs/basic-nodes/react";

const editor = createPlateEditor({

plugins: [ParagraphPlugin],

});

Perfect for: React teams already invested in the shadcn/ui ecosystem who want a plugin-based, Tailwind-friendly editor and don’t mind Slate’s learning curve.

7. Milkdown — Markdown-first, ProseMirror-powered

Milkdown is a plugin-driven WYSIWYG Markdown editor built on ProseMirror. It’s a great fit for docs and note-taking tools where Markdown is the source of truth but you still want a live editing experience. It’s at 7.22.1 with around 11.9K stars and roughly 260K weekly downloads, and it’s actively developed.

import { Editor } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";

await Editor.make().use(commonmark).create();

import { Editor } from "@milkdown/kit/core";

import { commonmark } from "@milkdown/kit/preset/commonmark";

await Editor.make().use(commonmark).create();

Perfect for: Markdown-native products — documentation sites, note apps and knowledge bases.

8. Editor.js — the clean JSON block editor

Editor.js is the block-style editor that outputs structured JSON, and it’s been doing this for years. Each piece of content — heading, paragraph, image, table — is its own block with its own data and its own plugin, so there’s no noisy HTML to clean up. It’s at 2.31.7 with around 32K stars and roughly 217K weekly downloads.

import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";

const editor = new EditorJS({
  holder: "editor",
  tools: { header: Header, list: List },
});

// Structured JSON out
const data = await editor.save();

import EditorJS from "@editorjs/editorjs";

import Header from "@editorjs/header";

import List from "@editorjs/list";

const editor = new EditorJS({

holder: "editor",

tools: { header: Header, list: List },

});

// Structured JSON out

const data = await editor.save();

Perfect for: blogs, landing pages and modular content systems where you want to store clean JSON and render it your own way.

9. Remirror — the ProseMirror toolkit

Remirror is a ProseMirror-based toolkit with a strong React focus and a large set of pre-built extensions. It’s smaller than the leaders — around 3K stars and roughly 59K weekly downloads, with a slower release cadence — but it’s a solid choice if you like its extension ergonomics.

Perfect for: React teams who want ProseMirror with a batteries-included extension kit, and don’t mind a smaller community.

10. Yoopta Editor — a lighter block editor

Yoopta Editor is a newer, plugin-based block editor built in TypeScript with its own JSON model. It’s early in its life — around 3.1K stars and roughly 9K weekly downloads — but it’s worth a look if you want something between BlockNote and building on a bare engine.

Perfect for: greenfield projects that want a lightweight, extensible block editor and are happy to be early adopters.

11. Isolated Block Editor — Gutenberg, untethered

The Isolated Block Editor by Automattic is the WordPress Gutenberg editor repackaged to run outside WordPress. You get the familiar block editing experience — toolbar, inspector panels, reusable blocks, patterns — as a standalone JavaScript module you can embed anywhere, with no PHP or WordPress required. It’s at 2.30.0 and is genuinely niche (a few hundred downloads a week), but if you already know and love Gutenberg, nothing else feels like it.

import { IsolatedBlockEditor } from "@automattic/isolated-block-editor";
import "@automattic/isolated-block-editor/build-browser/core.css";

new IsolatedBlockEditor(document.querySelector("#editor"), {
  iso: { preferencesKey: "my-editor" },
});

import { IsolatedBlockEditor } from "@automattic/isolated-block-editor";

import "@automattic/isolated-block-editor/build-browser/core.css";

new IsolatedBlockEditor(document.querySelector("#editor"), {

iso: { preferencesKey: "my-editor" },

});

Perfect for: teams who want the Gutenberg block experience inside a non-WordPress app — and see my article on integrating it with Elementor if that’s your world.

12. Novel — the Notion-style Tiptap starter

Novel is a Notion-style WYSIWYG editor built on Tiptap with AI-powered autocompletions, and it’s popular for a quick start — around 16.4K stars. Be aware, though: the repository hasn’t seen a commit since January 2025, so treat it as a template to learn from and fork rather than a dependency to rely on. For a maintained Notion-style experience, Tiptap’s own Notion-like UI templates are a better bet.

Perfect for: copying the architecture of a slick AI-powered block editor into your own project — not for pinning as a long-term dependency.

Special-Purpose and Historical Editors

Semantic Math Editor

Math is its own universe, full of symbols and structure that don’t translate well into standard HTML. The Semantic Math Editor approached this by producing structured math expressions with a visual editing UI and exports to MathML and JSON. It’s a lovely idea for academic and scientific tools, but the project hasn’t been touched since 2022, so it’s a conceptual reference now rather than a live recommendation. For new work, look at MathLive or KaTeX alongside a mainstream editor.

WYMeditor and Semantic-Editor-JS — the ancestors

WYMeditor is the spiritual ancestor of this whole category. Its philosophy — show the structure of the document, not its presentation, and produce clean XHTML — was exactly right. But the repository was archived in 2018 and the project is dead. The same goes for Semantic-Editor-JS, a contentEditable-based semantic editor whose last npm release was version 0.0.10 back in 2016.

I’m keeping them in this list for historical context, because they articulated the semantic idea long before it was fashionable. But please don’t build on them in 2026 — ProseMirror, Tiptap, Lexical and their descendants do everything they did, better and with a maintainer behind them.

How to Choose the Right Semantic Editor

Forget feature checklists for a second and match the editor to the job:

Maximum control over the document model: ProseMirror. Expect to build your own UI.
A sane default for most teams: Tiptap. It’s ProseMirror’s power with a friendlier API and more downloads than anything else here.
React app, lean and fast, no ProseMirror: Lexical.
Custom component-driven structures: Slate, or Plate if you want it pre-assembled for React.
Notion-style blocks out of the box: BlockNote.
Clean JSON blocks for a CMS or blog: Editor.js.
Markdown is the source of truth: Milkdown.
You already love Gutenberg: the Isolated Block Editor.
Math-heavy content: pair a mainstream editor with MathLive or KaTeX; the old Semantic Math Editor is not maintained.

And here’s the semantic-strength comparison, refreshed for 2026:

Editor / Framework	Semantic strength	Output model	Ideal use case
ProseMirror	Very high	Schema-based JSON + HTML	Complex custom editors, long-form content tools
Tiptap	Very high	ProseMirror schema	Modern editors with flexible UI frameworks
Lexical	High	Node graph	React apps needing stability and performance
Slate	High	Nested JSON trees	Bespoke component-driven editors
BlockNote	High	Block JSON (ProseMirror)	Fast Notion-style block editing
Plate	High	Slate JSON	React + shadcn/ui plugin editors
Milkdown	High	ProseMirror + Markdown	Markdown-first documentation and notes
Editor.js	Medium–High	JSON blocks	Structured blog content, modular pages
Remirror	High	ProseMirror	React teams wanting a batteries-included ProseMirror
Isolated Block Editor	High	Gutenberg block JSON / HTML	Standalone Gutenberg-style editing outside WordPress

My recommendation, the bottom line: start with Tiptap unless you have a specific reason not to. It gives you ProseMirror’s schema-driven cleanliness with an API you’ll actually enjoy, and it works across frameworks. Reach for bare ProseMirror when you need total control, Lexical when you’re all-in on React, and BlockNote or Editor.js when you want blocks and don’t want to build them.

Implementation Tips That Save You Pain

1. Think schema-first

The reason semantic editors produce clean output is that they refuse to store anything their model doesn’t understand. Lean into that. Define your nodes and marks up front, decide what’s allowed where, and let the editor reject everything else. It’s the single biggest difference between a tidy content pipeline and a junk drawer of pasted markup.

2. Sanitize on the server, always

Any editor that can produce HTML can produce malicious HTML, and rich text is one of the classic cross-site scripting vectors. Never trust client output: sanitize with something like DOMPurify on the way in and the way out, and add a Content Security Policy as a second layer. If you store JSON instead of HTML, you still need to sanitize the moment you render it.

import DOMPurify from "dompurify";

// Never render editor HTML without this
const clean = DOMPurify.sanitize(editorHtml);

import DOMPurify from "dompurify";

// Never render editor HTML without this

const clean = DOMPurify.sanitize(editorHtml);

3. Get collaboration architecture right early

Real-time collaboration is where projects go to die if they didn’t plan for it. The two families are operational transformation (OT), which ProseMirror’s ecosystem has historically used, and CRDTs, which power tools like Yjs and Automerge. CRDTs make conflicts mathematically impossible but cost memory; OT keeps documents small but puts more logic on your server. Decide which model you need before you pick persistence, because retrofitting multiplayer into a single-user design is brutal.

4. Render server-side for SEO

Semantic editors give you a document model, not a rendered page. To keep content crawlable and fast, render the stored JSON or HTML to markup on the server (or at build time) rather than shipping an empty shell and hoping a crawler waits for your editor to boot.

5. Treat accessibility as a feature, not a checklist

Because these editors produce real headings, real lists and real structure, they start from a much better place for screen readers and keyboard users than the old div-soup editors. Keep that advantage: render semantic markup, don’t override it with presentation-only tags, and test the editing experience with a keyboard and a screen reader, not just a mouse.

Glossary

Semantic editor: An editor that models content by meaning and structure — headings, paragraphs, lists — rather than visual appearance, and outputs clean HTML or structured JSON.
Schema: The rules describing which nodes and marks a document may contain and how they nest. ProseMirror is schema-driven; Slate is less strict and stores nested JSON trees instead.
Headless editor: An editor that ships the editing logic but no UI, leaving the toolbar, menus and styling entirely up to you. Tiptap is the best-known example.
Node / block: A single semantic unit of content in the document tree — a paragraph, a heading, an image, a table. Block editors like Editor.js and BlockNote are built entirely around them.
Operational transformation (OT): A collaboration technique where concurrent edits are rewritten against each other so they converge. Traditionally used in the ProseMirror ecosystem.
CRDT: Conflict-free Replicated Data Type. A data structure that merges concurrent edits automatically, making conflicts mathematically impossible. Used by Yjs and Automerge.
WYSIWYM: What You See Is What You Mean — the philosophy behind semantic editors and WYMeditor’s name. You edit meaning and structure, and let styling follow from that.

FAQ

What is a semantic editor in JavaScript?

A semantic editor focuses on the structure and meaning of content rather than its visual appearance. It models content as real headings, paragraphs and lists, and outputs clean HTML or structured JSON instead of inline styles and wrapper tags. ProseMirror, Tiptap, Lexical and Editor.js are all examples.

Why should I use a semantic editor instead of a traditional WYSIWYG editor?

Traditional WYSIWYG editors generate messy, presentation-heavy HTML that is hard to store, search or render consistently. Semantic editors produce structured output that is easier to maintain, cheaper to process programmatically, and far friendlier to APIs, search engines and assistive technology.

Which semantic editor should I choose in 2026?

Start with Tiptap for most projects, since it wraps ProseMirror in a friendly, framework-agnostic API. Choose bare ProseMirror when you need total control over the document model, Lexical for a lean React app, and BlockNote or Editor.js when you want block-based editing without building it yourself.

Is ProseMirror still maintained now that its GitHub repositories are archived?

Yes. ProseMirror moved its development off GitHub to a self-hosted Forgejo instance, so the GitHub repositories are read-only archives. The project is very much alive: prosemirror-view gets around 15 million npm downloads a week and the packages are released regularly.

Should I use Tiptap or ProseMirror?

Tiptap is built on ProseMirror, so you get the same schema-driven document model with a higher-level, friendlier API and ready-made extensions. Choose Tiptap unless you need to work directly with ProseMirror internals, in which case use ProseMirror itself. Note that Tiptap’s collaboration and AI features are commercial extensions.

Tiptap or Lexical, which is better for React?

Both work well with React. Tiptap is framework-agnostic and gives you a huge extension ecosystem on top of ProseMirror, while Lexical is Meta’s leaner, standalone engine with excellent React integration. Pick Lexical if you want a smaller core and don’t need the ProseMirror ecosystem, and Tiptap if you value extensions and cross-framework flexibility.

Do semantic editors support collaborative editing?

Yes, most do, either natively or through integrations. ProseMirror and Tiptap work with both operational transformation and CRDTs, and Slate integrates with libraries like Yjs. Decide between OT and CRDTs early, because retrofitting real-time multiplayer into a single-user design is painful.

Do semantic editors output clean HTML or JSON?

It depends on the editor. ProseMirror and Tiptap can output both schema-validated JSON and clean HTML, Lexical produces a node-based JSON tree, Slate stores nested JSON, and Editor.js emits structured JSON blocks. JSON is generally easier to store and transform, while HTML is ready to render.

Do semantic editors improve SEO and accessibility?

They help, because they produce real semantic HTML like headings and lists rather than presentation-only markup, which search engines and screen readers understand. That said, you still need to render the stored content server-side for crawlers and test the editing experience with assistive technology.

Can I create custom blocks or nodes in these editors?

Absolutely, and it is usually the main reason to choose them. ProseMirror and Tiptap let you define custom nodes and extensions, Lexical has configurable custom nodes, Slate lets you dictate how every element renders, and Editor.js and BlockNote make custom blocks first-class.

Are semantic editors safe from XSS?

Not automatically. Any editor that produces HTML can produce malicious HTML, so you must sanitize output on the server, typically with DOMPurify, and add a Content Security Policy. Storing JSON instead of HTML helps, but you still need to sanitize at the moment you render it.

Is WYMeditor still a good choice?

No. WYMeditor’s semantic philosophy was ahead of its time, but its repository was archived in 2018 and the project is dead. Modern editors like ProseMirror, Tiptap and Lexical do everything it did, are actively maintained, and have real ecosystems behind them.

Sources

Editor Documentation and Repositories

Legacy and Special-Purpose Projects

Collaboration and Security

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

Email and IMAP Backups in 2026: The Best Free and Open Source Tools for Mac, Linux, Windows and Docker

Backup / Automation / Communication / Deployment / Design / Development / Email / Email

FAQ What is the best free open source way to back up IMAP email? For most people, mbsync (isync) pulls IMAP into a local Maildir reliably on Linux, macOS and Windows via WSL, and imap-backup does the same job with an easier cross-platform setup and no config-file syntax to learn. Pair whichever you choose with […]

Keyboards, Mice and Trackballs for Developers (2026 Guide)

Communication / Consulting / Design / Development

Your keyboard and pointing device are the two tools you touch more than anything else on your desk — more than your monitor, more than your editor. A developer types for a living, and after enough years of it, the wrong keyboard and mouse stop being a minor annoyance and start being a wrist problem […]

The Best Desks, Standing Desks and Office Chairs for Your Homelab and Home Office in Europe (2026 Guide)

Communication / Consulting / Design / Development

If you’re a developer in Europe who works from home and runs a homelab, your chair and desk are the two pieces of hardware you touch more than any server, keyboard or monitor. You’ll spend thousands of hours in that seat, and a scary amount of expensive gear is going to live on that desk. […]

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

Semantic Editors in JavaScript – Lets keep that Code Clean! (2026)

Table of Contents

What Exactly Are Semantic Editors?

The 2026 Landscape at a Glance

The Core Engines

1. ProseMirror — the schema-driven heavyweight

2. Tiptap — ProseMirror for the rest of us

3. Lexical — Meta’s node-based contender

4. Slate — the flexible component-driven engine

Block Editors and Abstraction Layers

5. BlockNote — Notion-style blocks, ProseMirror underneath

6. Plate — Slate plus shadcn/ui and AI

7. Milkdown — Markdown-first, ProseMirror-powered

8. Editor.js — the clean JSON block editor

9. Remirror — the ProseMirror toolkit

10. Yoopta Editor — a lighter block editor

11. Isolated Block Editor — Gutenberg, untethered

12. Novel — the Notion-style Tiptap starter

Special-Purpose and Historical Editors

Semantic Math Editor

WYMeditor and Semantic-Editor-JS — the ancestors

How to Choose the Right Semantic Editor

Implementation Tips That Save You Pain

1. Think schema-first

2. Sanitize on the server, always

3. Get collaboration architecture right early

4. Render server-side for SEO

5. Treat accessibility as a feature, not a checklist

Glossary

FAQ

What is a semantic editor in JavaScript?

Why should I use a semantic editor instead of a traditional WYSIWYG editor?

Which semantic editor should I choose in 2026?

Is ProseMirror still maintained now that its GitHub repositories are archived?

Should I use Tiptap or ProseMirror?

Tiptap or Lexical, which is better for React?

Do semantic editors support collaborative editing?

Do semantic editors output clean HTML or JSON?

Do semantic editors improve SEO and accessibility?

Can I create custom blocks or nodes in these editors?

Are semantic editors safe from XSS?

Is WYMeditor still a good choice?

Sources

Editor Documentation and Repositories

Legacy and Special-Purpose Projects

Collaboration and Security

RELATED POSTS

Email and IMAP Backups in 2026: The Best Free and Open Source Tools for Mac, Linux, Windows and Docker

Keyboards, Mice and Trackballs for Developers (2026 Guide)

The Best Desks, Standing Desks and Office Chairs for Your Homelab and Home Office in Europe (2026 Guide)

Alexander

.series

.highlights

.series

.highlights