--- title: "Bundling TinyMCE from NPM with Webpack using ES6 modules" description: "Bundling TinyMCE in a project using Webpack with ES6" canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webpack-es6-npm/" md_url: "https://www.tiny.cloud/docs/tinymce/latest/webpack-es6-npm/index.md" version: "latest" last_updated: "2026-09-28T23:15:30Z" tokens: 1836 --- # Bundling TinyMCE from NPM with Webpack using ES6 modules The following procedure will assist with bundling an NPM 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/). ## 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 ``` 2. 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 /* Import TinyMCE */ import tinymce from 'tinymce'; /* Default icons are required. After that, import custom icons if applicable */ import 'tinymce/icons/default'; /* Required TinyMCE components */ import 'tinymce/themes/silver'; import 'tinymce/models/dom'; /* Import the default skin (oxide). Replace with a custom skin if required. */ import 'tinymce/skins/ui/oxide/skin.css'; /* Import plugins */ import 'tinymce/plugins/advlist'; import 'tinymce/plugins/code'; import 'tinymce/plugins/emoticons'; import 'tinymce/plugins/emoticons/js/emojis'; import 'tinymce/plugins/link'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/table'; import 'tinymce/plugins/help'; import 'tinymce/plugins/help/js/i18n/keynav/en'; /* content UI CSS is required (using the default oxide skin) */ import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css'; /* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */ import contentCss from 'tinymce/skins/content/default/content.css'; /* Initialize TinyMCE */ export function render () { tinymce.init({ selector: 'textarea#editor', license_key: 'gpl', 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() }); }; ``` > **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). 3. Update the project Webpack configuration to load the TinyMCE CSS and to optimize the TinyMCE assets. Example `webpack.config.js` ```js const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: './src/index.js', resolve: { extensions: ['.js'] }, plugins: [ new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ title: 'TinyMCE Webpack Demo', meta: { viewport: 'width=device-width, initial-scale=1' } }), ], module: { rules: [ { test: /skin\.css$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader' ], }, { test: /content\.css$/i, use: [ 'css-loader' ], }, ], }, optimization: { splitChunks: { chunks: 'all', cacheGroups: { tinymceVendor: { test: /[\\/]node_modules[\\/](tinymce)[\\/](.*js|.*skin.css)|[\\/]plugins[\\/]/, name: 'tinymce' }, }, } }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), clean: true, }, }; ``` 4. 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 heading = () => { const element = document.createElement('h1'); element.innerText = 'TinyMCE Webpack demo'; return element; }; const editorArea = () => { const element = document.createElement('textarea'); element.id = 'editor'; return element; }; const parent = document.createElement('p'); parent.appendChild(editorArea()); document.body.appendChild(heading()); document.body.appendChild(parent); editor.render(); ``` 5. Run Webpack to test the bundle, such as: ```sh webpack --config webpack.config.js ``` If Webpack runs successfully, check that the editor loads in the application. If Webpack 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/).