🌍 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
Top comments (0)