---
title: "Bundling a .zip version of TinyMCE with CommonJS and Browserify"
description: "Bundling a .zip archive version of TinyMCE in a project using CommonJS and Browserify"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/browserify-cjs-download/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/browserify-cjs-download/index.md"
version: "latest"
last_updated: "2026-09-28T23:15:30Z"
tokens: 1935
---
# Bundling a .zip version of TinyMCE with CommonJS and Browserify

The following procedure will assist with bundling a `.zip` version of TinyMCE with [Browserify](https://browserify.org/) using [CommonJS syntax](https://en.wikipedia.org/wiki/CommonJS). The procedure assumes the user has experience with [Browserify](https://browserify.org/) and [CommonJS syntax](https://en.wikipedia.org/wiki/CommonJS). The following steps provide a working example for bundling a basic TinyMCE configuration with [Browserify](https://browserify.org/).

## Requirements

This guide requires the following:

- Node.js and npm
- Basic knowledge of how to use [Browserify](https://browserify.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.

  - [`promise-polyfill`](https://www.npmjs.com/package/promise-polyfill)
  - [`browserify`](https://www.npmjs.com/package/browserify)
  - [`browserify-css`](https://www.npmjs.com/package/browserify-css)
  - [`brfs`](https://www.npmjs.com/package/brfs)

For example:

```sh
npm install --save-dev \
  promise-polyfill \
  browserify \
  browserify-css \
  brfs
```
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 `dom` model
  - The `default` icon pack. This is always required and provides the base set of icons for all TinyMCE functionality. The default icons can be extended or overridden using additional icon packs.
  - 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. When using premium plugins with a commercial license, the `licensekeymanager` plugin is also required.

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.

Example `src/editor.js`

```js
const fs = require('fs');

/* Import TinyMCE */
const tinymce = require('../tinymce/js/tinymce/tinymce.js');

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

/* Required TinyMCE components */
require('../tinymce/js/tinymce/themes/silver/theme.js');
require('../tinymce/js/tinymce/models/dom/model.js');

/* Import the default skin (oxide). Replace with a custom skin if required. */
require('../tinymce/js/tinymce/skins/ui/oxide/skin.css');

/* Import plugins - include the relevant plugin in the 'plugins' option. */
require('../tinymce/js/tinymce/plugins/advlist');
require('../tinymce/js/tinymce/plugins/code');
require('../tinymce/js/tinymce/plugins/emoticons');
require('../tinymce/js/tinymce/plugins/emoticons/js/emojis');
require('../tinymce/js/tinymce/plugins/link');
require('../tinymce/js/tinymce/plugins/lists');
require('../tinymce/js/tinymce/plugins/table');
require('../tinymce/js/tinymce/plugins/help');
require('../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en');

/* Import premium plugins */
/* From NPM package (recommended) */
require('tinymce-premium/plugins/advcode');
require('tinymce-premium/plugins/licensekeymanager');
/* From ZIP download - download separately and add to /src/plugins */
/* require('./plugins/<plugincode>'); */

/* content UI CSS is required (using the default oxide skin) */
const contentUiSkinCss = fs.readFileSync('tinymce/js/tinymce/skins/ui/oxide/content.css', { encoding: 'UTF-8' });

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
const contentCss = fs.readFileSync('tinymce/js/tinymce/skins/content/default/content.css', { encoding: 'UTF-8' });

/* Initialize TinyMCE */
exports.render = () => {
  tinymce.init({
    selector: 'textarea#editor',
    license_key: 'gpl',
    /* All plugins need to be imported and added to the plugins option. */
    plugins: 'advlist code emoticons link lists table help',
    toolbar: 'bold italic | bullist numlist | link emoticons',
    skin: false,
    content_css: false,
    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
    /* Optional: Configure external_plugins for lazy loading premium plugins
     * Remove the import or require statement for any premium plugin you want to lazy load,
     * then uncomment and configure external_plugins below:
    */
    // external_plugins: {
    //   'advcode': '/plugins/advcode/plugin.min.js',
    //   'tinycomments': '/plugins/tinycomments/plugin.min.js'
    // },

  });
};
```

> **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](../license-key/#setting-the-license).
4. Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.

Example `src/main.js`

```js
const editor = require('./editor.js');
/* Create a textarea with id="editor" for the TinyMCE `selector` option */
const editorArea = () => {
  var element = document.createElement('textarea');
  element.id = 'editor';
  return element
};
/* Create a parent element for the textarea */
const parent = document.createElement('p');
/* Add elements to page */
parent.appendChild(editorArea());
document.body.appendChild(parent);
/* Initialize TinyMCE */
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 Browserify Demo</title>
  </head>
  <body>
    <h1>TinyMCE Browserify Demo</h1>
    <script src="main.bundle.js"></script>
  </body>
</html>
```
5. Run Browserify to test the bundle, such as:

```sh
browserify -t brfs -g browserify-css src/main.js -o dist/main.bundle.js
```
If Browserify runs successfully, check that the editor loads in the application. If Browserify 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/).