Page Builder Package Like Notion with Reactjs


Page builder package like notion


Run npm install -s cm-page-builder

Add to your index.html the fonts cdn: <link rel="stylesheet" href="">

Import it as import PageBuilder from 'cm-page-builder'


A PageBuilder component looks like this:



Page components.

A list of Page components, to be initialized. They have the following structure

  component_attachment: { content: String, filename: String, url: String}
  component_type: String
  content: String
  position: Number
Status (default: Edit):

Has to be one of Edit

options (default: ['Header1','Header2','Olist','Ulist','Embed','Upload', 'File','Divider','Code']):

Array of available components. For example, setting options as ['Header1'] will only render Header1 component.

handleUpdate(id, data, type, key):

A function that gets fired every time something happens with the components of a page. It receives four parameters, id, data, type, key

  • id: The ID of the component,
  • data: The data inside the component.
  • type: The kind of change that has happened with the component. It can be any of
    • "createComponent"
    • "updateComponent"
    • "deleteComponent"
  • key: undefined

A hash that maps snake_cased names of components with cm-page-builder components found inside the src/components folder. Available components are

  • Header1: The equivalent of a h1 tag
  • Header2: The equivalent of a h2 tag
  • OList: An ordered list. Two or more adjacent components of this type will make a group, and the position number will increase sequentially within that group
  • UList: An unordered list
  • Text: The default component, regular text. It may have HTML formatting
  • Embed: A vimeo or youtube video which is meant to be displayed as an embed file
  • Upload: A file. component_attachment will hold all relevant information. If it is an image, it should be displayed as an embedded image
  • Divider: A line divider.
  • Code: A code snippet component.

Download Details:

Author: commutatus

Source Code:

#react #reactjs #javascript

Page Builder Package Like Notion with Reactjs
31.25 GEEK