Getting Started
Choose your path to integrate the Plate rich-text editor framework into your React project.
Plate offers multiple integration paths depending on your project needs and environment. Choose the approach that best matches your requirements.
Client-Side Integration
Option 1: With Plate UI (Recommended)
Leverage Plate UI for a rich, pre-configured editor experience, especially if you're using or plan to use shadcn/ui.
Install Plate UI
Begin by following the Plate UI Installation Guide. This guide covers installing core dependencies and setting up Plate UI components.
Basic Usage
Once Plate UI is set up, choose the guide that matches your React application type:
Option 2: Manual Setup
For projects not using shadcn/ui, Tailwind CSS, or those requiring a framework-agnostic solution, follow the Manual Installation Guide for detailed instructions.
You can always integrate Plate UI components into a manual setup later.
Server-Side Integration
React Server Components
For leveraging Plate in React Server Components (RSC) for tasks like static content generation or server-side data processing without client-side interactivity.
Follow the RSC Guide for detailed instructions.
Node.js Environment
For using Plate in a Node.js environment for backend tasks such as data processing, content migration, or validation.
Follow the Node.js Guide for detailed instructions.
Next Steps
After setting up Plate, explore these resources to further customize and enhance your editor:
- Configuration:
- Support & Community:
- Troubleshooting Guide
- Join our Discord Community
- Participate in GitHub Discussions