Non-Potable Macchiato


    3.1.0 • Public • Published


    A simple WYSIWYG text editor utilizing Facebook's Draft.js library– customized by Synapse Studios

    npm version


    A demo is available at


    Installing via CLI

    // yarn
    yarn add @synapsestudios/draftjs-editor
    // npm
    npm install --save @synapsestudios/draftjs-editor

    Importing JS

    The default export is the React editor component itself:

    import SynapseDraft from '@synapsestudios/draftjs-editor';

    It also exports the following utilities:

    • DraftJSEditor - The default React component
    • Renderer(customBlocks) - A constructor that creates a new Draft to HTML renderer, currently only exposes the method convertRawToHTML(rawContent)
    • defaultBlocks - A default set of blocks to pass into the Renderer, these can be used or overridden in your own project as well
    • convertFromRaw() - Simple passthrough of DraftJS's convertFromRaw utility

    Importing CSS

    // Minified, autoprefixed css
    import '@synapsestudios/draftjs-editor/lib/draftjs-editor.min.css';
    // Not-minified, not-autoprefixed css
    import '@synapsestudios/draftjs-editor/lib/draftjs-editor.css';


    The two main component classNames are DraftJSEditor-root for the container and DraftJSEditor-editor for the editor itself.

    If you are using Stylus you can import the .styl file into your build:

    @import '@synapsestudios/draftjs-editor/lib/draftjs-editor.styl';



    Props are automatically passed onto the DraftJS Editor component. Anything usable from the api can also be passed into DraftJSEditor.

    • containerStyle (object) - passes inline styling directly into the parent component of the editor. This can also be modified by using CSS to style the class name DraftJSEditor-root
    • className (string) - Classes to add to the editor component
    • id (string) - ID to add to the editor component
    • customBlocks (object) - An object containing the custom blocks you want the editor to render, see defaultBlocks for examples
    • customBlockControls (array) - An array of keys of custom blocks to render the controls for

    Renderer Methods

    • convertRawToHTML(rawContent) - Takes raw DraftJS state object and renders it to HTML


    To run the project on your own computer:

    • Clone this repository
    • yarn install or npm install
    • yarn run storybook or npm run storybook
    • Visit http://localhost:5000/
    • Changes made to files in the src directory should immediately compile and be visible in your browser.


    npm i @synapsestudios/draftjs-editor

    DownloadsWeekly Downloads






    Unpacked Size

    278 kB

    Total Files


    Last publish


    • morio_sum
    • chestercharles
    • bobeagan
    • tdboone
    • synzach
    • nearengine
    • spruce-bruce
    • areida
    • agerbens
    • averhulst