Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Bundling an npm version of TinyMCE with ES6 and Rollup.js

Bundling an npm version of TinyMCE in a project using ES6 and Rollup.js

Contribute to this page

The following procedure will assist with bundling an npm version of TinyMCE with Rollup.js using ES6+ syntax. The procedure assumes the user has experience with Rollup.js and ES6+ syntax. The following steps provide a working example for bundling a basic TinyMCE configuration with Rollup.js, and provides links to reference pages at the end of the procedure for bundling additional customizations with the editor.

If TinyMCE will be used with a JavaScript framework (such as React.js, Angular, or Vue.js) the bundle will also require the relevant framework integration package (where available). For a list of supported framework integrations, see: Integrate with other projects.


This guide requires the following:

  • Node.js and npm
  • Basic knowledge of how to use Rollup.js
  • (Optional: For premium features) The latest premium .zip bundle of TinyMCE for including premium plugins


  1. Add tinymce and the following development dependencies to the project.

    For example:

     npm install tinymce &&
     npm install --save-dev \
       postcss \
       rollup \
       @rollup/plugin-commonjs \
       @rollup/plugin-node-resolve \
       rollup-plugin-css-bundle \
       rollup-plugin-postcss \
  2. Create a new source file for importing the required components from TinyMCE and configuring the editor.

    The following components are required to bundle TinyMCE:

    • The tinymce global
    • The silver theme
    • The default icon pack. It is required, but the default icons can be overridden using a custom or premium icon pack.
    • A skin for styling the user interface, including toolbars and menus. This can be a premium or custom skin.

    The following components are likely required:

    • Content CSS for styling editor content. This can be a community, premium, or custom content CSS.
    • Any plugins to be used with the editor.
    • A custom or premium icon pack to extend or override the default icons for toolbar buttons, including contextual toolbars. This can be a premium or custom icon pack.

    Example src/editor.js

     /* Import TinyMCE */
     import tinymce from 'tinymce';
     /* Default icons are required for TinyMCE 5.3 or above */
     import 'tinymce/icons/default';
     /* A theme is also required */
     import 'tinymce/themes/silver';
     /* Import the skin */
     import 'tinymce/skins/ui/oxide/skin.css';
     /* Import plugins */
     import 'tinymce/plugins/advlist';
     import 'tinymce/plugins/code';
     import 'tinymce/plugins/emoticons';
     import 'tinymce/plugins/emoticons/js/emojis';
     import 'tinymce/plugins/link';
     import 'tinymce/plugins/lists';
     import 'tinymce/plugins/table';
     /* Import premium plugins */
     /* NOTE: Download separately and add these to /src/plugins */
     /* import './plugins/checklist/plugin'; */
     /* import './plugins/powerpaste/plugin'; */
     /* import './plugins/powerpaste/js/wordimport'; */
     /* Import content css */
     import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
     import contentCss from 'tinymce/skins/content/default/content.css';
     /* Initialize TinyMCE */
     export function render () {
         selector: 'textarea#editor',
         plugins: 'advlist code emoticons link lists table',
         toolbar: 'bold italic | bullist numlist | link emoticons',
         skin: false,
         content_css: false,
         content_style: contentUiCss.toString() + '\n' + contentCss.toString(),
  3. Update the project Rollup.js configuration to load the TinyMCE CSS.

    Example rollup.config.js

     import postcss from 'rollup-plugin-postcss';
     import commonjs from '@rollup/plugin-commonjs';
     import { nodeResolve } from '@rollup/plugin-node-resolve';
     export default {
       input: 'src/index.js',
       plugins: [
           include: "**/skin.css",
           inject: false,
           extract: true
           include: "**/content.css",
           inject: false,
           extract: false
       output: {
         file: 'dist/main.bundle.js',
         format: 'umd'
  4. Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.

    Example src/index.js

     import * as editor from './editor';
     const parent = document.createElement('p');
     function editorArea() {
       const element = document.createElement('textarea'); = 'editor';
       return element

    Example demo.html

     <!DOCTYPE html>
     <html lang="en">
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>TinyMCE Rollup Demo</title>
         <link rel="stylesheet" href="main.bundle.css">
         <h1>TinyMCE Rollup Demo</h1>
         <script src="main.bundle.js"></script>
  5. Run Rollup.js to test the bundle, such as:

     rollup --config

    If Rollup.js runs successfully, check that the editor loads in the application. If Rollup.js fails, review any errors and review the configuration changes in this procedure; you may need to adjust for conflicts or other issues when bundling TinyMCE into an existing project.

Next Steps

For information on:

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.