React Page review: a cell-and-row content editor for React

What React Page is, and who it is for

React Page is a content editor built around an explicit layout grid. Content lives in cells, cells sit in rows, and users resize and rearrange them. Each cell is rendered by a cell plugin — text, image, video, spacer, or one you write.

This puts it in a different place from Puck and Craft.js. Those two treat layout as something your components decide; React Page treats layout as a first-class feature of the editor. If your users need to put two things side by side and resize the split, React Page does that on install and the others do not.

Its other distinguishing feature is language handling. Content can carry per-language values with the editor aware of the current language, which is unusual — most editors leave internationalisation entirely to the surrounding application.

The library is the oldest active React editor in this dataset, first published in November 2019, and it shows both in what it includes and in what it costs.

Architecture: cells, rows and plugins

The stored value is a tree of rows and cells. Each cell records which plugin renders it and that plugin's data. Layout plugins can wrap groups of cells for structural components.

A cell plugin declares its controls — the settings form the editor shows — its default data, and its renderer. The contract is straightforward, and writing one is a familiar exercise for a React developer, though the type ergonomics feel dated next to Puck's.

The editor interface is built on Material UI, which is the main reason for the bundle size. That is a structural cost rather than a configuration choice: you are shipping a component library inside your editor whether or not your application uses one.

Getting started

From our benchmark. Note the two CSS imports — the editor ships styles you must include, unlike the prop-driven builders:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';
import Editor from '@react-page/editor';
import slate from '@react-page/plugins-slate';
import '@react-page/editor/lib/index.css';
import '@react-page/plugins-slate/lib/index.css';

const cellPlugins = [slate()];

function App() {
  const [value, setValue] = useState(null);
  return <Editor cellPlugins={cellPlugins} value={value} onChange={setValue} />;
}

createRoot(document.getElementById('app')).render(<App />);

Building this at all required aliasing react/jsx-runtime.js to react/jsx-runtime in our bundler. Without it, esbuild fails outright on react-dnd. That is a real integration cost that no feature comparison mentions, and it is recorded in our time to first editor benchmark.

Strengths

A layout grid you do not have to build. Rows, cells, resizing and drop targets are included. Recreating this on Craft.js is a substantial project.

Multilingual content is built in. Per-language content handling inside the editor rather than in your data layer is rare in this category and genuinely valuable for teams who need it.

A finished-looking interface on install. For internal tools where nobody is going to restyle the editor, this is worth real money.

MIT licensed and self-hosted. No service, no account, no usage ceiling.

A stable API. The slow release cadence has an upside: integrations do not need rewriting every quarter.

Limitations

One of the largest bundles we measured. 377.2 kB gzip, more than four times Puck and nearly thirteen times Craft.js. Much of that is the Material UI editor interface, which you cannot opt out of.

The slowest to first editor. 1,004 ms median in our benchmark, roughly ten times Craft.js.

React 19 needs a bundler workaround. See above. It is one line of configuration, but you have to know to write it, and it signals a dependency tree that has not been modernised.

Dated ergonomics. Type definitions and error messages are noticeably older in style than Puck's, and invalid plugin definitions do not always report where the mistake is.

A thin ecosystem. A small set of official plugins and few third-party ones. Plan to write what you need.

Documentation lags the code. Some pages describe earlier versions, so the examples directory in the repository is often the more reliable reference.

Pricing

Free under MIT with no usage limits. The cost is the bundle you ship and the plugins you write. For a React team choosing today, Puck covers most of the same ground at a quarter of the weight — the exception being teams who specifically need the resizable grid or the multilingual handling, which Puck does not have. React Page vs Puck sets out that trade directly.