ascoders/gaea-editor

npm i gaea-editor --save

import Editor from 'gaea-editor';

ReactDOM.render(
  <div style={{ width: '100vw', height: '100vh' }}>
    <Editor />
  </div>,
  document.getElementById('react-root')
);

import BasicComponents from 'gaea-basic-components';
<Editor componentClasses={[...BasicComponents, CustomComponent1, CustomComponent2]} />;

defaultProps = {
  editSetting: {
    key: 'my-custom-key', // Unique key.
    name: 'Custom one', // The name shown in drag menu.
    isContainer: false, // Can be dragged in.
    editors: [
      {
        field: 'title',
        text: 'Text',
        type: 'string'
      }
    ] // Tell gaea-editor, which props can be edited and how to edit it.
  }
};

{
    type: 'string',
    text: 'Text',
    field: 'value'
}

{
    type: 'number',
    text: 'Text',
    field: 'value',
    data: {
        useSlider: true,
        step: 1,
        inputRange: [0, 100],
        outputRange: [0, 1]
    }
}

{
    type: 'boolean',
    text: 'Checked',
    field: 'value'
}

{
    type: 'select',
    text: 'Text',
    field: 'value',
    data: [{
        text: 'Default',
        value: 0
    }, {
        text: 'Small',
        value: 1
    }, {
        text: 'Large',
        value: 2
    }]
}

{
    type: 'color',
    text: 'Text',
    field: 'style.backgroundColor',
}

{
    type: 'display',
    text: 'Text'
}

{
    type: 'box-editor',
    text: 'Text'
}

{
    type: 'array',
    text: 'values',
    data: 'string'
}

{
    type: 'array',
    text: 'Options',
    data: [{
        field: "value",
        type: "string",
        text: "Value"
    }, {
        field: "text",
        type: "string",
        text: "Text"
    }, {
        field: "disabled",
        type: "boolean",
        text: "Disabled"
    }]
}

{
    type: 'object',
    text: 'Text',
    data: [{
        field: "name",
        type: "string",
        text: "Name"
    }, {
        field: "age",
        type: "number",
        text: "Age"
    }]
}

export function renderGaeaEditor() {
  return (
    <Editor
      onSave={value => {
        // send the value data to your server.
      }}
    />
  );
}

export function renderGaeaEditor() {
  return <Editor defaultValue={value} />;
}

class MyInput extends React.Component {
  render() {
    return <input />;
  }
}

export function renderGaeaEditor() {
  return <Editor componentClasses={[MyInput]} />;
}

npm i dob-react

import { Connect } from 'dob-react'

@Connect
class Plugin extends React.Component {
  render() {
  	return 'plugin'
  }
}

const plugin {
  position: "mainToolEditorTypeShow",
  class: ShowEditor
}

export function renderGaeaEditor() {
    return (
        <Editor plugins={[ Plugin ]}/>
    )
}

git clone https://github.com/ascoders/gaea-editor.git
cd gaea-editor
npm i
npm run docs

import Editor from 'gaea-editor';

ReactDOM.render(<Editor onSave={value => saveToServer(value)} />, document.getElementById('react-root'));

npm i gaea-render

import Render from 'gaea-render';

const value = getValueFromServer(); // <Editor onSave={value => // From here. } />

ReactDOM.render(<Render value={value} />, document.getElementById('react-root'));

import Editor from 'gaea-editor';
import Render from 'gaea-render';

ReactDOM.render(<Editor componentClasses={myCustomComponents} />, document.getElementById('react-editor'));
ReactDOM.render(<Render componentClasses={myCustomComponents} />, document.getElementById('react-render'));

import Editor from 'gaea-editor';
import Render from 'gaea-render';
import BasicComponents from 'gaea-basic-components';

ReactDOM.render(
  <Editor componentClasses={[...BasicComponents, myCustomComponents]} />,
  document.getElementById('react-editor')
);
ReactDOM.render(
  <Render componentClasses={[...BasicComponents, myCustomComponents]} />,
  document.getElementById('react-render')
);