---
title: "Using the TinyMCE .zip package with the Blazor framework"
description: "A guide on integrating a .zip version of TinyMCE into the Blazor framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/blazor-zip/index.md"
version: "6"
last_updated: "2022-04-07T05:31:36Z"
tokens: 1317
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/blazor-zip/).
# Using the TinyMCE .zip 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](#using-visual-studio)
- [Using a command prompt or terminal](#using-a-command-prompt-or-terminal)

## 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 Server App** template.
3. Use the NuGet package manager console to install the `TinyMCE.Blazor` package, such as:

```sh
Install-Package TinyMCE.Blazor
```
4. Verify the installation by checking the `ItemGroup` references in `BlazorApp.csproj`, such as:

*File:* `BlazorApp.csproj`

```xml
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
</ItemGroup>
```
5. Add the `tinymce-blazor.js` script to the main page.

  - Using Blazor Server add the script in `Pages/_Host.cshtml`, for example:

```html
<script src="_framework/blazor.server.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
```
  - Using WASM add the script in `wwwroot/index.html`, for example:

```html
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
```
6. Add the `Editor` component to a page by either:

  - Using the `using` directive

```cs
@using TinyMCE.Blazor
<Editor />
```
  - Using the full component and package name

```cs
<TinyMCE.Blazor.Editor />
```
For example:

*File:* `Pages/Index.razor`

```cs
@page "/"
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
Welcome to your new app.
<Editor />
```
7. To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the `ScriptSrc` property:

```cs
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
/>
```
8. 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 blazorserver -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. Verify the installation by checking the `ItemGroup` references in `BlazorApp.csproj`, such as:

*File:* `BlazorApp.csproj`

```xml
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
</ItemGroup>
```
5. Add the `tinymce-blazor.js` script to the main page.

  - Using Blazor Server add the script in `Pages/_Host.cshtml`, for example:

```html
<script src="_framework/blazor.server.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
```
  - Using WASM add the script in `wwwroot/index.html`, for example:

```html
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
```
6. Add the `Editor` component to a page by either:

  - Using the `using` directive

```cs
@using TinyMCE.Blazor
<Editor />
```
  - Using the full component and package name

```cs
<TinyMCE.Blazor.Editor />
```
For example:

*File:* `Pages/Index.razor`

```cs
@page "/"
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
Welcome to your new app.
<Editor />
```
7. To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the `ScriptSrc` property:

```cs
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
/>
```
8. 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:5000](http://localhost:5000/).
  - To stop the development server, select on the command line or command prompt and press *Ctrl+C*.

## Next Steps

For information on customizing the integration, see:

- [TinyMCE basic setup](../basic-setup/).
- [The TinyMCE Blazor integration technical reference](../blazor-ref/).