---
title: "Using the TinyMCE package with the Web Component"
description: "A guide on integrating the TinyMCE package into the Web Component."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/webcomponent-pm/index.md"
version: "7"
last_updated: "2025-05-14T11:33:07Z"
tokens: 668
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/webcomponent-pm/).
# Using the TinyMCE package with the Web Component

The [Official TinyMCE Web Component](https://github.com/tinymce/tinymce-webcomponent) integrates TinyMCE into Web Component projects. This procedure creates an HTML page containing a TinyMCE editor.

## Procedure

To add a TinyMCE editor to a web page using the TinyMCE Web Component:

1. Add the following meta tags to the head section of the page:

```html
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
```
The second `meta` element is required for the editor to function correctly on mobile devices. For information on the viewport `meta` element, see: [MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics).
2. Add the `tinymce` and `tinymce-webcomponent` packages, such as:

```sh
npm install tinymce @tinymce/tinymce-webcomponent
```
3. Bundle TinyMCE with the Web Component application using a module loader (such as Webpack).

> **Important:** Tiny does not recommend bundling `tinymce` and `tinymce-webcomponent` with a module loader. Bundling these packages can be complex and error prone.
To bundle TinyMCE using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `tinymce-webcomponent` package, then the other required TinyMCE-related imports.

Example of bundling:

```js
/* Add the tinymce-webcomponent wrapper to the bundle */
import { Editor } from '@tinymce/tinymce-webcomponent';
/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
```
For instructions on bundling TinyMCE, see: [Bundling TinyMCE](../introduction-to-bundling-tinymce/).
4. Add a `script` element sourcing the output file, such as:

```html
<script src="/path/to/bundle.js"></script>
```
If a `script` element sourcing TinyMCE is not provided, the TinyMCE Web Component will load TinyMCE from the Tiny Cloud.
5. Add a `tinymce-editor` element where the editor should appear.

```html
<tinymce-editor license-key="your-license-key"></tinymce-editor>
```
The default TinyMCE editor will load at this location if the page is opened in a web browser.
6. Update the `license-key` option in the editor element and include your [License Key](../license-key/).

## Next Steps

- For information on customizing, see:

  - The TinyMCE Web Component, see: [The TinyMCE Web Component Technical Reference](../webcomponent-ref/).
  - [TinyMCE basic setup](../basic-setup/).