Getting Started

GitHub Download

version 1.3.2



Acutually, You can build your own Extension. Here is the Extension interface!

export abstract class Extension {
  constructor(props: ExtensionProps) {}

  name: string

  customName?: string

  schema?: ExtensionSchema

  customSchema?: ExtensionSchema

  schemaDependencies?: {
    [key: string]: ExtensionSchema;

  customProps?: {
    [key: string]: any;

  tagName?: string

  className?: string

  customMenu?({ state: EditorState, dispatch: Dispatch }): JSX.Element

  customInlineMenu?({ state: EditorState, dispatch: Dispatch }): JSX.Element

  customLayout?(props: CustomLayoutProps, dom: HTMLElement): JSX.Element

  customButton?({ state: EditorState, dispatch: Dispatch }): JSX.Element

  customIcon?: JSX.Element | string

  icon?: JSX.Element | string

  plugins?: Plugin<any, any>[]

  showMenu: boolean

  hideMenuOnFocus?: boolean

  hideBlockMenuOnFocus?: boolean

  hideInlineMenuOnFocus?: boolean

  group?: string

  // "edit" | "mark" | "block"
  view?(node: Node, view: EditorView, getPos: () => number): NodeView

  active?(state: EditorState): boolean

  enable?(state: EditorState): boolean

  onClick?(state: EditorState, dispatch: Dispatch, view?: EditorView): void

  keys?(schema: Schema): { [key: string]: any }

  btnColor?: 'black' | 'white'


SmartBlock deeply depends on ProseMirror, so You may also want to know about ProseMirror to


Usage, introduction of other functions, component introduction etc.
are described in detail in the document.

Get Started

View on GitHub

SmartBlock was developed by @appleplecom and is open source (MIT license) on GitHub.
Please send us feedback, requests, bug reports and pull requests!

If you like it, please press Star ;)

GitHub page

If you like our project, we glad to have star! :)


A modern block styled editor built with React.
SmartBlock is provided with MIT license. Made by @appleple ♥ OSS