# Integrating CKEditor 5 with Spring Boot from CDN You can add CKEditor 5 to a [Spring Boot](https://spring.io/projects/spring-boot) application by loading the editor from the CKEditor 5 CDN and including it on the page. There is no official Spring Boot integration, but because the CKEditor 5 HTML editor is a pure JavaScript/TypeScript library, it runs in any environment that serves such assets, including the Java-based Spring Boot. > **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) ## Setting up the project This guide assumes you already have a Spring Boot project. You can create a basic Spring Boot project using [Spring Initializr](https://start.spring.io/). Refer to the [Spring Boot documentation](https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html) to learn how to set up a project in this framework. This guide is using the “Spring Web” and “Thymeleaf” dependencies selected in the Spring Initializr. Here is the list of dependencies used in the demo project: ```xml org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-starter-thymeleaf ``` > **Note** > > To use our Cloud CDN services, [create a free account](https://portal.ckeditor.com/checkout?plan=free). Learn more about [license key activation](../../licensing/license-key-and-activation.md). ## Project structure The folder structure of the created project should resemble the one below: ``` ├── src │ ├── main │ │ ├── java │ │ │ └── com │ │ │ └── example │ │ │ └── demo │ │ │ └── DemoApplication.java │ │ └── resources │ │ ├── static │ │ │ └── ... │ │ ├── templates │ │ │ ├── index.html │ │ │ └── ... │ │ └── application.properties │ └── test ├── pom.xml └── ... ``` ## Adding CKEditor 5 container, scripts and styles First, create or modify the `index.html` file in the `src/main/resources/templates` directory to include the CKEditor 5 scripts and styles. All necessary scripts and links are in the HTML snippet below. You can copy and paste them into your template. Open-source and premium features are in separate files, so there are different tags for both types of plugins. Add tags for premium features only if you use them. ```html CKEditor 5 - Spring Boot CDN Integration

Hello from CKEditor 5!

``` ## Adding the Editor creation script Both previously attached scripts expose global variables named `CKEDITOR` and `CKEDITOR_PREMIUM_FEATURES`. You can use them to access the editor class and plugins. In our example, we use object destructuring (a JavaScript feature) to access the editor class from the open-source global variable with a basic set of plugins. You can access premium plugins from the other variable the same way. Then, we pass the whole configuration to the `create()` method. Be aware that you need a proper [license key](../../licensing/license-key-and-activation.md) to use the integration. ```html ``` Now, we need to put our script in the previous template. We need to put the script under the `
` element, so the editor can attach to it. Your final template should look like this: ```html CKEditor 5 - Spring Boot CDN Integration

Hello from CKEditor 5!

``` To make the HTML editor work with Spring Boot, you need to create a controller to serve the HTML page. Create a file named `HomeController.java` in your project’s main package: ```java package com.example.demo; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/") public String home() { return "index"; } } ``` Finally, run your Spring Boot application using `./mvnw spring-boot:run` (or `mvnw.cmd spring-boot:run` on Windows) and navigate to `http://localhost:8080` to see the editor in action. ## 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)