Which frameworks and platforms does TinyMCE integrate with?
Updated
TinyMCE lists first-party integrations for Angular, Blazor, React, Vue, Svelte, jQuery, Bootstrap, Rails, Django, Laravel, Node.js, Web Components, and WordPress. If your app uses one of these, you can add the editor with a few lines of code and an API key, then customize it through the 400+ APIs TinyMCE advertises. If your stack is not on that list, the editor can still be embedded as a JavaScript component, but you will be working from the core setup rather than a dedicated integration.
First-party integrations
The TinyMCE site names these frameworks and platforms as first-party integrations:
| Category | Frameworks / platforms |
|---|---|
| JavaScript front end | Angular, React, Vue, Svelte, Web Components |
| .NET | Blazor |
| CSS framework | Bootstrap |
| jQuery | jQuery |
| Back end / full stack | Rails, Django, Laravel, Node.js |
| CMS | WordPress |
The site also states that the editor has 12+ integrations and 400+ flexible APIs, and that these integrations are built to fit into an existing tech stack rather than requiring a rewrite.
What "integration" means in practice
For the JavaScript frameworks, the integration is a wrapper component you add to your project. The site's example is an Angular editor tag with an apiKey attribute and an init object that sets options such as height and the plugin list:
<h1>TinyMCE Angular Demo</h1>
<editor
apiKey="no-api-key"
[init]="{
height: 500,
plugins: ['a11ychecker','accordion','advlist','anchor','autolink','autosave',
'charmap','code','codesample','directionality','emoticons','exportpdf',
'exportword','fullscreen','help','image','importcss','importword',
'insertdatetime','link','lists','markdown','math','media','nonbreaking',
'pagebreak','preview','quickbars','save','searchreplace','table',
'visualblocks','visualchars']
}"
></editor>
The pattern is the same across frameworks: you supply an API key, pass a configuration object, and the editor renders inside your app. The plugin list in that example shows the kind of features you can switch on, from tables and media to PDF and Word export.
Getting an API key
The site's signup flow creates a Tiny account and states that you receive:
- A Free Plan with 1,000 editor loads per month
- TinyMCE core editing features
- A 14-day free trial of 21+ advanced features
You can sign up with Google, GitHub, or email. The example code uses the placeholder no-api-key, which is not a working key — you need to register to get one before the cloud-hosted editor will load.
Choosing based on your stack
- If you use Angular, React, Vue, Svelte, Blazor, Bootstrap, jQuery, Rails, Django, Laravel, Node.js, Web Components, or WordPress: start with the matching first-party integration. You get the shortest setup path and the framework-specific wrapper.
- If you use something else: the core editor is still available, but expect to handle the embedding yourself rather than following a dedicated integration guide.
- If you need heavy customization: the 400+ APIs are the relevant number. The integration gets the editor into your app; the APIs are what you use to change its behavior and UI.
- If you are evaluating cost: the site links to a pricing page and a "Buy vs Build" white paper. The free plan's 1,000 monthly editor loads and the 14-day advanced-feature trial are stated on the signup page; check the pricing page for what applies beyond that.
Common sticking points
- Placeholder keys: copying example code with
no-api-keywill not load a cloud-hosted editor. Register first. - Plugin availability: some plugins in the example list are advanced features. The signup page describes a 14-day trial of 21+ advanced features, so confirm which plugins your plan covers before building around them.
- WordPress: this is listed as an integration, but the site does not detail the setup steps on the page reviewed here. Check the docs for the WordPress-specific path.