---
title: "Bundling an npm version of TinyMCE 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/7/vite-es6-npm/index.md"
version: "7"
last_updated: "2025-11-13T00:03:34Z"
tokens: 1631
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/vite-es6-npm/).
# Bundling an npm version of TinyMCE 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/), 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 [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, 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.

> **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 a skin (can be a custom skin instead of the default) */
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 premium plugins */
/* NOTE: Download separately and add these to /src/plugins */
/* import './plugins/<plugincode>'; */

/* content UI CSS is required */
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',
    plugins: 'advlist code emoticons link lists table',
    toolbar: 'bold italic | bullist numlist | link emoticons',
    skin_url: 'default',
    content_css: 'default',
  });
};
```

1. 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();
```
2. 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>
```
3. Run vite in dev mode to test the application

```sh
npx vite dev
```
4. 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.
5. Run vite in production mode to generate the bundle

```sh
npx vite build
```
6. 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/).