Using the TinyMCE .zip 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-svelte editor component, such as:

    npm install @tinymce/tinymce-svelte
  3. 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>
  4. 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