--- title: "Using the TinyMCE .zip package with the Web Component" description: "A guide on integrating a .zip version of TinyMCE into the Web Component." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webcomponent-zip/" md_url: "https://www.tiny.cloud/docs/tinymce/6/webcomponent-zip/index.md" version: "6" last_updated: "2022-11-30T01:26:11Z" tokens: 646 --- 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-zip/). # Using the TinyMCE .zip 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 a `script` element sourcing the TinyMCE Web Component (`tinymce-webcomponent.js`), such as: ```html ``` The `tinymce-webcomponent` can also be sourced from [npmjs](https://www.npmjs.com/package/@tinymce/tinymce-webcomponent). 4. 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. For information on the available options for sourcing TinyMCE, see: [Loading TinyMCE](../webcomponent-ref/#loading-tinymce). 5. 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/).