Next Level Content EditingReactPage

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 featurespowerful 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 wantAnything 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 editingWe 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 TypescriptReactPage 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 boxReactPage 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