# New ProseMirror-based web component

**URL:** <https://discuss.prosemirror.net/t/new-prosemirror-based-web-component/8932>\
**Category:** Show\
**Created:** [January 12, 2026, 6:21pm UTC](https://discuss.prosemirror.net/t/new-prosemirror-based-web-component/8932 "2026-01-12T18:21:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![stevengharris](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/stevengharris/32/4338_2.png) [@stevengharris](https://discuss.prosemirror.net/u/stevengharris)\
**Post date:** [January 12, 2026, 6:21pm UTC](https://discuss.prosemirror.net/t/new-prosemirror-based-web-component/8932/1 "2026-01-12T18:21:13Z")

</div>

I released a new ProseMirror-based [web component and API](https://stevengharris.github.io/markupeditor-base/) for WYSIWYG HTML editing. I’ve used earlier versions of this editor in some [Swift projects](https://github.com/stevengharris/MarkupEditor) for years, but the web component packaging and exposing all the customization hooks through the web component is new. I’m also using it in an [Electron-based app](https://github.com/stevengharris/markupeditor-desktop) to edit the [documentation](https://stevengharris.github.io/markupeditor-base/guide/index.html), and I have some VSCode extension work going on with it, too.

The toolbar contents, ordering, icons, etc are customizable using the `<markup-editor>` web component. I wanted the toolbar configuration to be more declarative rather than based on the schema as in prosemirror-menu. If ProseMirror users are interested in using the toolbar more broadly, I have on my to-do list to separate it out independently of the [markupeditor](https://www.npmjs.com/package/markupeditor) project.