---
title: "Using the TinyMCE package with the Svelte framework"
description: "A guide on integrating the TinyMCE package into the Svelte framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/svelte-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/svelte-pm/index.md"
version: "6"
last_updated: "2024-07-17T01:16:44Z"
tokens: 826
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/svelte-pm/).
# Using the TinyMCE package with the Svelte framework

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

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

## Prerequisites

This procedure 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@5 tinymce-svelte-demo -- --template svelte
```
2. Change to the newly created directory.

```sh
cd tinymce-svelte-demo
```
3. Install the `tinymce` and the `tinymce-svelte` editor component, such as:

```sh
npm install tinymce@^6 @tinymce/tinymce-svelte
```
4. Install the `vite-plugin-static-copy` development dependency, such as:

```sh
npm install -D vite-plugin-static-copy
```
5. Open `vite.config.js` and configure the `vite-plugin-static-copy` plugin to copy TinyMCE to the `public/` directory, such as:

```js
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteStaticCopy } from 'vite-plugin-static-copy'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        { src: 'node_modules/tinymce/*', dest: 'tinymce' }
      ]
    }),
    svelte()
  ],
})
```
6. Open `src/App.svelte` and replace the contents with:

```html
<script>
import Editor from '@tinymce/tinymce-svelte';
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>Hello Tiny</h1>
  <Editor
    licenseKey='your-license-key'
    scriptSrc='tinymce/tinymce.min.js'
    value='<p>This is the initial content of the editor.</p>'
    {conf}
  />
</main>
```
7. Test the application using the Node.js development server.

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

```sh
npm run dev
```
  - To stop the development server, select on the command line or command prompt and press *Ctrl+C*.

## Next Steps

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

  - [TinyMCE basic setup](../basic-setup/).
  - [The TinyMCE Svelte integration technical reference](../svelte-ref/).