---
title: "Bundling TinyMCE from NPM with ES6 and Vite"
description: "Bundling an NPM version of TinyMCE in a project using ES6 and Vite"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/index.md"
version: "latest"
last_updated: "2026-09-28T23:15:30Z"
tokens: 1773
---
# Bundling TinyMCE from NPM with ES6 and Vite

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

## Requirements

This guide requires the following:

- Node.js and NPM.
- Basic knowledge of how to use [Vite](https://vitejs.dev/).
- (Optional: For premium features) The latest premium .zip bundle of TinyMCE that includes premium plugins.

## Procedures

1. Create scaffolding for your project.

```sh
npm create vite@5 . && npm install tinymce
```
2. Or add `tinymce` and the following development dependencies to your existing project.

  - [`Vite`](https://vitejs.dev/)

For example:

```sh
npm install tinymce && npm install --save-dev vite
```
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.

> **Note:** This example will only work for TinyMCE 6.8.0 and later.
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/icons.min.js';

/* Required TinyMCE components */
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/models/dom/model.min.js';

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

/* 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';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

/* content UI CSS is required (using the default oxide skin) */
import 'tinymce/skins/ui/oxide/content.js';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import 'tinymce/skins/content/default/content.js';

/* 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_url: 'default',
    content_css: 'default',
    /* Alternatively to importing premium plugins directly, you can configure external_plugins to load premium plugins in a different location.
     * Remember to include the licensekeymanager plugin when using premium plugins.
    */
    // external_plugins: {
    //   'advcode': '<path_to_premium_plugins>/advcode/plugin.min.js',
    //   'tinycomments': '<path_to_premium_plugins>/tinycomments/plugin.min.js'
    //   'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/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/index.js`

```js
import * as editor from './editor';

const heading = () => {
  const element = document.createElement('h1');
  element.innerText = 'TinyMCE Vite 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. Import the index.js file in the index.html page, such as:

```html
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>

<body>
  <script type="module" src="/src/index.js"></script>
</body>

</html>
```
6. Run vite in dev mode to test the application

```sh
npx vite dev
```
7. If Vite

  1. **runs** successfully, check that the editor loads in the application.
  2. **fails**, review any errors and the configuration changes in this procedure; you may need to adjust for conflicts or other issues when bundling TinyMCE into an existing project.
8. Run vite in production mode to generate the bundle

```sh
npx vite build
```
9. If vite runs successfully, check that it generated by running:

```sh
npx vite preview
```

## 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/).