---
title: "Bundling an npm version of TinyMCE with CommonJS and Webpack"
description: "Bundling an npm version of TinyMCE in a project using CommonJS and Webpack"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webpack-cjs-npm/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/webpack-cjs-npm/index.md"
version: "7"
last_updated: "2026-05-24T22:44:41Z"
tokens: 450
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/webpack-cjs-npm/).
# Bundling an npm version of TinyMCE with CommonJS and Webpack

The following procedure will assist with bundling an npm version of TinyMCE with [Webpack](https://webpack.js.org/) using [CommonJS syntax](https://en.wikipedia.org/wiki/CommonJS). The procedure assumes the user has experience with [Webpack](https://webpack.js.org/) and [CommonJS syntax](https://en.wikipedia.org/wiki/CommonJS). The following steps provide a working example for bundling a basic TinyMCE configuration with [Webpack](https://webpack.js.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 [Webpack](https://webpack.js.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.

  - [`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 tinymce &&
npm install --save-dev \
  webpack \
  webpack-cli \
  mini-css-extract-plugin \
  html-webpack-plugin \
  css-loader
```