---
title: "Using the TinyMCE package with the Blazor framework"
description: "A guide on integrating the TinyMCE package into the Blazor framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/index.md"
version: "latest"
last_updated: "2026-09-28T23:15:30Z"
tokens: 1757
---
# Using the TinyMCE package with the Blazor framework
The [Official TinyMCE Blazor component](https://github.com/tinymce/tinymce-blazor) integrates TinyMCE into [Blazor applications](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor). This procedure creates a basic Blazor application and adds a TinyMCE editor using the TinyMCE Blazor integration. The basic Blazor application is based on the following tutorial: [Microsoft .NET Blazor Tutorial - Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/).
Select from the following guides:
- [Using Visual Studio Code (VS Code)](#using-visual-studio-code)
- [Using Visual Studio](#using-visual-studio)
- [Using a command prompt or terminal](#using-a-command-prompt-or-terminal)
## Using Visual Studio Code (VS Code)
### Prerequisites
This procedure requires:
- [Visual Studio Code (VS Code)](https://code.visualstudio.com/)
- [.NET SDK](https://dotnet.microsoft.com/en-us/download)
- [C# Dev Kit VS Code Extension](https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit)
Alternatively, the [.NET WinGet Configuration file](https://learn.microsoft.com/en-us/dotnet/core/install/windows#install-with-visual-studio-code) can be downloaded to install the necessary dependencies.
### Procedure
1. In VS Code, open the Command Palette by pressing `Ctrl+Shift+P`. Find `.NET: New Project` and select it to create a new project.
2. Select **Blazor Web App** from the list of templates and follow the steps to set up the project.
3. Using the Command Palette, find and select `.NuGet: Add NuGet Package`. Enter `TinyMCE.Blazor` and select the package along with the version to install.
4. To use the self-hosted version of `TinyMCE`, install the `TinyMCE` package from the Command Palette.
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).
## Using Visual Studio
### Prerequisites
This procedure requires:
- [Microsoft Visual Studio](https://docs.microsoft.com/en-us/visualstudio/windows/)
- [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/)
### Procedure
1. On the Visual Studio toolbar, click the [**New Project** button](https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project).
2. Select the **Blazor Web App** template and follow the steps to set up the project.
3. Use the NuGet package manager console to install the `TinyMCE.Blazor` package, such as:
```sh
Install-Package TinyMCE.Blazor
```
4. Use the NuGet package manager console to install the `TinyMCE` package, such as:
```sh
Install-Package TinyMCE
```
5. To test the application, run the application by pressing `Ctrl+F5`.
## Using a command prompt or terminal
### Prerequisites
This procedure requires:
- [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/)
### Procedure
1. Create a new Blazor project:
```sh
dotnet new blazor -o BlazorApp --no-https
```
2. Change into the new application directory:
```sh
cd BlazorApp
```
3. Install the TinyMCE Blazor integration:
```sh
dotnet add package TinyMCE.Blazor
```
4. Install the `TinyMCE` package, such as:
```sh
dotnet add package TinyMCE
```
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).
6. Test the application using the .NET development server.
- To start the development server, in the project’s root directory, run:
```sh
dotnet watch run
```
This will start a local development server accessible at `http://localhost:{PORT}`, where `{PORT}` is specified in the project’s `Properties/launchSettings.json` file.
- To stop the development server, select on the command line or command prompt and press *Ctrl+C*.
## Post-installation
1. Verify the installation by checking the `ItemGroup` references in the project file. For example, if the project is named *BlazorApp*, the relevant file would be `BlazorApp.csproj` with the dependency referenced as follows:
```xml
```
2. Add the `tinymce-blazor.js` script to the main page. If using the Blazor Web App, add the script in `Components/App.razor`, for example:
```html
```
> **Note:** The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide.
>
> - If using Blazor Server, add the script in `Pages/_Host.cshtml`, for example:
>
> ```html
>
>
> ```
> - If using WASM, add the script in `wwwroot/index.html`, for example:
>
> ```html
>
>
> ```
3. Add the `Editor` component to a page by either:
- Using the `using` directive:
```cs
@using TinyMCE.Blazor
```
For example:
*File:* `Pages/Index.razor`
```cs
@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor
Hello, world!
Welcome to your new app.
```
- Using the component with its namespace:
```cs
```
For example:
*File:* `Pages/Index.razor`
```cs
@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor
Hello, world!
Welcome to your new app.
```
> **Important:** In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that `@rendermode InteractiveServer` is specified in a page component.
4. Update the `LicenseKey` option in the editor element and include your [License Key](../license-key/).
```cs
```
5. To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the `ScriptSrc` property:
```cs
```
> **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](../license-key/#setting-the-license).
## Next Steps
For information on customizing the integration, see:
- [TinyMCE basic setup](../basic-setup/).
- [The TinyMCE Blazor integration technical reference](../blazor-ref/).