Skip to main content

​
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 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 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us