--- 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/6/webcomponent-pm/index.md" version: "6" last_updated: "2022-11-30T01:26:11Z" tokens: 754 --- Important This page documents TinyMCE 6. 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 `DOCTYPE` element to the target page, such as: ```html ``` The `DOCTYPE` declaration is required for the editor to function correctly. 2. Add the following `meta` elements to the head of page: ```html ``` 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). 3. Add the `tinymce` and `tinymce-webcomponent` packages, such as: ```sh npm install tinymce @tinymce/tinymce-webcomponent ``` 4. 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/). 5. Add a `script` element sourcing TinyMCE, such as: ```html ``` If a `script` element sourcing TinyMCE is not provided, the TinyMCE Web Component will load TinyMCE from the Tiny Cloud. 6. Add a `tinymce-editor` element where the editor should appear. ```html ``` The default TinyMCE editor will load at this location if the page is opened in a web browser. ## Example: adding the TinyMCE Web Component to an HTML page The following example shows the TinyMCE Web Component in an HTML page, with: - Various TinyMCE configuration options set using attributes. - TinyMCE sourced from the Tiny Cloud. **Example** ```js /* No Javascript is required for this configuration. */ ``` ## 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/).