• Version 0.72.6
  • Published
  • 2.34 MB
  • 8 dependencies
  • MIT license


npm i slate-react
yarn add slate-react
pnpm add slate-react


Tools for building completely customizable richtext editors with React.



variable ReactEditor

const ReactEditor: {
getWindow(editor: ReactEditor): Window;
findKey(editor: ReactEditor, node: Node): Key;
findPath(editor: ReactEditor, node: Node): Path;
findDocumentOrShadowRoot(editor: ReactEditor): Document | ShadowRoot;
isFocused(editor: ReactEditor): boolean;
isReadOnly(editor: ReactEditor): boolean;
blur(editor: ReactEditor): void;
focus(editor: ReactEditor): void;
deselect(editor: ReactEditor): void;
editor: ReactEditor,
target: DOMNode,
options?: { editable?: boolean }
): boolean;
insertData(editor: ReactEditor, data: DataTransfer): void;
insertFragmentData(editor: ReactEditor, data: DataTransfer): boolean;
insertTextData(editor: ReactEditor, data: DataTransfer): boolean;
editor: ReactEditor,
data: DataTransfer,
originEvent?: 'drag' | 'copy' | 'cut' | undefined
): void;
toDOMNode(editor: ReactEditor, node: Node): HTMLElement;
toDOMPoint(editor: ReactEditor, point: Point): DOMPoint;
toDOMRange(editor: ReactEditor, range: Range): DOMRange;
toSlateNode(editor: ReactEditor, domNode: DOMNode): Node;
findEventRange(editor: ReactEditor, event: any): Range;
toSlatePoint<T extends boolean>(
editor: ReactEditor,
domPoint: DOMPoint,
options: { exactMatch: T; suppressThrow: T }
): T extends true ? any : any;
toSlateRange<T_1 extends boolean>(
editor: ReactEditor,
domRange: DOMRange | DOMStaticRange | DOMSelection,
options: { exactMatch: T_1; suppressThrow: T_1 }
): T_1 extends true ? any : any;
hasRange(editor: ReactEditor, range: Range): boolean;


    function AndroidEditable

    AndroidEditable: (props: EditableProps) => JSX.Element;

      function DefaultEditable

      DefaultEditable: (props: EditableProps) => JSX.Element;
      • Editable.

      function DefaultElement

      DefaultElement: (props: RenderElementProps) => JSX.Element;
      • The default element renderer.

      function DefaultLeaf

      DefaultLeaf: (props: RenderLeafProps) => JSX.Element;

        function DefaultPlaceholder

        DefaultPlaceholder: ({
        }: RenderPlaceholderProps) => JSX.Element;
        • The default placeholder element

        function Editable

        Editable: (props: import('./components/editable').EditableProps) => JSX.Element;

          function Slate

          Slate: (props: {
          editor: ReactEditor;
          value: Descendant[];
          children: React.ReactNode;
          onChange: (value: Descendant[]) => void;
          }) => JSX.Element;
          • A wrapper around the provider to handle onChange events, because the editor is a mutable singleton so it won't ever register as "changed" otherwise.

          function useEditor

          useEditor: () => import('..').ReactEditor;
          • Get the current editor object from the React context.


            Use useSlateStatic instead.

          function useFocused

          useFocused: () => boolean;
          • Get the current focused state of the editor.

          function useReadOnly

          useReadOnly: () => boolean;
          • Get the current readOnly state of the editor.

          function useSelected

          useSelected: () => boolean;
          • Get the current selected state of an element.

          function useSlate

          useSlate: () => Editor;
          • Get the current editor object from the React context.

          function useSlateStatic

          useSlateStatic: () => Editor;
          • Get the current editor object from the React context.

          function withReact

          withReact: <T extends ReactEditor>(editor: T) => T & ReactEditor;
          • withReact adds React and DOM specific behaviors to the editor.

            If you are using TypeScript, you must extend Slate's CustomTypes to use this plugin.

            See to learn how.


          interface ReactEditor

          interface ReactEditor extends BaseEditor {}
          • A React and DOM-specific version of the Editor interface.

          property hasRange

          hasRange: (editor: ReactEditor, range: Range) => boolean;

            property insertData

            insertData: (data: DataTransfer) => void;

              property insertFragmentData

              insertFragmentData: (data: DataTransfer) => boolean;

                property insertTextData

                insertTextData: (data: DataTransfer) => boolean;

                  property setFragmentData

                  setFragmentData: (
                  data: DataTransfer,
                  originEvent?: 'drag' | 'copy' | 'cut'
                  ) => void;

                    interface RenderElementProps

                    interface RenderElementProps {}
                    • RenderElementProps are passed to the renderElement handler.

                    property attributes

                    attributes: {
                    'data-slate-node': 'element';
                    'data-slate-inline'?: true;
                    'data-slate-void'?: true;
                    dir?: 'rtl';
                    ref: any;

                      property children

                      children: any;

                        property element

                        element: Element;

                          interface RenderLeafProps

                          interface RenderLeafProps {}
                          • RenderLeafProps are passed to the renderLeaf handler.

                          property attributes

                          attributes: {
                          'data-slate-leaf': true;

                            property children

                            children: any;

                              property leaf

                              leaf: Text;

                                property text

                                text: Text;

                                  Type Aliases

                                  type RenderPlaceholderProps

                                  type RenderPlaceholderProps = {
                                  children: any;
                                  attributes: {
                                  'data-slate-placeholder': boolean;
                                  dir?: 'rtl';
                                  contentEditable: boolean;
                                  ref: React.RefObject<any>;
                                  style: React.CSSProperties;
                                  • The props that get passed to renderPlaceholder

                                  Package Files (14)

                                  Dependencies (8)

                                  Dev Dependencies (10)

                                  Peer Dependencies (3)


                                  To add a badge like this badgeto your package's README, use the codes available below.

                                  You may also use to create a custom badge linking to

                                  • Markdown
                                  • HTML
                                    <a href=""><img src="" alt=""></a>