ReactPage: Rich Content Editor for React

I wanted to share with you an open source project I contributed heavily to for over a year now.

It’s a rich content editor that goes beyond what ordinary wysiwyg-editor provides. You can add cells in columns, resize them and drag them around. It has customizable rich text editing capabilities powered by slate and you can add any Component you like as a CellPlugin. CellPlugins can be configured using an auto-generated form powered by uniforms.

Its basically just a React-component like a form field: you give in a value and you will receive updates in an onChange-callback. You can then save new values into any datastore, e.g. a graphql-mutation or a meteor-collection/method.

You can also display the content in a readOnly-mode which will minimize the bundle size thanks to code-splitting.

check it out here GitHub - react-page/react-page: Next-gen, highly customizable content editor for the browser - based on React and Redux and written in TypeScript. WYSIWYG on steroids.
and see the demo&docs: https://react-page.github.io/

initially developed by aeneasr and ORY


As an example we use it heavily on an online shop: https://www.veloplus.ch/ which by the waa uses a meteor based headless shop system

10 Likes

Very good :smiley: :smiley: :smiley: :smiley: :smiley: :smiley:

This is very cool. What are some of the top use cases it would be best suited for?

I think its useful in these cases:

  • you have a webapplication and need to add editorial content, a landing page, news or similar
  • your customer wants to be able to edit more than just text
  • you want to mix text-content with other data-sources. E.g. a shop that writes blog posts about products or categories. They might want to link to products in their blog posts.
  • You want to enable your users to edit and preview the content as “real” as possible. Its even possible to do in-place editing with ReactPage!

In general you benefit the most if you have already a lot of components that you now want to give to your users to use in the editor. A usual html-“wysiwyg”-editor does not allow to re-use these components that easy.

Reasons to NOT use it would be:

  • Your content is highly structured. In this case its much easier to manage it directly with schema-driven data-tables. But its still easy and common to use ReactPage in data-tables for some “content”-fields
  • The content that you want to edit will be published for different media (native apps, web apps, print). in this case, its better to go with a headless-cms as you need to edit independent from the presentation anyway. You can however use content created with ReactPage also for native-apps, see this discussion: Export to PDF · Discussion #920 · react-page/react-page · GitHub

Awesome. Do you have a top target market in mind yet? Or top two or three?

1 Like

I don’t think markets are relevant. Or maybe i don’t understand the question? It’s a solution to a certain problem. If it fits your usecase, you can use it.

It’s used by many different usecase. We use it for e-commerce projects and in general for content- and information-pages on webapplications. But you motivated me to ask the community how they use it, I only know some of the use cases yet.

1 Like

I had a quick look, and I think it’s amazing! Congrats! I can’t wait to use it in one of my projects.

1 Like

Awesome, looking good!

1 Like

Yes, very promising! I was thinking of using Quill, but the project isn’t very active. This, combined with slate blows it away!

1 Like

I wonder if you can make a stand-alone personal site builder out of this?

A product in that space just reached #2 on Product Hunt.