---
title: "Bundling TinyMCE with a Svelte application"
description: "A guide on bundling TinyMCE with a Svelte application using a module loader."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/svelte-pm-bundle/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/svelte-pm-bundle/index.md"
version: "latest"
last_updated: "2026-05-24T22:45:03Z"
tokens: 1120
---
# Bundling TinyMCE with a Svelte application

The [Official TinyMCE Svelte component](https://github.com/tinymce/tinymce-svelte) integrates TinyMCE into [Svelte applications](https://svelte.dev/). This procedure creates a basic Svelte application containing a bundled TinyMCE editor.

For examples of the TinyMCE integration, visit the [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/).

## Prerequisites

Requires [Node.js (and npm)](https://nodejs.org/).

## Procedure

1. Use the [Vite](https://github.com/vitejs/vite) package to create a new Svelte project named `tinymce-svelte-demo`, such as:

```sh
npm create vite@6 tinymce-svelte-demo -- --template svelte
```
2. Change to the project directory.

```sh
cd tinymce-svelte-demo
```
3. Install project dependencies.

```sh
npm install
```
4. Install the `tinymce` and `tinymce-svelte` packages:

```sh
npm install tinymce@^8 @tinymce/tinymce-svelte
```
5. (Optional) For premium plugins, install the `tinymce-premium` package:

```sh
npm install tinymce-premium@^8.3
```
For more information, see: [Installing premium plugins](../npm-projects/#install-premium-plugins).

> **Note:** For information on configuring premium plugins when bundling, see: [Using premium plugins](../bundling-plugins/#using-premium-plugins).
6. Using a text editor, create `src/editor.js` and set the contents to:

```js
// Add the @tinymce/tinymce-svelte wrapper to the bundle
import Editor from '@tinymce/tinymce-svelte';

// TinyMCE so the global var exists
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
import 'tinymce/plugins/wordcount';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

// Export Editor component for use in Svelte components
export default Editor;
```
7. Using a text editor, open `src/App.svelte` and replace the contents with:

```svelte
<script>
import Editor from './editor.js';
let content = '<p>This is the initial content of the editor.</p>';
let conf = {
  height: 500,
  menubar: false,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
    'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
  ],
  toolbar: 'undo redo | blocks | ' +
    'bold italic forecolor | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'removeformat | help',
}
</script>

<main>
  <h1>TinyMCE Svelte Demo</h1>
  <Editor
    licenseKey='gpl'
    value={content}
    conf={conf}
  />
</main>
```
8. Run the development server:

```sh
npm run dev
```
The development server uses Vite to bundle your application on-the-fly. Vite processes all the `import` statements and includes the TinyMCE modules in the development bundle.
9. Build the application for production:

```sh
npm run build
```
This command creates an optimized production bundle in the `dist` directory.
10. Preview the production build:

```sh
npm run preview
```
11. Update the `licenseKey` property in the editor component and include your [License Key](../license-key/).

## Next Steps

- For information on bundling, see: [Introduction to bundling TinyMCE](../introduction-to-bundling-tinymce/)
- See the following for additional information:

  - [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/)
  - [TinyMCE basic setup](../basic-setup/)
  - [TinyMCE Svelte integration technical reference](../svelte-ref/)
- For the Svelte wrapper component, see: [the tinymce-svelte repository](https://github.com/tinymce/tinymce-svelte).