Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Draft.js List Plugin

Better lists for Draft.js

  • Automatically creates lists when lines begin with *, 1. or similar
  • Allows creating nested lists using the tab key
  • Simple setup
  • TypeScript type definitions

β†’ Demo

Plugin demo


This plugin requires you to have draft-js-plugins set up in your project.

Install the plugin using NPM:

npm install draft-js-list-plugin

Import the list plugin in your Editor component:

import React, { Component } from "react";
import PluginEditor from "draft-js-plugins-editor";
import createListPlugin from "draft-js-list-plugin";

// Make sure to import `Draft.css` somewhere
import "draft-js/dist/Draft.css";

const listPlugin = createListPlugin();
const plugins = [listPlugin];

export default class Editor extends Component {
	// ...

	render() {
		const { editorState } = this.state;

		return (
				// ...

See Editor.tsx for a full example.


You can pass options to the plugin the following way:

const listPlugin = createListPlugin({
	// Your options

Supported options:

  • allowNestedLists (boolean): Whether the user should be able to create sublists (nested lists). Default: true
  • maxDepth (number): Allows you to control how deep the list nesting can be. Default: 4
  • olRegex (RegExp): Regular expression for determining whether a numbered list should be started. Default: /\d\./
  • ulChars (string[]): List of characters with which bullet lists can be started. Default: ["-", "–", "*"]


Requirements: Node.js, Yarn

  1. Clone this repository: git clone REPO_URL
  2. Install all dependencies: yarn
  3. Generate the library bundle: yarn start
  4. View the demo on localhost:3000

Suggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.