React Movable Block Editor

React component for creating layouts and content via drag-and-drop blocks.

The output is an object that can be serialized to json, React, html.

Installation:

npm install react-movable-block-editor react-color react-resizable react-markdown lodash-es --save

Demos:

Remix on Glitch:

Usage:


import {
  BlockEditor,
  Preview,
  BlockEditorControl,
  BlockEditorValue,
} from 'react-movable-block-editor';
import 'react-movable-block-editor/css/drag.css';
import 'react-resizable/css/styles.css';

const App: React.FC = () => {
  const [editorState, setEditorState] = useState<BlockEditorValue>({
    copiedNode: null,
    focusedNodeId: null,
    undoStack: [],
    redoStack: [],
    byId: {
      container1: {
        id: 'container1',
        type: 'layer',
        name: 'container1',
        parentId: null, // root
        width: 500,
        height: 300,
        childrenIds: [],
      },
    },
    rootNodeId: 'container1',
  });

  return (
    <div>
      <BlockEditorControl
        value={editorState}
        onChange={v => (console.log('VAL', v) as any) || setEditorState(v)}
      />
      <div>
        <BlockEditor value={editorState} onChange={setEditorState} />
      </div>
      <div style={{ borderWidth: 1, borderStyle: 'dashed' }}>
        <Preview
          byId={editorState.byId}
          node={editorState.byId[editorState.rootNodeId]}
        />
      </div>
    </div>
  );
};

Examples

editor
grid

Running an example

cd example/editor-example

npm install

npm start

grid-blocks

Package detail

react-movable-block-editor

readme