Next Level Content Editing
ReactPage
ReactPage is a next level content editor for react.
It enableswebmasters and content editorsto create the content they want with the<Components /> you provide as a developer.
Batteries included - Key features
- powerful and customizableRichText Editor (powered bySlate)
- 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 currentvalue that you might read from your datastore and update the value whenonChange is called.It's that simple.
SetreadOnly={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 asmall bundle size.
importEditorfrom'@react-page/editor'// use ReactPage for editing Content<EditorcellPlugins={yourCellPlugins}value={theCurrentValue}onChange={newValue=>saveTheValue(newValue)}/>// or just for displaying content<EditorcellPlugins={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 customCellPlugins.
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 newCellPluginand you are done. If you additionaly provide a schema of the data of thisCellPlugin,we willautomatically create a form for you (powered byUniforms).
Powerful Rich Text editing
We provide a powerful richtext plugin built uponSlate. 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 incolor, 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
- 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
importtype{CellPlugin}from'@react-page/editor';importReactfrom'react';import{Timeline}from'react-twitter-widgets';typeData={ screenName:string; height:number; title:string;};// you can pass the shape of the data as the generic type argumentconst customContentPluginTwitter:CellPlugin<Data>={Renderer:({ data})=>(<div><h4>{data.title}</h4><TimelinedataSource={{ 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'],},},};exportdefault customContentPluginTwitter;Server Side Rendering out of the box
ReactPageis built with performance in mind. It can be used forserver 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 tryminimize 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
