The goal of this project is to demonstrate how modern React applications can implement rich text editing using a structured, controlled, and extensible approach rather than relying on uncontrolled HTML or manual editor wiring.
This project focuses on three core ideas:
-
Structure
Rich text content is defined and managed through configuration instead of raw HTML strings. -
Control
Editor behavior and formatting options are intentionally restricted to enforce consistency and design rules. -
Extensibility
New editor capabilities are added through TipTap extensions and exposed via custom toolbar controls without modifying core editor code.
- React / Next.js
- Puck Editor
- TipTap (rich text engine)
- TypeScript
- Basic rich text editor setup using Puck
- Inline and sidebar based editing
- Disabling formatting options (example: bold)
- Restricting heading levels (H1 and H2 only)
- Customizing the editor toolbar
- Adding a custom TipTap extension (Superscript)
- Exposing custom extensions through a custom toolbar control
- Node.js (version 18 or later recommended)
- npm
Clone the repository:
git clone https://github.com/<your-username>/<repo-name>.git
cd <repo-name>npm install
npm run dev
Once the server is running:
- Open the editor at http://localhost:3000/edit
- Edit content using the rich text editor
- Publish changes
- View the rendered output on the main page
puck.config.tsx // Editor and rich text configuration
app/editor // Puck editor route
app/page.tsx // Rendered page output
Most of the behavior is implemented inside puck.config.tsx.
You can extend this demo by:
- Adding more TipTap extensions
- Introducing additional editor constraints
- Experimenting with different toolbar layouts
- Integrating persistence or collaboration features
- Refer to the Puck documentation for advanced customization options.