React Page

react-page is a browser-based visual content editor and schema-driven page builder developed with React and TypeScript. It provides a framework for creating web pages through a what-you-see-is-what-you-get interface, utilizing a responsive twelve-column grid engine for arranging elements via drag-and-drop manipulation.

The system features a plugin-based architecture that allows for the integration of custom components. These components are managed through a schema-driven system that automatically generates data entry forms based on predefined property definitions, separating the rendering view from the control interface.

The editor includes capabilities for rich text editing and content history management with undo and redo functionality. To support performance and search engine optimization, it includes a workflow for generating static HTML on the server by removing the interactive editor interface.

Features

Page Builders - Provides a complete visual page building system that automatically generates data entry forms from component schemas.

WYSIWYG Editors - Provides a visual what-you-see-is-what-you-get interface for creating and modifying web pages directly in the browser.

Schema-Driven Headless CMS - Enables the development of tailored content management systems using custom editable components and schema-driven forms.

Plugin-Based Architectures - Implements a modular plugin system to extend editor functionality with custom rendering views and control interfaces.

Visual Page Editors - Allows users to modify the layout and content of a rendered web page in real time using a visual interface.

Custom Component Extensions - Allows the integration of arbitrary custom components into the editor as plugins with automated form generation.

Content Plugin Systems - Provides a system for defining editable components through a combination of rendering views and schema-driven control interfaces.

Editor Extension Frameworks - Implements an extensible architecture for building editable components with separate rendering and control interfaces.

Fixed Grid Layouts - Provides a fixed twelve-column responsive grid for arranging content via coordinate-based cell positioning.

Schema-Based Generators - Automatically generates data entry forms by mapping component property definitions to standardized input controls.

Grid Layout Engines - Provides a twelve-column visual engine for arranging web page elements using drag-and-drop cell manipulation.

Responsive Design - Organizes web content using a responsive grid system with drag-and-drop layout manipulation.

Grid Layout Systems - Uses a twelve-column responsive grid system that enables content arrangement via drag-and-drop cell manipulation.

WYSIWYG Rendering Engines - Displays the live content structure directly in the browser to align the authoring experience with the final output.

React CMS Authoring Tools - Provides tools for configuring and embedding interactive React components into pages via a browser-based interface.

Undo-Redo State History - Tracks sequential changes to the document model to enable undo and redo operations via a history stack.

Undo-Redo History - Provides a tracking system for content changes with undo, redo, clipboard operations, and keyboard shortcuts.

Server-Side Rendering - Implements a workflow to generate static HTML on the server to enhance search engine optimization and page load performance.

Rich Text Editors - Includes a customizable rich text editor for formatting paragraphs, headlines, and links with plugin support.

Server-Side Rendering - Generates static HTML on the server to improve SEO and performance by stripping the interactive editor interface.

Server-Side Rendered SEO - Generates page HTML on the server to improve search engine indexing by excluding editor-specific elements.

Text Editors - Listed in the “Text Editors” section of the Awesome Mac awesome list.

react-pagereact-page

Features

Star history