---
title: "Bundling an npm version of TinyMCE with ES6 and Rollup.js"
description: "Bundling an npm version of TinyMCE in a project using ES6 and Rollup.js"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/rollup-es6-npm/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/rollup-es6-npm/index.md"
version: "7"
last_updated: "2024-05-08T02:33:32Z"
tokens: 1892
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/rollup-es6-npm/).
# Bundling an npm version of TinyMCE with ES6 and Rollup.js

The following procedure will assist with bundling an npm version of TinyMCE with [Rollup.js](https://www.rollupjs.org/) using [ES6+ syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). The procedure assumes the user has experience with [Rollup.js](https://www.rollupjs.org/) and [ES6+ syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). The following steps provide a working example for bundling a basic TinyMCE configuration with [Rollup.js](https://www.rollupjs.org/), 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: [Installing TinyMCE](../installation/).

## Requirements

This guide requires the following:

- Node.js and npm
- Basic knowledge of how to use [Rollup.js](https://www.rollupjs.org/)
- (Optional: For premium features) The latest premium `.zip` bundle of TinyMCE for including premium plugins

## Procedure

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

  - [`postcss`](https://www.npmjs.com/package/postcss)
  - [`rollup`](https://www.npmjs.com/package/rollup)
  - [`@rollup/plugin-commonjs`](https://www.npmjs.com/package/@rollup/plugin-commonjs)
  - [`@rollup/plugin-node-resolve`](https://www.npmjs.com/package/@rollup/plugin-node-resolve)
  - [`rollup-plugin-css-bundle`](https://www.npmjs.com/package/rollup-plugin-css-bundle)
  - [`rollup-plugin-postcss`](https://www.npmjs.com/package/rollup-plugin-postcss)
  - [`rollup-plugin-string`](https://www.npmjs.com/package/rollup-plugin-string)

For example:

```sh
npm install tinymce &&
npm install --save-dev \
  postcss \
  rollup \
  @rollup/plugin-commonjs \
  @rollup/plugin-node-resolve \
  rollup-plugin-css-bundle \
  rollup-plugin-postcss \
  rollup-plugin-string
```
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 `dom` model
  - The `default` icon pack. This is always 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 community, premium or custom skin.
  - A *content skin* for styling UI features within the content such as table and image resizing. This can be a community, premium or custom skin.

The global must be first, the rest can be in any order.

Additional components that are optional but recommended:

  - *Content CSS* for styling editor content. There are community and premium style skins available, or use custom content CSS.
  - 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`

```js
/* Import TinyMCE */
import tinymce from 'tinymce';

/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (can be a custom skin instead of the default) */
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 by replacing <plugincode> */
/* NOTE: Download separately and add these to /src/plugins */
/* import './plugins/<plugincode>'; */

/* content UI CSS is required */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from 'tinymce/skins/content/default/content.css';

/* Initialize TinyMCE */
export function render () {
  tinymce.init({
    selector: 'textarea#editor',
    plugins: 'advlist code emoticons link lists table',
    toolbar: 'bold italic | bullist numlist | link emoticons',
    skin: false,
    content_css: false,
    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
  });
};
```
3. Update the project Rollup.js configuration to load the TinyMCE CSS.

Example `rollup.config.js`

```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: [
    nodeResolve(),
    commonjs(),
    postcss({
      include: "**/skin.css",
      inject: false,
      extract: true
    }),
    postcss({
      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`

```js
import * as editor from './editor';

const editorArea = () => {
  const element = document.createElement('textarea');
  element.id = 'editor';
  return element
};

const parent = document.createElement('p');
parent.appendChild(editorArea());
document.body.appendChild(parent);

editor.render();
```
Example `demo.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <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">
  </head>
  <body>
    <h1>TinyMCE Rollup Demo</h1>
    <script src="main.bundle.js"></script>
  </body>
</html>
```
5. Run Rollup.js to test the bundle, such as:

```sh
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:

- Adding TinyMCE plugins to the bundle, see: [Bundling TinyMCE plugins using module loading](../bundling-plugins/).
- Using editor content CSS provided by Tiny, including premium CSS included with the Enhanced Skins & Icon Packs, see: [Bundling TinyMCE content CSS using module loading](../bundling-content-css/).
- Creating custom editor content CSS, see: [Content appearance options - `content_css`](../add-css-options/#content_css).
- Using TinyMCE skins provided by Tiny, including enhanced skins included with the Enhanced Skins & Icon Packs, see: [Bundling TinyMCE skins using module loading](../bundling-skins/).
- Creating a custom skin for TinyMCE, see: [Create a skin for TinyMCE](../creating-a-skin/).
- Using icon packs provided by Tiny, including premium icons packs included with the Enhanced Skins & Icon Packs, see: [Bundling TinyMCE icon packs using module loading](../bundling-icons/).
- Creating a custom icon pack for TinyMCE, see: [Create an icon pack for TinyMCE](../creating-an-icon-pack/).
- Localizing the TinyMCE user interface using a language pack, see: [Bundling the User Interface localizations for TinyMCE](../bundling-localization/).