---
title: "Svelte integration"
description: "Svelte TinyMCE component."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/svelte/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 1714
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/svelte-cloud/).
# Svelte integration

## TinyMCE Svelte integration quick start guide

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 using the [`sveltejs/template` project](https://github.com/sveltejs/template) adds a TinyMCE editor based using the TinyMCE Svelte integration.

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. Create a Svelte application using the [Svelte template project](https://github.com/sveltejs/template), for example:

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

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

For example:

*File:* `src/App.svelte`

```html
<script lang="ts">
  import Editor from '@tinymce/tinymce-svelte';
</script>
<main>
  <h1>Hello Tiny</h1>
  <Editor></Editor>
</main>
```
4. 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
```
This will start a local development server, accessible at http://localhost:5000.
  - 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](#tinymcesvelteintegrationtechnicalreference).

## TinyMCE Svelte integration technical reference

Covered in this section:

- [Configuring the TinyMCE Svelte integration](#configuringthetinymcesvelteintegration)
- [Component binding](#componentbinding)
- [Event binding](#eventbinding)

### Configuring the TinyMCE Svelte integration

The `tinymce-svelte` `Editor` component accepts the following properties:

```jsx
<Editor
  apiKey="api-key"
  channel="5"
  id="uuid"
  inline=false
  disabled=false
  scriptSrc=undefined
  conf={}
  modelEvents="input change undo redo"
  value="value"
  text="readonly-text-output"
/>
```

#### apiKey

Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.

Default value `"no-api-key"`

Type String

##### Example using apiKey

```jsx
<Editor apiKey="your-api-key"></Editor>
```

#### channel

Specifies the Tiny Cloud channel to use. For information on Tiny Cloud deployment channels, see: [Specifying the TinyMCE editor version deployed from Cloud](../editor-plugin-version/).

Default value `"5"`

Type String

##### Example using channel

```jsx
<Editor channel="5-dev"></Editor>
```

#### id

Specified an Id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method.

Default value Automatically generated UUID

Type String

##### Example using id

```jsx
<Editor id="my-unique-identifier"></Editor>
```

#### inline

Set the editor to inline mode.

Default value `false`

Type Boolean

##### Example using inline

```jsx
<Editor inline="true"></Editor>
```

#### disabled

Set the editor to readonly mode.

Default value `false`

Type Boolean

##### Example using disabled

```jsx
<Editor disabled="true"></Editor>
```

#### scriptSrc

Use the `scriptSrc` property to specify the location of TinyMCE to lazy load when the application is not using Tiny Cloud. This setting is required if the application uses a self-hosted version of TinyMCE, such as the TinyMCE npm package or a .zip package of TinyMCE.

Type String

##### Example using scriptSrc

```jsx
<Editor scriptSrc="/path/to/tinymce.min.js"></Editor>
```

#### conf

Specify a set of properties for the `Tinymce.init` method to initialize the editor.

Default value `{}`

Type Object

##### Example using conf

```jsx
<script>
  let conf = { toolbar: 'undo redo', menubar: false }
</script>
<main>
  <Editor
    {conf}
  />
</main>
```

### Component binding

#### Input binding

The editor component allows developers to bind the contents of editor to a variable. By specifying the `bind:value`, developers can create a two-way binding on a selected variable.

#### Example of input binding

```jsx
<script>
  let value = 'some content';
</script>
<main>
  <Editor bind:value={value} />
  <div>{@html value}</div>
  <textarea bind:value={value}></textarea>
</main>
```

#### Binding text output

The editor exposes the `text` property, which developers can `bind` to retrieve a read-only value of the editor content as text. Changes will not propagate up to the editor if the `text` bound variable changes. It will only propagate changes from the editor.

#### Example of text binding

```jsx
<script>
  let text = '';
</script>
<main>
  <Editor bind:text={text} />
  <div>{text}</div>
</main>
```

### Event binding

Functions can be bound to editor events, such as:

```jsx
<Editor on:resizeeditor={this.handlerFunction} />
```
When the handler is called (**handlerFunction** in this example), it is called with two arguments:

`event` The TinyMCE event object.

`editor` A reference to the editor.

Ensure event names are specified in lower-case (event names are case-sensitive).

The following events are available:

- `activate`
- `addundo`
- `beforeaddundo`
- `beforeexeccommand`
- `beforegetcontent`
- `beforerenderui`
- `beforesetcontent`
- `beforepaste`
- `blur`
- `change`
- `clearundos`
- `click`
- `contextmenu`
- `copy`
- `cut`
- `dblclick`
- `deactivate`
- `dirty`
- `drag`
- `dragdrop`
- `dragend`
- `draggesture`
- `dragover`
- `drop`
- `execcommand`
- `focus`
- `focusin`
- `focusout`
- `getcontent`
- `hide`
- `init`
- `keydown`
- `keypress`
- `keyup`
- `loadcontent`
- `mousedown`
- `mouseenter`
- `mouseleave`
- `mousemove`
- `mouseout`
- `mouseover`
- `mouseup`
- `nodechange`
- `objectresizestart`
- `objectresized`
- `objectselected`
- `paste`
- `postprocess`
- `postrender`
- `preprocess`
- `progressstate`
- `redo`
- `remove`
- `reset`
- `resizeeditor`
- `savecontent`
- `selectionchange`
- `setattrib`
- `setcontent`
- `show`
- `submit`
- `undo`
- `visualaid`