---
title: "Bundling a .zip version of TinyMCE with ES6 and Rollup.js"
description: "Bundling a .zip archive version of TinyMCE in a project using ES6 and Rollup.js"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/rollup-es6-download/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/rollup-es6-download/index.md"
version: "5"
last_updated: "2024-04-09T10:06:54Z"
tokens: 1809
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/rollup-es6-download/).
# Bundling a .zip version of TinyMCE with ES6 and Rollup.js

The following procedure will assist with bundling a `.zip` 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: [Integrate with other projects](../integrations/).

## Requirements

This guide requires the following:

- Node.js and npm
- Basic knowledge of how to use [Rollup.js](https://www.rollupjs.org/)

## Procedure

1. Download and unzip the latest version of TinyMCE:

  - For customers with access to premium self-hosted TinyMCE, download the `.zip` file from [Tiny Account: Downloads](/my-account/downloads/).
  - For all other users, download the **TinyMCE *Dev*** Package from [TinyMCE Self-hosted releases](/get-tiny/self-hosted/).
2. Add the following development dependencies to the project.

  - [`webpack`](https://www.npmjs.com/package/webpack)
  - [`webpack-cli`](https://www.npmjs.com/package/webpack-cli)
  - [`mini-css-extract-plugin`](https://www.npmjs.com/package/mini-css-extract-plugin)
  - [`html-webpack-plugin`](https://www.npmjs.com/package/html-webpack-plugin)
  - [`css-loader`](https://www.npmjs.com/package/css-loader)

For example:

```sh
npm install --save-dev \
  webpack \
  webpack-cli \
  mini-css-extract-plugin \
  html-webpack-plugin \
  css-loader
```
3. 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`

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

/* Default icons are required for TinyMCE 5.3 or above */
import '../tinymce/js/tinymce/icons/default/icons';

/* A theme is also required */
import '../tinymce/js/tinymce/themes/silver/theme';

/* Import the skin */
import '../tinymce/js/tinymce/skins/ui/oxide/skin.css';

/* Import plugins */
import '../tinymce/js/tinymce/plugins/advlist/plugin';
import '../tinymce/js/tinymce/plugins/code/plugin';
import '../tinymce/js/tinymce/plugins/emoticons/plugin';
import '../tinymce/js/tinymce/plugins/emoticons/js/emojis';
import '../tinymce/js/tinymce/plugins/link/plugin';
import '../tinymce/js/tinymce/plugins/lists/plugin';
import '../tinymce/js/tinymce/plugins/table/plugin';

/* 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/js/tinymce/skins/ui/oxide/content.css';
import contentCss from '../tinymce/js/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: contentUiCss.toString() + '\n' + contentCss.toString(),
  });
};
```
4. 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';

export default {
  input: 'src/index.js',
  plugins: [
    commonjs(),
    postcss({
      include: "*/skin.css",
      inject: false,
      extract: true
    }),
    postcss({
      include: "*/content.css",
      inject: false,
      extract: false
    })
  ],
  output: {
    file: 'public/main.bundle.js',
    format: 'umd'
  }
};
```
5. 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 parent = document.createElement('p');

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

parent.appendChild(editorArea());
document.body.appendChild(parent);

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

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <title>TinyMCE Rollup Demo</title>
    <link rel="stylesheet" href="main.bundle.css"></link>
  </head>
  <body>
    <script src="main.bundle.js"></script>
  </body>
</html>
```
6. 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 Tiny Skins and Icon Packs, see: [Bundling TinyMCE content CSS using module loading](../content-css/).
- Creating custom editor content CSS, see: [Content appearance options - `content_css`](../content-appearance/#content_css).
- Using TinyMCE skins provided by Tiny, including premium skins included with the Tiny Skins and 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 Tiny Skins and 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/).