---
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/latest/webcomponent-pm/index.md"
version: "latest"
last_updated: "2025-12-10T03:38:03Z"
tokens: 479
---
# 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. (Optional) For premium plugins, install the `tinymce-premium` package:

```sh
npm install tinymce-premium@^8.3
```
For more information, see: [Installing premium plugins](../npm-projects/#install-premium-plugins).
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
<script>
  var editorConfig= {
    license_key: 'gpl'
  }
</script>
<tinymce-editor config="editorConfig"></tinymce-editor>
```
The default TinyMCE editor will load at this location if the page is opened in a web browser.

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