---
title: "Bundling a .zip version of TinyMCE with ES6 and Webpack"
description: "Bundling a .zip archive version of TinyMCE in a project using ES6 and Webpack"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webpack-es6-download/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/webpack-es6-download/index.md"
version: "6"
last_updated: "2023-11-30T00:23:05Z"
tokens: 673
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/webpack-es6-download/).
# Bundling a .zip version of TinyMCE with ES6 and Webpack

The following procedure will assist with bundling a `.zip` version of TinyMCE with [Webpack](https://webpack.js.org/) using [ES6+ syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). The procedure assumes the user has experience with [Webpack](https://webpack.js.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 [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/)

## 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. 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
```