Installation

Install WebEditor in your React project with npm, yarn, or pnpm

Prerequisites

Before installing WebEditor, ensure your project meets these requirements:

• React: Version 18.0.0 or higher
• React DOM: Version 18.0.0 or higher
• Tailwind CSS: Version 4.0.0 or higher

WebEditor requires Tailwind CSS 4.0.0 or higher. Make sure your project is using a compatible version before proceeding.

Install the package

Install WebEditor using your preferred package manager:

npm

npm install @devscribe-team/webeditor

Peer dependencies

WebEditor has the following peer dependencies that must be installed in your project:

package.json

{
  "dependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0",
    "tailwindcss": ">=4.0.0"
  }
}

If you don’t already have these installed, add them to your project:

npm

npm install react react-dom tailwindcss

Configure Tailwind CSS

WebEditor uses Tailwind CSS for styling. Ensure your Tailwind configuration is set up correctly:

1. Create or update tailwind.config.js

   If you don’t have a Tailwind configuration file, create one:

   npx tailwindcss init
   

   Update your tailwind.config.js to include the WebEditor package:

   tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   export default {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
       "./node_modules/@devscribe-team/webeditor/**/*.{js,ts,jsx,tsx}"
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   
2. Import Tailwind directives

   Ensure your main CSS file includes Tailwind’s directives:

   styles.css

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
3. Import WebEditor styles

   In your main application file or component, import the WebEditor styles:

   App.tsx

   import "@devscribe-team/webeditor/styles";
   

   The WebEditor styles must be imported after your Tailwind CSS imports to ensure proper styling.

Verify installation

To verify that WebEditor is installed correctly, try importing it in your code:

import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";

console.log(WebEditor); // Should output the component

If the import succeeds without errors, WebEditor is installed correctly.

Next, head over to the Quickstart guide to create your first WebEditor instance.