# jungwoo-an/react-editor-js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jungwoo-an-react-editor-js).**

973 stars · 78 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/Jungwoo-An/react-editor-js
- Homepage: https://codesandbox.io/s/react-editor-js-v2-34bfl
- awesome-repositories: https://awesome-repositories.com/repository/jungwoo-an-react-editor-js.md

## Topics

`editor-js` `react` `typescript-library` `wysiwyg`

## Description

This project provides a React component wrapper for a block-based rich text editor. It enables the integration of a structured content editing environment into React applications, organizing document data into modular, independent blocks for flexible manipulation and storage.

The component manages the editor instance lifecycle and facilitates state synchronization, allowing developers to use either controlled or uncontrolled data patterns. It supports extensibility through the registration of external plugins, enabling the addition of specialized formatting tools, media handling, and custom block types within the editing interface.

The library bridges imperative editing methods with declarative state management, providing access to the underlying editor instance through mutable references. This structure supports complex form data management, ensuring that structured content is captured and validated within the application environment.

## Tags

### User Interface & Experience

- [Block-Based Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-wysiwyg-editors/block-based-editors.md) — Renders a structured, block-based editing interface that supports both controlled and uncontrolled data management. ([source](https://github.com/jungwoo-an/react-editor-js#readme))
- [React Component Wrappers](https://awesome-repositories.com/f/user-interface-experience/markdown-and-syntax-highlighting/syntax-highlighting-editors/react-component-wrappers.md) — Embeds third-party editing tools into React applications while maintaining proper lifecycle and state synchronization.
- [Imperative Component Wrappers](https://awesome-repositories.com/f/user-interface-experience/react-ui-component-libraries/imperative-component-wrappers.md) — Wraps non-React library logic within a lifecycle-managed component to bridge imperative and declarative paradigms.
- [Instance Reference Management](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing/ref-forwarding/instance-reference-management.md) — Exposes the underlying editor instance via mutable references for direct programmatic control.
- [Form Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling.md) — Facilitates the integration of complex editor state into React forms for capture, validation, and submission.
- [Rich Text Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors.md) — Offers a customizable interface for creating complex document structures with support for media and plugins.

### Content Management & Publishing

- [Rich Text Authoring](https://awesome-repositories.com/f/content-management-publishing/authoring-editorial-interfaces/content-authoring-editing/document-authoring-tools/rich-text-authoring.md) — Provides an extensible environment for creating and formatting rich text documents with custom tools.
- [Structured Content Managers](https://awesome-repositories.com/f/content-management-publishing/structured-content-managers.md) — Organizes text and media into independent, reorderable blocks for cleaner content management.

### Software Engineering & Architecture

- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Supports dynamic loading of external modules to inject specialized block types and formatting tools.
- [Editor Capability Extensions](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/editor-capability-extensions.md) — Enables the addition of specialized behaviors and functional tools to the editing environment via plugins. ([source](https://github.com/jungwoo-an/react-editor-js#readme))

### Web Development

- [Controlled Component State](https://awesome-repositories.com/f/web-development/react-state-management/controlled-component-state.md) — Synchronizes internal editor state with external application state through property bindings and event interception.