A powerful editing tool for content creation on the web.

RangeX is a flexible, component-based WYSIWYG rich text area, built for modern web apps, docs, chat tools, and interactive interfaces of all kinds.

Feature Highlights

From seamless browser compatibility to customizable features, RangeX offers enhanced content creation.

Type-Safe, consistent

Built from scratch with TypeScript, RangeX ensures that every action is handled manually, providing consistent behavior across all browsers and devices.

Extensive External APIs

RangeX offers powerful APIs that let you fully customize the editor and its content, giving you complete control without the usual editing headaches.

Customizable components

Create and integrate custom components like mentions, code blocks, videos, images, and iframes, while also having access to built-in features such as lists and tables.

Reliability & Stability

We spend a lot of time testing to make sure every feature works just the way you'd expect—reliably and without surprises.

RangeX In Action

This demo presents RangeX's key features as a Rich Text Editor, providing an overview of its powerful capabilities for enhanced content creation.

⚠️ Heads up! This project is in active development

This is an Alpha release — things may break or change quickly as we continue to build and improve.

🧪 Note: RangeX currently supports only Chromium-based browsers (Chrome, Edge, Opera, etc.)

📋 Development Plan

Name	Description
Move from CustomElements to Virtual DOM	Improves performance and rendering consistency Enables use of standard HTML elements like `<form>`, `<img>`, and `<iframe>`
Interactive Elements Support	Adds support for elements like checkboxes, radio buttons, `<details>`, images, and more.
Floating Panels for UI Controls	Enable floating action panels for better UX, especially with block-level elements like tables or images. E.g. show a drag handle or settings icon on hover.
Syntax Highlighting & Code Formatting	Support for syntax-highlighted code blocks and auto-formatting for cleaner output.
Undo / Redo Navigation	Seamlessly step backward or forward through editing history.
Revision History View	Compare past versions of your content and track changes visually.
Keyboard Shortcuts	Common editing shortcuts like Ctrl+Z (undo), Ctrl+Y (redo), Ctrl+B (bold), and more.
Find & Replace	Quickly search and replace words or phrases throughout your content.
Export as JSON (editorToJSON)	Serialize the entire editor state into JSON, including DOM structure, styles, and attributes.
Performance Optimization	Ensure smooth performance even with very large and complex documents.
Website & Beta Launch	Launch a website with full documentation, live demos, and onboarding tutorials.
Export to PDF	Support for converting content into downloadable, print-ready PDFs.
Custom Caret Rendering	Implement a visual caret that supports animations and vertical layout navigation, solving limitations of the native browser caret.
Vim Mode	Built-in Vim keybinding support for users who prefer modal editing.
Real-Time Collaboration	Collaborative editing via both self-hosted and cloud options.
HTML Paste Support	Convert pasted HTML into editor format while preserving structure and styles.
AI Assistance	Smart AI tools for content generation, spellcheck, grammar fixes, and language detection.
Production Ready	Final stability and polish for general availability.

Frequently Asked Questions

Can't find what you're looking for? No worries! Head over to our Reddit community to ask questions, share your thoughts, or just chat with other users.

When will the beta and production releases be available?

We're aiming to release the beta version around Q2 2026, and we're hoping to be fully production-ready by Q4 2026.
However, working with contenteditable can be tricky, so things might shift.

Who's behind RangeX?

While I usually say "we" when talking about RangeX, it's actually just me right now. It's a one-person project at the moment, but I hope to grow it into something bigger in the future.

Can RangeX be used with any framework?

Yes, RangeX is fully written in TypeScript and runs inside a Shadow DOM to ensure complete isolation — no styles or logic leak in or out.

Is RangeX's interface customizable?

Definitely. RangeX is a headless rich text area by design — no UI is imposed. It provides a flexible API so you can build your own interface however you like.