Using the TinyMCE package with the Svelte framework

The Official TinyMCE Svelte component integrates TinyMCE into Svelte applications. This procedure creates a basic Svelte application using the sveltejs/template project adds a TinyMCE editor based using the TinyMCE Svelte integration.

For examples of the TinyMCE integration, visit the tinymce-svelte storybook.


This procedure requires Node.js (and npm).


  1. Create a Svelte application using the Svelte template project, for example:

    npx degit sveltejs/template my-tiny-app
    cd my-tiny-app
  2. Install the tinymce and the tinymce-svelte editor component, such as:

    npm install tinymce @tinymce/tinymce-svelte
  3. Install the rollup-plugin-copy development dependency, such as:

    npm install rollup-plugin-copy -D
  4. Open rollup.config.js and configure the rollup copy plugin rollup-plugin-copy to copy TinyMCE to the public/ directory, such as:

    /* Existing import statements */
    import copy from 'rollup-plugin-copy'
    /* Skip to the export statement, `plugins` item and add `copy`*/
    export default {
      /* Existing key: values... */
      plugins: [
          targets: [
            { src: 'node_modules/tinymce/*', dest: 'public/tinymce' }
        /* More existing configuration... */
  5. Open src/App.svelte and add:

    • An import statement for the TinyMCE component.

    • The <Editor /> as a placeholder for the editor.

    • The scriptSrc property for the Editor placeholder.

      For example:

      File: src/App.svelte

      <script lang="ts">
      import Editor from '@tinymce/tinymce-svelte';
        <h1>Hello Tiny</h1>
  6. Test the application using the Node.js development server.

    • To start the development server, in the project’s root directory, run:

      npm run dev

      This will start a local development server, accessible at http://localhost:8080.

    • To stop the development server, select on the command line or command prompt and press Ctrl+C.

Next Steps