---
title: "Bundling TinyMCE - Overview"
description: "Overview of bundling TinyMCE with module bundlers including required imports, plugins, and resources"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/bundling-guide/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/bundling-guide/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 1516
---
# Bundling TinyMCE - Overview

This guide provides an overview of bundling TinyMCE with module bundlers such as Webpack, Vite, Rollup, or Browserify. For bundler-specific setup instructions, see [Introduction to bundling TinyMCE](../introduction-to-bundling-tinymce/).

> **Note:** When using Tiny Cloud, dependencies and additional resources are automatically loaded. The information below applies to self-hosted installations using NPM or ZIP packages. All examples in this guide use NPM package import paths.

## Module syntax support

TinyMCE supports both ES6 modules and CommonJS modules:

- **ES6 modules**: Use `import` statements (shown in all documentation examples)
- **CommonJS modules**: Use `require()` statements

Both syntaxes are supported, but this documentation uses ES6 module syntax in all examples.

## Required imports

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: Basic recommended imports

```js
/* Import TinyMCE */
import tinymce from 'tinymce';

/* Default icons are required */
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (oxide is the default) */
import 'tinymce/skins/ui/oxide/skin.js';
import 'tinymce/skins/ui/oxide/content.js';

/* Content CSS for editor content styling */
import 'tinymce/skins/content/default/content.js';
```
For more information on:

- Icons, see [Bundling icons](../bundling-icons/)
- Themes, see [Bundling themes](../bundling-themes/)
- Models, see [Bundling models](../bundling-models/)
- Skins, see [Bundling skins](../bundling-skins/)
- Content CSS, see [Bundling content CSS](../bundling-content-css/)

## Importing plugins

Most plugins can be imported directly using their plugin code. The import path depends on whether the plugin is a community or premium plugin:

### Community plugins

```js
import 'tinymce/plugins/<plugincode>';
```

### Premium plugins

```js
import 'tinymce-premium/plugins/<plugincode>';
```

> **Important:** When using premium plugins with a commercial license, you must include the `licensekeymanager` plugin:
> 
> ```js
> import 'tinymce-premium/plugins/licensekeymanager';
> ```
> For more information, see [Using premium plugins](../bundling-plugins/#using-premium-plugins).
For detailed information on bundling plugins, see [Bundling plugins](../bundling-plugins/).

## Plugin gotchas

Some plugins require additional resource files (JS, CSS, or language files) to function properly. These must be explicitly imported when bundling:

### Plugins requiring additional resources

- **Emoticons**: Requires an emoji database file (`js/emojis.js`)
- **Help**: Requires a keyboard navigation language file (`js/i18n/keynav/<lang>.js`)
- **Autocorrect**: Requires a word list file (`js/en.js`)
- **Uploadcare**: Requires a webcomponent file (`js/uc-video.js`)

For specific import examples, see [Additional plugin resources](../bundling-plugins/#plugin-resources).

### Plugin dependencies

Some plugins depend on other plugins. For example:

- The `advtable` plugin requires the `table` plugin

Always import dependent plugins before the plugin that requires them. For a full list of plugin dependencies, see each plugin’s documentation page.

## CSS files

Some plugins require additional CSS files. Plugin CSS files are included automatically when importing plugins via their JS file.

When using skins, you must import both:

- The skin CSS file (`skin.css` or `skin.js`)
- The content skin CSS file (`content.css` or `content.js`)

> **Note:** Importing the `skin.js` and `content.js` files is an alternative way to load skin styles besides CSS imports. For bundlers like Webpack and Browserify that require additional setup to support CSS imports, the CSS examples in [Bundling skins](../bundling-skins/) remain valid.
For more information, see [Bundling skins](../bundling-skins/).

## Language files

Language files are optional and used for localizing the TinyMCE UI and plugin interfaces.

### Core UI language files

For community packages:

```js
import 'tinymce/langs/<language>.js';
```
For premium packages:

```js
import 'tinymce-premium/langs/<language>.js';
```

### Plugin language files

Plugin language files are separate from the main UI language files. The editor’s `language` option must be set to the desired language for the plugin’s language file to take effect.

```js
// Community plugin language file
import 'tinymce/plugins/<plugincode>/langs/<language>.js';

// Premium plugin language file
import 'tinymce-premium/plugins/<plugincode>/langs/<language>.js';
```

> **Note:**
> - US English is the default language, so the language packs do not include `en.js` language files (see [`language` option](../ui-localization/#language)). Note that the Help and Autocorrect plugins have their own `en.js` files.
> - Examples include the `.js` extension for clarity; most bundlers can resolve file extensions automatically.
For more information, see [UI localizations](../bundling-localization/).

## Next steps

- [Introduction to bundling TinyMCE](../introduction-to-bundling-tinymce/) - Bundler-specific guides
- [Bundling themes](../bundling-themes/) - Theme configuration and customization
- [Bundling models](../bundling-models/) - Model configuration
- [Bundling plugins](../bundling-plugins/) - Detailed plugin bundling information
- [Bundling skins](../bundling-skins/) - Skin configuration and customization
- [Bundling icons](../bundling-icons/) - Icon pack configuration
- [Content CSS](../bundling-content-css/) - Content styling configuration
- [UI localizations](../bundling-localization/) - Language file configuration