# Integrating CKEditor 5 with .NET from ZIP

You can add CKEditor 5 to a .NET application by placing a custom editor build from a ZIP archive among your project’s static files and loading it on the page. There is no official .NET integration, but because the CKEditor 5 HTML editor is a pure JavaScript/TypeScript library, it runs in any environment that serves such assets, including Microsoft’s [.NET](https://dotnet.microsoft.com/).

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="setting-up-the-project">

## Setting up the project

For the purpose of this guide, we will use a basic ASP.NET Core project created with `dotnet new webapp`. You can refer to the [ASP.NET Core documentation](https://learn.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-7.0) to learn how to set up a project in the framework.

<a id="integrating-using-zip">

## Integrating using ZIP

After downloading and unpacking the ZIP archive, copy the `ckeditor5.js` and `ckeditor5.css` files in the `wwwroot/lib/ckeditor5/` directory. The folder structure of your app should resemble this one.

```
├── bin
├── obj
├── Pages
│   ├── Index.cshtml
│   └── ...
├── Properties
├── wwwroot
│   ├── css
│   ├── js
│   ├── lib
|      ├── bootstrap
|      ├── ckeditor5
|          ├── ckeditor5.js
|          └── ckeditor5.css
|      ├── jquery
|      ├── jquery-validation
|      ├── jquery-validation-unobtrusive
│   └── favicon.ico
├── appsettings.Development.json
├── appsettings.json
└── ...
```

> **Note**
>
> Starting from version 44.0.0, the `licenseKey` property is required to use the editor. If you use a self-hosted editor from ZIP:
>
> * You must either comply with the GPL or
> * Obtain a license for [self-hosting distribution](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and evaluate the self-hosting.

Once you have all the dependencies of CKEditor 5, modify the `Index.cshtml` file in the `Pages` directory to import them. All the necessary markup is in the `index.html` file from the ZIP archive. You can copy and paste it into the `<script>` tag of your page. Pay attention to the paths of the import map and CSS link – they should reflect your folder structure. The template should look similar to the one below:

```html
@page
@using Microsoft.AspNetCore.Components
@{
	ViewData["Title"] = "Home Page";
	var data = new ImportMapDefinition(
	new Dictionary<string, string>
	{
		{ "ckeditor5", "/lib/ckeditor5/ckeditor5.js" },
		{ "ckeditor5/", "/lib/ckeditor5/" },
	}, null, null);
}
<link href="~/lib/ckeditor5/ckeditor5.css" rel="stylesheet" />
<div class="main-container">
	<div id="editor">
		<p>Hello from CKEditor 5!</p>
	</div>
</div>
<script type="importmap" asp-importmap="@data"></script>
<script type="module">
	import {
		ClassicEditor,
		Essentials,
		Paragraph,
		Bold,
		Italic,
		Font
	} from 'ckeditor5';

	ClassicEditor
		.create( {
			attachTo: document.querySelector( '#editor' ),
			licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
			plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
			toolbar: [
				'undo', 'redo', '|', 'bold', 'italic', '|',
				'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
			]
		} )
		.then( editor => {
			window.editor = editor;
		} )
		.catch( error => {
			console.error( error );
		} );
</script>
```

> **Warning**
>
> Due to a [bug](https://issues.chromium.org/issues/40611854), Chromium does not support multiple import maps yet. The .NET web app in the current version may already have an import map defined in the shared layout. If that is your case, remove the `<script type="importmap"></script>` tag from the `/Pages/Shared/__Layout.cshtml` file and you will be ready to run your application.

Finally, in the root directory of your .NET project, run `dotnet watch run` to see the app in action.

<a id="next-steps">

## Next steps

* See how to manipulate the editor’s data in the [Getting and setting data](../../setup/getting-and-setting-data.md) guide.
* Refer to further guides in the [setup section](../../setup/configuration.md) to see how to customize your editor further.
* Check the [features category](../../../features/index.md) to learn more about individual features.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)