Using the TinyMCE package with the Web Component

The Official TinyMCE Web Component integrates TinyMCE into Web Component projects. This procedure creates an HTML page containing a TinyMCE editor.


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:

    <!DOCTYPE html>

    The DOCTYPE declaration is required for the editor to function correctly.

  2. Add the following meta elements to the head of page:

      <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.

  3. Add the tinymce and tinymce-webcomponent packages, such as:

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

    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:

    /* 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.

  5. Add a script element sourcing TinyMCE, such as:

    <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.

  6. Add a tinymce-editor element where the editor should appear.


    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.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<p>Welcome to the TinyMCE Web Component example!</p>
<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

      Adding the `tinymce-editor` element with various options set as attributes.
      plugins="advlist autolink lists link image charmap preview anchor
        searchreplace visualblocks code fullscreen
        insertdatetime media table code help wordcount"
      toolbar="undo redo | blocks | bold italic backcolor |
        alignleft aligncenter alignright alignjustify |
        bullist numlist outdent indent | removeformat | help"

      <!-- Adding some initial editor content -->
      &lt;p&gt;Welcome to the TinyMCE Web Component example!&lt;/p&gt;


      Sourcing the `tinymce-webcomponent` from jsDelivr,
      which sources TinyMCE from the Tiny Cloud.
    <script src=""></script>

No Javascript is required for this configuration.

Next Steps