Getting Started with the React Block Editor Component

19 May 20263 minutes to read

This section explains how to create a simple Block Editor and configure its available functionalities in the React environment.

Create a React Application

Run the following commands to set up a React application:

npm create vite@latest my-app -- --template react-ts

This command will prompt you to install the required packages and start the application. Select the options as shown below.

As Syncfusion packages are not installed yet, currently, the No option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:

cd my-app
npm install

Note: To set up a React application with Nextjs or Remix, refer to this documentation for more details.

Adding Syncfusion^® packages

All available Essential^® JS 2 packages are published in the npmjs.com public registry.

To install the Block Editor component package, use the following command:

npm install @syncfusion/ej2-react-blockeditor --save

Adding CSS reference

Import the required CSS theme files for the Block Editor and its dependencies in your src/App.css file.

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-react-blockeditor/styles/tailwind3.css";

Add the Block Editor Component

Now, you can start adding Block Editor component in the application. For getting started, add the Block Editor component by using <BlockEditorComponent> tag directive in src/App.tsx file using following code. Now place the below Block Editor code in the src/App.tsx.

import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    return (
        // specifies the tag for render the blockeditor component
        <BlockEditorComponent id="blockeditor"></BlockEditorComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('blockeditor'));

Run the application

Now, run the npm run dev command in your terminal to start the development server. This command compiles the code and opens the application in your default web browser.

npm run dev

The following example shows a basic Block Editor component.

App.tsx

// Import the BlockEditor.
import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
import * as React from 'react';

// To render BlockEditor.
function App() {
    
    return (
            <BlockEditorComponent id="block-editor"></BlockEditorComponent>
    );
}
export default App;

App.jsx

{ /* Import the BlockEditor.*/ }
import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
import * as React from 'react';

function App() {
    return (
        <BlockEditorComponent id="block-editor"></BlockEditorComponent>
    );
}