# Integrating CKEditor 5 with Electron from CDN

You can add CKEditor 5 to an [Electron](https://www.electronjs.org/) desktop application by loading the editor from the CKEditor 5 CDN, the same way you would on a web page. Because Electron renders its windows with Chromium, the CKEditor 5 HTML editor runs in an Electron renderer process just as it would in a browser.

> **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="quick-start">

## Quick start

This guide will show you how to integrate CKEditor 5 with an Electron application using the CDN. If you are new to Electron, check out their [official tutorial](https://www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites).

<a id="setting-up-an-electron-project">

### Setting up an Electron project

The quickest way to set up an Electron project is to use Electron Forge’s `create-electron-app` command. [Follow the Getting Started guide](https://www.electronforge.io/) to create the application.

When executing `npx create-electron-app@latest my-app` in the terminal, you will be prompted to choose a bundler and a language. For the sake of this tutorial, we have chosen to use Vite and vanilla JavaScript.

When the setup is finished, you should be able to go to the app’s directory and run it by executing:

```bash
cd my-app
npm start
```

<a id="integrating-ckeditor-5-with-electron-using-cdn">

## Integrating CKEditor 5 with Electron using CDN

<a id="project-structure">

### Project structure

After following all the steps described so far, your app’s structure should resemble this one:

```
├── forge.config.js
├── index.html
├── node_modules/
├── package-lock.json
├── package.json
├── src/
│   ├── index.css
│   ├── main.js
│   ├── preload.js
│   └── renderer.js
├── vite.main.config.mjs
├── vite.preload.config.mjs
└── vite.renderer.config.mjs
```

<a id="implementing-the-editor">

### Implementing the editor

Inside the `src/` folder, create a new file `editor.js` with the following content:

```js
const {
	ClassicEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} = CKEDITOR;

const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

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

This code imports all the necessary CKEditor 5 plugins and initializes the editor instance with the provided configuration.

Now modify the `index.html` file so it looks like this:

```html
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello World!</title>

	<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/49.0.0/ckeditor5.css" />
	<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/49.0.0/ckeditor5-premium-features.css" />

		<script src="https://cdn.ckeditor.com/ckeditor5/49.0.0/ckeditor5.umd.js"></script>
	<script src="https://cdn.ckeditor.com/ckeditor5-premium-features/49.0.0/ckeditor5-premium-features.umd.js"></script>
	</head>
	<body>
		<h1>Hello Electron and CKEditor 5!</h1>
		<p>Welcome to your Electron application. Below you should see a working instance of CKEditor 5:</p>

		<div id="editor"></div>

		<script src="./src/editor.js"></script>

		<script type="module" src="/src/renderer.js"></script>
	</body>
</html>
```

Here we adjusted the structure to include the `<div>` placeholder for the editor instance. We have also added CDN links to the editor’s styles, source files, and finally the `editor.js` file, which is responsible for tying everything together and initializing the editor.

You can now execute `npm start` to run the Electron app. It should automatically open a window with an editor instance ready to be used:

<a id="obtaining-a-premium-features-license-key">

## Obtaining a premium features license key

To activate CKEditor 5 premium features, you will need a commercial license. The easiest way to get one is to sign up for the [CKEditor Premium Features 14-day free trial](https://portal.ckeditor.com/checkout?plan=free).

You can also [contact us](https://ckeditor.com/contact/?sales=true#contact-form) to receive an offer tailored to your needs. To obtain an activation key, please follow the [License key and activation](../../licensing/license-key-and-activation.md) guide.

<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)