---
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/6/browserify-cjs-download/index.md"
version: "6"
last_updated: "2026-05-24T22:43:51Z"
tokens: 1791
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/browserify-cjs-download/).
# 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/), 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 [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, 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
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 a skin (can be a custom skin instead of the default) */
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/plugin.js');
require('../tinymce/js/tinymce/plugins/code/plugin.js');
require('../tinymce/js/tinymce/plugins/emoticons/plugin.js');
require('../tinymce/js/tinymce/plugins/emoticons/js/emojis');
require('../tinymce/js/tinymce/plugins/link/plugin.js');
require('../tinymce/js/tinymce/plugins/lists/plugin.js');
require('../tinymce/js/tinymce/plugins/table/plugin.js');
/* content UI CSS is required */
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',
/* All plugins need to be imported and added to the plugins option. */
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(),
});
};
```
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
TinyMCE Browserify Demo
TinyMCE Browserify Demo
```
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 Tiny Skins and 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 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/).