# Getting Started with the KendoReact Editor
This guide provides essential information about using the KendoReact Editor package. You will learn how to install the Editor package, add a React Editor component, part of KendoReact, to your project, style the component, and activate your license.
After completing this guide, you will be able to reproduce the following example.
[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/get-started/func/source.txt)
## Before You Begin
To follow the steps in this guide, you need to have a React project set up. If you don't have one, you can create a new React application using Vite by running the following command in your terminal:
```sh
npm create vite@latest my-app -- --template react-ts
```
This guide requires that you have **basic knowledge of React and TypeScript**, and that you have already created [**a blank React project**](https://www.telerik.com/kendo-react-ui-develop/components/getting-started).
> tip You can accelerate your Editor journey with the [KendoReact Agentic UI Generator](https://www.telerik.com/kendo-react-ui-develop/components/ai-tools/agentic-ui-generator/getting-started) and the [Component Assistant prompts](https://www.telerik.com/kendo-react-ui-develop/components/ai-tools/agentic-ui-generator/prompt-library#component-assistant).
## Install the Component
The KendoReact Editor package is distributed via [npm](https://www.npmjs.com/package/@progress/kendo-react-editor) and can be installed using the npm package manager.
To install the Editor package and Kendo theme, run the following command in the root folder of your React project:
```sh
npm i @progress/kendo-react-editor @progress/kendo-theme-meridian
```
Import the CSS file from the package in `src/App.tsx`. Add this import before your existing `App.css` import.
```jsx
import '@progress/kendo-theme-meridian/dist/all.css';
```
> tip Are you looking for guidance around how to create visually appealing and consistent user interfaces with Telerik UI components? Check out the [Progress Design System](https://www.telerik.com/design-system/docs/).
## Use the Component
> The KendoReact Editor is a premium component that requires a [commercial license key or an active trial license key](https://www.telerik.com/kendo-react-ui-develop/components/my-license).
After installing the package, import the Editor component in the React App.
In the `src/App.tsx` file of your React project, import the `Editor` and `EditorTools` components from the Editor package. The `EditorTools` provide different built-in user-interface tools that help users modify the content.
```jsx
import { Editor, EditorTools } from '@progress/kendo-react-editor';
```
1. Define the editor tools that you want to enable.
```jsx
const {
Bold,
Italic,
Underline,
AlignLeft,
AlignRight,
AlignCenter,
Indent,
Outdent,
OrderedList,
UnorderedList,
Undo,
Redo,
Link,
Unlink
} = EditorTools;
```
2. Add the component's markup to the `src/App.tsx` file in your project and set the tools. Optionally, configure the height of the Editor component.
```jsx
return (
);
```
3. Build and run the application by typing the following command in the root folder of your project:
```sh
npm run dev
```
4. Navigate to [http://localhost:5173](http://localhost:5173/) to see the KendoReact Editor component on the page.
## Dependencies
The Editor package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
| Package Name | Description |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| react 18.0.0\* | Contains the functionality necessary to define React components. |
| react-dom | Contains the React renderer for the web. |
| @progress/kendo-licensing | Contains the internal infrastructure related to licensing. |
| @progress/kendo-drawing | Contains the KendoReact Drawing components. |
| @progress/kendo-react-buttons | Contains the KendoReact Buttons components. |
| @progress/kendo-react-dialogs | Contains the KendoReact Dialogs components. |
| @progress/kendo-react-dropdowns | Contains the KendoReact Dropdowns components. |
| @progress/kendo-react-inputs | Contains the KendoReact Inputs components. |
| @progress/kendo-react-intl | Contains the KendoReact Internationalization package that applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers. |
| @progress/kendo-react-layout | Contains the KendoReact Layout components. |
| @progress/kendo-react-pdf | Contains the KendoReact PDF components. |
| @progress/kendo-react-popup | Contains the KendoReact Popup components. |
| @progress/kendo-react-progressbars | Contains the KendoReact Progressbars components. |
| @progress/kendo-svg-icons | Contains the KendoReact SVG icons. |
## Activating Your License Key
**Important**: The KendoReact Editor is a premium component that requires a license key file to be installed in your project:
* **Trial usage**: [Start a free trial](https://www.telerik.com/try/kendo-react-ui) and download a trial license key file
* **Commercial usage**: [Purchase a license](https://www.telerik.com/kendo-react-ui/pricing) and download a commercial license key file
Without a valid license key file, the component will display licensing warnings and watermarks.
Follow the instructions on the KendoReact [My License page](https://www.telerik.com/kendo-react-ui-develop/components/my-license) to download and install your license key file. You can skip this step if your application already contains a KendoReact license file.
## Next Steps
* [API Reference of the Editor](https://www.telerik.com/kendo-react-ui-develop/components/editor/api)
* [Globalization](https://www.telerik.com/kendo-react-ui-develop/components/editor/globalization)
* [Tools](https://www.telerik.com/kendo-react-ui-develop/components/editor/tools)
* [Plugins](https://www.telerik.com/kendo-react-ui-develop/components/editor/plugins)
* [Schema](https://www.telerik.com/kendo-react-ui-develop/components/editor/schema)
* [Keyboard Navigation](https://www.telerik.com/kendo-react-ui-develop/components/editor/keyboard-navigation)
## Learning Resources
* [React Editor](https://www.telerik.com/kendo-react-ui-develop/components/editor)
* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/getting-started)
* [Virtual Classroom (Training Courses for Registered Users)](https://learn.telerik.com/learn/course/external/view/elearning/14/kendoreact)
* [Explore the Finance Portfolio Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/finance-application/)
* [Explore the Coffee Warehouse Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/)
* [Explore the GitHub Issues Grid Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/issues-grid/)