<p>When looking through Draft.js docs there is much talk about how you can modify the editor's state in many different ways. Draft.js also provides us with <code>convertToRaw</code> function that we can use to convert the state to plain JSON. But there is little information on how to actually display Draft.js content. Do you need to implement some custom parsing for the state JSON? Or is there some existing library or way to take the state JSON and display it nicely?</p>
<p><em>I just published a class where I teach more about Draft.js. Best part is that you can get it for free! <a href="/blog/rich-text-editing-in-react-with-draft-js-course/">Read more</a>.</em></p>
<p>This is what the <a href="https://draftjs.org/docs/api-reference-data-conversion">docs</a> say about displaying the content: "<em>Note that the Draft library does not currently provide utilities to convert to and from markdown or markup, since different clients may have different requirements for these formats. We instead provide JavaScript objects that can be converted to other formats as needed.</em>"</p>
<p>So Draft.js provides utility functions for converting the state to raw JS (<code>convertToRaw</code>) and raw JS to ContentState object (<code>convertFromRaw</code>) but not to markdown or markup. This has led to birth of separate markdown/markup converting libraries. I wrote a post on how to use one of these libraries to <a href="/blog/how-to-display-draft-js-content-as-html/">display Draft.js content as HTML</a>.</p>
<h2>Using the Draft editor for display</h2>
<p>Converting the state JSON to a markdown/markup is not however the only way to display your state. Another way is to initialise a Draft.js editor with the saved state JSON and put the editor into <code>readOnly</code> mode. This way the editor component will handle all the styling and there will less likely be bugs or inconsistencies in the styling of the contents than there would be when using external converting libraries because the converting is done by Draft.js itself. Here is an example on how to do that.</p>
<p>For the purposes of this example we are going to load the stored state from a JSON file. Our <code>storedState.json</code> file looks like this:</p>
<pre><code class="language-json">{
  "blocks": [
    {
      "key": "8i090",
      "text": "Hello CodePulse!",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 16,
          "style": "BOLD"
        }
      ],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "42ncd",
      "text": "This text should be underlined.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 31,
          "style": "UNDERLINE"
        }
      ],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "327r6",
      "text": "And this text should be italic.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 31,
          "style": "ITALIC"
        }
      ],
      "entityRanges": [],
      "data": {}
    }
  ],
  "entityMap": {}
}
</code></pre>
<p>Here is the actual component that we use to display the stored state:</p>
<pre><code class="language-jsx">import React from "react";
import ReactDOM from "react-dom";
import { Editor, EditorState, convertFromRaw } from "draft-js";
import storedState from "./storedState.json";

class App extends React.Component {
  render() {
    const contentState = convertFromRaw(storedState);
    const editorState = EditorState.createWithContent(contentState);
    return (
      &#x3C;div className="App">
        &#x3C;Editor editorState={editorState} readOnly={true} />
      &#x3C;/div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(&#x3C;App />, rootElement);
</code></pre>
<p>On the lines 3 and 4 we import everything related to Draft.js and also the stored state (again, we import the state from a file to keep this example simple).</p>
<p>In the render method we create a <code>contentState</code> object by passing the JS object for the state as a parameter for <code>convertFromRaw</code> method (line 8). Once we have the <code>contentState</code> object we create an <code>editorState</code> object out of it with <code>EditorState.createWithContent</code> (line 9).</p>
<p>Finally we render our <code>Editor</code> component with the <code>editorState</code> we just created (line 12). We also set <code>readOnly={true}</code> for the editor component so it is displayed nicely and the content cannot be modified.</p>
<p><img src="./images/Screenshot-2018-11-13-at-15.31.56.png" alt="Draft.js editor displaying content in readOnly mode"></p>
<p>You can find a codesandbox for this example <a href="https://codesandbox.io/s/72z9l42l1">here</a>.</p>
<h2>Conclusion</h2>
<p>As we saw using the Draft editor component with readOnly set to true, it is quite simple to display Draft.js content. You don't necessarily need to convert the state to e.g. HTML or markdown in order to display it. I must add though that I am not sure if this is the most optimal way of displaying Draft.js content. What I can say is that I have used this approach in projects that are in production and it has worked well for me.</p>
<p>If you have an idea of another approach or have used a different solution for displaying Draft.js content, please leave a comment below! I would like to hear from you! And of course if you have any questions or thoughts be sure to comment them below too!</p>



When looking through Draft.js docs there is much talk about how you can modify the editor's state in many different ways. Draft.js also provides us with `convertToRaw` function that we can use to convert the state to plain JSON. But there is little information on how to actually display Draft.js content. Do you need to implement some custom parsing for the state JSON? Or is there some existing library or way to take the state JSON and display it nicely?

_I just published a class where I teach more about Draft.js. Best part is that you can get it for free! [Read more](/blog/rich-text-editing-in-react-with-draft-js-course/)._

This is what the [docs](https://draftjs.org/docs/api-reference-data-conversion) say about displaying the content: "_Note that the Draft library does not currently provide utilities to convert to and from markdown or markup, since different clients may have different requirements for these formats. We instead provide JavaScript objects that can be converted to other formats as needed._"

So Draft.js provides utility functions for converting the state to raw JS (`convertToRaw`) and raw JS to ContentState object (`convertFromRaw`) but not to markdown or markup. This has led to birth of separate markdown/markup converting libraries. I wrote a post on how to use one of these libraries to [display Draft.js content as HTML](/blog/how-to-display-draft-js-content-as-html/).

## Using the Draft editor for display

Converting the state JSON to a markdown/markup is not however the only way to display your state. Another way is to initialise a Draft.js editor with the saved state JSON and put the editor into `readOnly` mode. This way the editor component will handle all the styling and there will less likely be bugs or inconsistencies in the styling of the contents than there would be when using external converting libraries because the converting is done by Draft.js itself. Here is an example on how to do that.

For the purposes of this example we are going to load the stored state from a JSON file. Our `storedState.json` file looks like this:

```json
{
  "blocks": [
    {
      "key": "8i090",
      "text": "Hello CodePulse!",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 16,
          "style": "BOLD"
        }
      ],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "42ncd",
      "text": "This text should be underlined.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 31,
          "style": "UNDERLINE"
        }
      ],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "327r6",
      "text": "And this text should be italic.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 31,
          "style": "ITALIC"
        }
      ],
      "entityRanges": [],
      "data": {}
    }
  ],
  "entityMap": {}
}
```

Here is the actual component that we use to display the stored state:

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { Editor, EditorState, convertFromRaw } from "draft-js";
import storedState from "./storedState.json";

class App extends React.Component {
  render() {
    const contentState = convertFromRaw(storedState);
    const editorState = EditorState.createWithContent(contentState);
    return (
      <div className="App">
        <Editor editorState={editorState} readOnly={true} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

On the lines 3 and 4 we import everything related to Draft.js and also the stored state (again, we import the state from a file to keep this example simple).

In the render method we create a `contentState` object by passing the JS object for the state as a parameter for `convertFromRaw` method (line 8). Once we have the `contentState` object we create an `editorState` object out of it with `EditorState.createWithContent` (line 9).

Finally we render our `Editor` component with the `editorState` we just created (line 12). We also set `readOnly={true}` for the editor component so it is displayed nicely and the content cannot be modified.

![Draft.js editor displaying content in readOnly mode](/blog-posts/simple-easy-way-display-draft-js-content/images/Screenshot-2018-11-13-at-15.31.56.png)

You can find a codesandbox for this example [here](https://codesandbox.io/s/72z9l42l1).

## Conclusion

As we saw using the Draft editor component with readOnly set to true, it is quite simple to display Draft.js content. You don't necessarily need to convert the state to e.g. HTML or markdown in order to display it. I must add though that I am not sure if this is the most optimal way of displaying Draft.js content. What I can say is that I have used this approach in projects that are in production and it has worked well for me.

If you have an idea of another approach or have used a different solution for displaying Draft.js content, please leave a comment below! I would like to hear from you! And of course if you have any questions or thoughts be sure to comment them below too!


There is little information on how to actually display Draft.js content. Here is simple and easy way to display saved Draft.js content!

Simple and easy way to display Draft.js content

<p><em>This post was originally published 1.4.2018.</em></p>
<p><a href="https://draftjs.org/">Draft.js</a> is a great way to implement rich text editors with React. It can be little unclear though what you should do when you want to display your editor content as plain HTML. In this post we will learn how to do just that, by converting our editor state to HTML that can be displayed without Draft.js editor.</p>
<p><em>I just published a class where I teach more about Draft.js. Best part is that you can get it for free! <a href="/blog/rich-text-editing-in-react-with-draft-js-course/">Read more</a>.</em></p>
<h2>Displaying ContentState as HTML</h2>
<p><a href="https://draftjs.org/docs/api-reference-data-conversion">Draft.js docs</a> state the following: “<em>Note that the Draft library does not currently provide utilities to convert to and from markdown or markup, since different clients may have different requirements for these formats. We instead provide JavaScript objects that can be converted to other formats as needed.</em>”.</p>
<p>What this means is that Draft.js does not provide utilities for converting the editor content to HTML. Instead we need to use a different library for that. There is a bunch of options to choose from. I like to use <a href="https://www.npmjs.com/package/draft-js-export-html">draft-js-export-html</a>.</p>
<p>draft-js-export-html provides <code>stateToHTML</code> method that generates HTML representation for given <code>ContentState</code> object. Using it is quite straight forward. Let’s look at an example.</p>
<h2>Example</h2>
<p>In the example below, we have plain Draft editor and we display its contents as HTML below the editor. The conversion from <code>ContentState</code> to HTML is done in the <code>onChange</code> handler in line 12 (if you are not familiar with <code>getCurrentContent()</code> function, it returns <code>ContentState</code> object from an <code>EditorState</code> object).</p>
<pre><code class="language-jsx">import React from "react";
import { Editor, EditorState } from "draft-js";
import { stateToHTML } from "draft-js-export-html";

class ExampleEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => {
      this.setState({
        editorState,
        editorContentHtml: stateToHTML(editorState.getCurrentContent()),
      });
    };
  }

  render() {
    return (
      &#x3C;div>
        &#x3C;div className="editor-container" style={{ border: "1px solid #000" }}>
          &#x3C;Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        &#x3C;/div>
        &#x3C;h4>Editor content as HTML&#x3C;/h4>
        &#x3C;pre>{this.state.editorContentHtml}&#x3C;/pre>
      &#x3C;/div>
    );
  }
}

export default ExampleEditor;
</code></pre>
<p>So first we import <code>stateToHTML</code> from draft-js-export-html. Then in the line 12 in the <code>onChange</code> handler we generate the HTML version of the ContentState and save it to the component's state. We display the generated HTML in the render method on line 27. Since the generating of the HTML is done in the <code>onChange</code> handler, we can see the updated HTML as we make changes to the editor.</p>
<p><img src="./images/draft-to-html-editor-demo.gif" alt="draft js display html"></p>
<h2>Conclusion</h2>
<p>We used <code>stateToHTML</code> function from draft-js-export-html library to generate HTML out of a <code>ContentState</code> object. This was a clean and easy way to convert the contents of the editor to HTML.</p>
<p>I created a <a href="/blog/online-code-editor-every-web-developer-should-know-about/">codesandbox</a> for the example above so you can test it out by yourself. I added also another example with an editor that has some rich text editing features to the codesandbox. You can find the codesandbox <a href="https://codesandbox.io/s/rw90r46934">here</a>.</p>
<p>HTML works well for displaying purposes but if you want to store your editor content for a later use, HTML is not the ideal way to do it. For that you should read a post I wrote on <a href="/blog/how-to-store-draft-js-content/">How to store Draft.js content</a>. Also don't forget to sign up for a CodePulse newsletter below to stay up to date on the latest posts and other cool stuff we have to offer! And of course, if you have any questions or comments I would be happy to hear them so go ahead and drop a comment below!</p>



_This post was originally published 1.4.2018._

[Draft.js](https://draftjs.org/) is a great way to implement rich text editors with React. It can be little unclear though what you should do when you want to display your editor content as plain HTML. In this post we will learn how to do just that, by converting our editor state to HTML that can be displayed without Draft.js editor.

_I just published a class where I teach more about Draft.js. Best part is that you can get it for free! [Read more](/blog/rich-text-editing-in-react-with-draft-js-course/)._

## Displaying ContentState as HTML

[Draft.js docs](https://draftjs.org/docs/api-reference-data-conversion) state the following: “_Note that the Draft library does not currently provide utilities to convert to and from markdown or markup, since different clients may have different requirements for these formats. We instead provide JavaScript objects that can be converted to other formats as needed._”.

What this means is that Draft.js does not provide utilities for converting the editor content to HTML. Instead we need to use a different library for that. There is a bunch of options to choose from. I like to use [draft-js-export-html](https://www.npmjs.com/package/draft-js-export-html).

draft-js-export-html provides `stateToHTML` method that generates HTML representation for given `ContentState` object. Using it is quite straight forward. Let’s look at an example.

## Example

In the example below, we have plain Draft editor and we display its contents as HTML below the editor. The conversion from `ContentState` to HTML is done in the `onChange` handler in line 12 (if you are not familiar with `getCurrentContent()` function, it returns `ContentState` object from an `EditorState` object).

```jsx
import React from "react";
import { Editor, EditorState } from "draft-js";
import { stateToHTML } from "draft-js-export-html";

class ExampleEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => {
      this.setState({
        editorState,
        editorContentHtml: stateToHTML(editorState.getCurrentContent()),
      });
    };
  }

  render() {
    return (
      <div>
        <div className="editor-container" style={{ border: "1px solid #000" }}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        </div>
        <h4>Editor content as HTML</h4>
        <pre>{this.state.editorContentHtml}</pre>
      </div>
    );
  }
}

export default ExampleEditor;
```

So first we import `stateToHTML` from draft-js-export-html. Then in the line 12 in the `onChange` handler we generate the HTML version of the ContentState and save it to the component's state. We display the generated HTML in the render method on line 27. Since the generating of the HTML is done in the `onChange` handler, we can see the updated HTML as we make changes to the editor.

![draft js display html](/blog-posts/how-to-display-draft-js-content-as-html/images/draft-to-html-editor-demo.gif)

## Conclusion

We used `stateToHTML` function from draft-js-export-html library to generate HTML out of a `ContentState` object. This was a clean and easy way to convert the contents of the editor to HTML.

I created a [codesandbox](/blog/online-code-editor-every-web-developer-should-know-about/) for the example above so you can test it out by yourself. I added also another example with an editor that has some rich text editing features to the codesandbox. You can find the codesandbox [here](https://codesandbox.io/s/rw90r46934).

HTML works well for displaying purposes but if you want to store your editor content for a later use, HTML is not the ideal way to do it. For that you should read a post I wrote on [How to store Draft.js content](/blog/how-to-store-draft-js-content/). Also don't forget to sign up for a CodePulse newsletter below to stay up to date on the latest posts and other cool stuff we have to offer! And of course, if you have any questions or comments I would be happy to hear them so go ahead and drop a comment below!


It can be little unclear what you should do when you want to display your draft js content as HTML. In this post we will learn best way to do that...

How to display Draft.js content as HTML

<p>When you start to use Draft.js you quickly realize that it doesn't come with a lot of ready to use features or utilities. Yes, you can build e.g. a toolbar with rich text editing features but there is not one ready for you to use in Draft.js.</p>
<p><em>If you are not yet familiar with Draft.js be sure to read my post on <a href="/blog/getting-started-with-draft-js/">Getting started with Draft.js</a>.</em></p>
<p>It is possible for you to create all kind of cool features to your editor such as static toolbar, Slack-like emojis, Facebook-like stickers &#x26; mentions. But it requires a lot of work and you need to know a lot of how Draft.js works. Thankfully there is draft-js-plugins that does all the heavy lifting for you.</p>
<h2>draft-js-plugins</h2>
<p>This is what is said in the <a href="https://www.draft-js-plugins.com/">draft-js-plugins homepage</a>:</p>
<p><em>Facebook's rich-text editor framework DraftJS built on top of React allows you to create powerful editors. We're building a plugin architecture on top of it that aims to provide you with plug &#x26; play extensions. It comes with a set of plugins with great UX serving mobile &#x26; desktop as well as screen-readers. You can combine them in any way you want or build your own.</em></p>
<p>So with draft-js-plugins you get a set of plugins that work out of the box and they can be implemented to a Draft editor. Here is a list of the plugins that are currently being offered:</p>
<ul>
<li>Mention</li>
<li>Emoji</li>
<li>Image</li>
<li>Video</li>
<li>Sticker</li>
<li>Hashtag</li>
<li>Inline toolbar</li>
<li>Side Toolbar</li>
<li>Static Toolbar</li>
<li>Undo</li>
<li>Counter</li>
<li>Anchor</li>
<li>Linkify</li>
<li>Focus</li>
<li>Alignment</li>
<li>Resizeable</li>
<li>Drag'n'Drop</li>
<li>Divider</li>
</ul>
<h2>Setup for adding plugins</h2>
<p>Usage of the plugins is pretty simple but depending on the plugin they may need some configuration. Let's see how we can take a Static toolbar plugin and add it to a Draft editor.</p>
<p><em>Here is a link to a <a href="/blog/online-code-editor-every-web-developer-should-know-about/">codesandbox</a> with the finished component: <a href="https://codesandbox.io/s/km4436q4lv">https://codesandbox.io/s/km4436q4lv</a></em></p>
<p>Here is code for simple Draft editor before we add the plugin.</p>
<pre><code class="language-jsx">import React, { Component } from "react";
import { Editor, EditorState } from "draft-js";

export default class SimpleStaticToolbarEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      &#x3C;div>
        &#x3C;div>
          &#x3C;Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        &#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<p>First we need to install the draft-js-plugins-editor by running the following:</p>
<pre><code>yarn add draft-js-plugins-editor
</code></pre>
<p>Then we import editor component from draft-js-plugins-editor and replace the Draft.js editor component with it. The draft-js-plugins-editor's editor component is basically just a wrapper component for the Draft.js editor component. It adds "plugins" prop for the editor which will be used to pass plugins for the editor. Our component should look like this now:</p>
<pre><code class="language-jsx">import React, { Component } from "react";
import { EditorState } from "draft-js";
import Editor from "draft-js-plugins-editor";

export default class SimpleStaticToolbarEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      &#x3C;div>
        &#x3C;div>
          &#x3C;Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        &#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<p>Now we are ready to add plugins for the editor. Next we will add the Static Toolbar plugin to our editor.</p>
<h2>Static toolbar plugin</h2>
<p>Install the plugin by running the following:</p>
<pre><code>yarn add draft-js-static-toolbar-plugin
</code></pre>
<p>After we have installed the plugin we import it and create a plugin out of it. Then we import the Toolbar component itself from the created plugin. I add the code for our <strong>completed</strong> component here next and explain what we did.</p>
<pre><code class="language-jsx">import React, { Component } from "react";
import Editor, { createEditorStateWithText } from "draft-js-plugins-editor";
import createToolbarPlugin from "draft-js-static-toolbar-plugin";
import editorStyles from "./editorStyles.css";
import "../node_modules/draft-js-static-toolbar-plugin/lib/plugin.css";

const staticToolbarPlugin = createToolbarPlugin();
const { Toolbar } = staticToolbarPlugin;
const text = "You can format the text with the toolbar below";

export default class SimpleStaticToolbarEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      &#x3C;div>
        &#x3C;div className={editorStyles.editor}>
          &#x3C;Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={[
              staticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPlugin,
            ]}
          />
          &#x3C;Toolbar />
        &#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<p>So first we import the draft-js-static-toolbar-plugin on line 3. We also import some default styling on line 5 so our toolbar looks good. Feel free to customize the styling by yourself. Then we create the plugin out of it and import the <code>Toolbar</code> component from it on lines 7-9. We initialise the editor state with text with the help of <code>createEditorStateWithText()</code> function that comes with draft-js-plugins-editor. This is not necessary and we could as well initialise it with <code>EditorState.createEmpty()</code> if we'd like an empty editor. Lastly we pass the plugin for the <code>Editor</code> component inside the render method and render the <code>Toolbar</code> component. Note that when passing plugin(s) for the editor the variable must be an array since we can pass multiple plugins for the same editor.</p>
<p>This is what the editor should look like:</p>
<p><img src="./images/draft-static-toolbar-editor.png" alt="Draft editor with the static toolbar plugin enabled"></p>
<p>This editor is with default settings and as said it can be further customised. You can see more about configuring the plugin from the <a href="https://www.draft-js-plugins.com/plugin/static-toolbar">static toolbar plugin docs</a>.</p>
<h2>Conclusion</h2>
<p>draft-js-plugins offers a bunch of great and often used features that can be added to your web application with ease. We saw how to add a single plugin to a Draft editor and we just scratched the surface with it since we could add also stuff like emojis, stickers and mentions to our application if we wished.</p>
<p>This was an introduction to draft-js-plugins and I will be writing more posts on different plugins and how you can use them. For now you can check out the <a href="https://www.draft-js-plugins.com/">documentation</a> for more info on different plugins and they also provide good instructions on how to use them.</p>
<p>As always I would be happy to hear from you! So if you have any questions or comments don't hesitate to drop a comment below! Also be sure to subscribe to CodePulse newsletter to stay tuned on the latest news and posts about modern web development. Newsletters go out usually max once a month and you can unsubscribe anytime you want.</p>



When you start to use Draft.js you quickly realize that it doesn't come with a lot of ready to use features or utilities. Yes, you can build e.g. a toolbar with rich text editing features but there is not one ready for you to use in Draft.js.

_If you are not yet familiar with Draft.js be sure to read my post on [Getting started with Draft.js](/blog/getting-started-with-draft-js/)._

It is possible for you to create all kind of cool features to your editor such as static toolbar, Slack-like emojis, Facebook-like stickers & mentions. But it requires a lot of work and you need to know a lot of how Draft.js works. Thankfully there is draft-js-plugins that does all the heavy lifting for you.

## draft-js-plugins

This is what is said in the [draft-js-plugins homepage](https://www.draft-js-plugins.com/):

_Facebook's rich-text editor framework DraftJS built on top of React allows you to create powerful editors. We're building a plugin architecture on top of it that aims to provide you with plug & play extensions. It comes with a set of plugins with great UX serving mobile & desktop as well as screen-readers. You can combine them in any way you want or build your own._

So with draft-js-plugins you get a set of plugins that work out of the box and they can be implemented to a Draft editor. Here is a list of the plugins that are currently being offered:

- Mention
- Emoji
- Image
- Video
- Sticker
- Hashtag
- Inline toolbar
- Side Toolbar
- Static Toolbar
- Undo
- Counter
- Anchor
- Linkify
- Focus
- Alignment
- Resizeable
- Drag'n'Drop
- Divider

## Setup for adding plugins

Usage of the plugins is pretty simple but depending on the plugin they may need some configuration. Let's see how we can take a Static toolbar plugin and add it to a Draft editor.

_Here is a link to a [codesandbox](/blog/online-code-editor-every-web-developer-should-know-about/) with the finished component: [https://codesandbox.io/s/km4436q4lv](https://codesandbox.io/s/km4436q4lv)_

Here is code for simple Draft editor before we add the plugin.

```jsx
import React, { Component } from "react";
import { Editor, EditorState } from "draft-js";

export default class SimpleStaticToolbarEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      <div>
        <div>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        </div>
      </div>
    );
  }
}
```

First we need to install the draft-js-plugins-editor by running the following:

```
yarn add draft-js-plugins-editor
```

Then we import editor component from draft-js-plugins-editor and replace the Draft.js editor component with it. The draft-js-plugins-editor's editor component is basically just a wrapper component for the Draft.js editor component. It adds "plugins" prop for the editor which will be used to pass plugins for the editor. Our component should look like this now:

```jsx
import React, { Component } from "react";
import { EditorState } from "draft-js";
import Editor from "draft-js-plugins-editor";

export default class SimpleStaticToolbarEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      <div>
        <div>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        </div>
      </div>
    );
  }
}
```

Now we are ready to add plugins for the editor. Next we will add the Static Toolbar plugin to our editor.

## Static toolbar plugin

Install the plugin by running the following:

```
yarn add draft-js-static-toolbar-plugin
```

After we have installed the plugin we import it and create a plugin out of it. Then we import the Toolbar component itself from the created plugin. I add the code for our **completed** component here next and explain what we did.

```jsx
import React, { Component } from "react";
import Editor, { createEditorStateWithText } from "draft-js-plugins-editor";
import createToolbarPlugin from "draft-js-static-toolbar-plugin";
import editorStyles from "./editorStyles.css";
import "../node_modules/draft-js-static-toolbar-plugin/lib/plugin.css";

const staticToolbarPlugin = createToolbarPlugin();
const { Toolbar } = staticToolbarPlugin;
const text = "You can format the text with the toolbar below";

export default class SimpleStaticToolbarEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      <div>
        <div className={editorStyles.editor}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={[
              staticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPluginstaticToolbarPlugin,
            ]}
          />
          <Toolbar />
        </div>
      </div>
    );
  }
}
```

So first we import the draft-js-static-toolbar-plugin on line 3. We also import some default styling on line 5 so our toolbar looks good. Feel free to customize the styling by yourself. Then we create the plugin out of it and import the `Toolbar` component from it on lines 7-9. We initialise the editor state with text with the help of `createEditorStateWithText()` function that comes with draft-js-plugins-editor. This is not necessary and we could as well initialise it with `EditorState.createEmpty()` if we'd like an empty editor. Lastly we pass the plugin for the `Editor` component inside the render method and render the `Toolbar` component. Note that when passing plugin(s) for the editor the variable must be an array since we can pass multiple plugins for the same editor.

This is what the editor should look like:

![Draft editor with the static toolbar plugin enabled](/blog-posts/introduction-to-draft-js-plugins/images/draft-static-toolbar-editor.png)

This editor is with default settings and as said it can be further customised. You can see more about configuring the plugin from the [static toolbar plugin docs](https://www.draft-js-plugins.com/plugin/static-toolbar).

## Conclusion

draft-js-plugins offers a bunch of great and often used features that can be added to your web application with ease. We saw how to add a single plugin to a Draft editor and we just scratched the surface with it since we could add also stuff like emojis, stickers and mentions to our application if we wished.

This was an introduction to draft-js-plugins and I will be writing more posts on different plugins and how you can use them. For now you can check out the [documentation](https://www.draft-js-plugins.com/) for more info on different plugins and they also provide good instructions on how to use them.

As always I would be happy to hear from you! So if you have any questions or comments don't hesitate to drop a comment below! Also be sure to subscribe to CodePulse newsletter to stay tuned on the latest news and posts about modern web development. Newsletters go out usually max once a month and you can unsubscribe anytime you want.


Do you want to add Slack-like emojis, Facebook-like stickers or mentions to your React application? In that case you should...