React Page 3.2.1

Next Level Content Editing

ReactPage

ReactPage is a next level content editor for react.

It enables webmasters and content editors to create the content they want with the <Components /> you provide as a developer.

Batteries included - Key features

  • powerful and customizable RichText Editor (powered by Slate)
  • 12-column grid responsive grid layout
  • Drag & Drop cells
  • Undo & Redo, copy and hotkey support
  • Multi-Language support
  • Add any custom Components you like

It's just a react component!

ReactPage has a simple API - it's basically just like a form field and can be included in any project.

Pass it's current value that you might read from your datastore and update the value when onChange is called. It's that simple.

Set readOnly={true} whenever you want to display content without editing capabilities. ReactPage will only load what is really required for displaying thanks to code splitting. This results in a small bundle size.


import Editor from '@react-page/editor'

// use ReactPage for editing Content
<Editor
    cellPlugins={yourCellPlugins}
    value={theCurrentValue}
    onChange={newValue => saveTheValue(newValue)}
/>

// or just for displaying content
<Editor
    cellPlugins={yourCellPlugins}
    value={theCurrentValue}
    readOnly={true}
/>

Add anything you want

Anything can displayed inside a cell of this editor! You can add text, images, videos and any custom Component you want by creating custom CellPlugins.

Provide your webmasters a "recommended products" section for your E-Commerce blog. Show a contact form directly inside your content. Embed Tweets and newest posts from Social media.

Anything is possible with a simple, yet powerful API.

You provide a Component and some metadata about your new CellPlugin and you are done. If you additionaly provide a schema of the data of this CellPlugin, we will automatically create a form for you (powered by Uniforms).

Powerful Rich Text editing

We provide a powerful richtext plugin built upon Slate. It works out-of-the-box, but is fully customizable. You can customize how everything is rendered by providing custom component for headlines, paragraphs, links and so-on and you can add create your own custom plugins to bring in color, add custom links or custom paragraph styles.

You can customize the rich text editor anyway you like. You can even add formula editing capabilities:

f(x) = x^2

Embraces Typescript

  1. ReactPage is written in modern typescript and enables developer that include ReactPage into their project with typesafety and peace of mind. Thanks to generics, you can give any CellPlugin the data type that you need.

A Sample Twitter plugin

import type { CellPlugin } from '@react-page/editor';
import React from 'react';
import { Timeline } from 'react-twitter-widgets';

type Data = {
  screenName: string;
  height: number;
  title: string;
};
// you can pass the shape of the data as the generic type argument
const customContentPluginTwitter: CellPlugin<Data> = {
  Renderer: ({ data }) => (
    <div>
      <h4>{data.title}</h4>
      <Timeline
        dataSource={{
          sourceType: 'profile',
          // data has already the right type!
          screenName: data.screenName,
        }}
        options={{
          height: data.height || 600,
        }}
      />
    </div>
  ),
  id: 'twitter-timeline',
  title: 'Twitter timeline',
  description: 'A twitter timeline',
  version: 1,
  controls: {
    type: 'autoform',
    schema: {
      // this JSONschema is type checked against the generic type argument
      // the autocompletion of your IDE helps to create this schema
      properties: {
        title: {
          type: 'string',
          default: 'A Sample Twitter plugin',
        },
        screenName: {
          type: 'string',
          default: 'typescript',
        },
        height: {
          type: 'number',
          default: 600,
        },
      },
      required: ['screenName'],
    },
  },
};

export default customContentPluginTwitter;

Server Side Rendering out of the box

ReactPage is built with performance in mind. It can be used for server side rendering (SSR), which makes it not only a great tool for editing, but also for displaying. It's battle tested in nextjs, this example itself is created using nextjs and static page generation.

We try minimize bundle size as much as possible. Any UI solely used for editing is not loaded when in readOnly mode.

ReactPage works in any SSR setup like Next.js or Gatsby