14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

Integrate Svelte with TinyMCE rich text editor

May 26th, 2021

3 min read

Picture of a laptop with code

Written by

Joe Robinson


How-to Use TinyMCE

While React, Vue, and Angular are widely known frameworks, there’s another framework that also builds web applications quickly. It’s called Svelte.

Svelte is renowned as a fast, nimble framework for building web based applications. How? It increases its speed (compared to other frameworks) by building your application into JavaScript at build time, not run time.

With Svelte, your web app is assembled when the human-readable JavaScript, HTML, and CSS is converted into code a browser can understand (compile time). By contrast, other frameworks assemble the app at run time, which is when the browser loads and shows the app on  screen.

It also boasts some other advantages. Svelte features can be added incrementally to your current web application, and it updates your changes while it’s running.

Getting started with Svelte

There are three parts to configuring Svelte applications. The Script tags, HTML tags, and the CSS style. The specific syntax of the Svelte application calls for the Script tags to appear first, with the HTML tags in the middle, and the CSS style tags last.

It’s easy to try out a demo in your browser using Svelte’s REPL. With a locally built demo, however, you can build a Svelte application with more features, and without third-party scripts being blocked by the browser.

To build a local demo, start by installing Svelte on your local machine. To do this, you’ll need the following:

1. Install Svelte

Open your command line terminal, and run the npx and degit command. The npx command draws content from a local, or a remote repository – in this case, the Sveltejs repository. After you type in the sveltejs/template part of the command, name your test project. In the following example, the test project is named “svelte-rich-text-editor”:

<span data-preserver-spaces="true">npx degit sveltejs/template svelte-rich-text-editor</span>

The terminal will return a message to let you know the copy of Svelte has worked: cloned sveletejs/template#HEAD

cd svelte-rich-tet-editor

Run the npm install command to update the node packages on your system.

npm install

With the updates finished, you can then build your Svelte demo app:

npm run dev
A command-line screen showing the Svelte build process.

You can then open your demo web app. Svelte runs your app on localhost:5000. Open the localhost link that Svelte prints on the command line in your web browser. The Svelte ‘Hello World’ screen shows the speed of setting up and running a web application on Svelte:

An image showing the hello world demo screen in a browser

The web application will automatically update when you make changes to the demo app source files. You can switch off the web app by pressing CTRL + C on the command line terminal.

3. Configure the demo with TinyMCE rich text editor

Change into the src/ directory of your demo application:

cd src/

Open the App.svelte file inside the src directory. This is the file where you can make changes, to place the TinyMCE rich text editor inside a Svelte application.

You can open the App.svelte with your preferred text editor.

When you have the file open, you will need to make the following adjustments to integrate TinyMCE:

  • A script area that includes a variable for the application and some default text
  • A constant inside the script that loads the third party application with the window function.
  • The <svelte:head> tags that calls out to the cdn of the variable, and uses the on:load function.
  • Add a textarea tag to the main text section.

Start with the script area tags:

  let tiny; //set up a tiny variable
  let value = 'This is TinyMCE running on Svelte'; //set up a value for Svelte to add to the HTML

  const tinymceloaded = () => { 
    tiny = window.tinymce.init({ //include the tinymce.init statement with the window function
    selector: 'textarea',

Set up the the  <svelte:head> tags:

<textarea bind:value={value}/>

The update application then appears in your browser:

A screen showing the TinyMCE rich text editor running on Svelte in the browser.

4. An alternative syntax for your rich text editor

You can also load the <svelte.head> content before the script tags, and adjust the script tags. In this example, we included the premium emoticon plugin, and the emoticon icon on the TinyMCE toolbar:

<script src="https://cdn.tiny.cloud/1/tiny-api-key-here/tinymce/5/tinymce.min.js" referrerpolicy="origin" on:load={tinymceloaded}></script>
</svelte:head> //Use the onload function with the tinymceloaded variable
function tinymceloaded() { //set up the tinymceloaded variable as a function here
    selector: 'textarea',
    plugins: 'emoticons',
    toolbar: 'emoticons’

<textarea></textarea> //Svelte also works with traditional <textarea> syntax

What’s next?

You can find out more about running TinyMCE rich text editor on different frameworks, such as Angular and React. To find out more about our premium plugins like the emoticons, see the premium plugins documentation, or talk to our sales team for more information.

You can sign up for an API key to try out the different premium plugins, and see which ones work for you and for your project.

byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCEMay 22nd, 2024

    Understanding accessible documents and options from TinyMCE

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge


© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.