🌍 Introducing editor-elsolya — A Universal Rich Text Editor for the Modern Web

After working across multiple frontend stacks, one problem kept coming back again and again:

Why do we still need a different editor for every framework?

Today, I’m excited to introduce editor-elsolya — a framework-agnostic Rich Text Editor, built as a Web Component, designed to run everywhere the web runs.

🚀 One Editor. Every Framework.

Install once:

npm i editor-elsolya

Use anywhere:

No wrappers. No framework lock-in. No compromises.

🧠 Why Web Components?

editor-elsolya is built as a native Web Component, which means:

✅ Works with React, Vue, Angular, Nuxt, Next, Svelte, Solid, Astro, and Vanilla JS

✅ Uses standard HTML & DOM APIs

✅ Zero dependency on framework internals

✅ Safe for SSR environments (Next.js / Nuxt)

✅ Future-proof by web standards, not libraries

✨ Core Features

📝 Rich Text Editing powered by contenteditable

🧩 Native Custom Element:

🔁 Two-way data flow

Get / set content via value

Listen to changes via native CustomEvent

⚡ Instant integration — no config required

🔒 Framework-independent architecture

🧠 Optional Adapters

React adapter (editor-elsolya/react)

Vue adapter with v-model support (editor-elsolya/vue)

🖥 SSR-friendly

Runs only in the browser

Safe imports on the server

🎯 TypeScript-ready

🪶 Lightweight & performant

🔌 API Overview

value: string → get / set editor HTML

disabled: boolean → enable / disable editing

Event: change

e.detail.html

Pure DOM. No framework magic.

🏗 Built for Real-World Teams

This editor is ideal for:

Teams maintaining multiple frontend stacks

Design systems & shared UI libraries

Micro-frontend architectures

SaaS platforms with evolving tech stacks

Anyone tired of rewriting editors for every framework

🛠 Architecture Highlights

Built on native Web Platform APIs

No heavy editor engines

No hidden global state

Easy to extend (toolbar, themes, plugins)

Designed for long-term maintainability

🔮 Roadmap

Coming next:

🎨 Theme & CSS variables

🖼 Image upload support

🔌 Plugin system

⚙️ Configurable toolbar

📦 Smaller bundle & tree-shaking

🤝 Open Source

This project is open for feedback, ideas, and contributions.

If you care about clean architecture, web standards, and developer experience, I’d love to hear your thoughts.

🔗 Get started

npm i editor-elsolya

One editor.

Every framework.

Built on web standards.

https://www.npmjs.com/package/editor-elsolya
لو المقاله عجبتك ممكن تدعمني هنا
https://www.linkedin.com/posts/ahmed-niazy-maher-gad-elsolya-506507394_webcomponents-javascript-typescript-activity-7420592395328614400-RTzA?utm_source=share&utm_medium=member_desktop&rcm=ACoAAGDlLhYBuSmwE3MG1I6cEGDf7QWvWr7KXcw

WebComponents #JavaScript #TypeScript #FrontendDevelopment

Frontend #WebDev #NPM #OpenSource

React #Vue #Angular #Nuxt #NextJS #Svelte #Astro

MicroFrontends #DesignSystems #SSR

DeveloperExperience #SoftwareEngineering

ContentEditable #UIComponents #BuildInPublic