Re-Editor: Web Editor Playground

Re-Editor is a modern, high-performance web editor playground built with Next.js 16 and React 19. It provides a centralized environment to explore, compare, and experiment with the most popular web-based rich text and code editors.

---

Key Features

• Multi-Editor Support: Seamlessly switch between and test different editors:
  • Quill.js: Modern rich text editor for high-quality content creation.
  • Monaco Editor: The powerhouse behind VS Code, perfect for high-performance code editing with IntelliSense.
  • Editor.js: Block-styled editor designed for modern, structured content (JSON-first).
• Modern UI/UX: Crafted with shadcn/ui and Radix UI for a sleek, accessible, and responsive experience.
• PWA Ready: Offline support and installation capabilities powered by Serwist.
• Theming: Full dark and light mode support using next-themes.
• Internationalization: Ready for global use with next-intl.

Tech Stack

• Framework: Next.js 16 (App Router, Turbopack)
• Library: React 19
• Styling: Tailwind CSS 4, Motion (Framer Motion)
• UI Components: shadcn/ui, Radix UI
• PWA: Serwist
• Icons: Lucide React, React Icons
• Editors:
  • @monaco-editor/react
  • quill
  • @editorjs/editorjs

Getting Started

Prerequisites

• Node.js (v20 or higher recommended)
• pnpm (preferred package manager)

Installation

1. Clone the repository:

   git clone https://github.com/fapethedev/re-editor-for-coding.git
   cd re-editor-for-coding

2. Install dependencies:

   pnpm install

3. Run the development server:

   pnpm dev

The application will be available at http://localhost:3000.

Available Scripts

• pnpm dev: Starts the development server with Turbopack and Serwist watch mode.
• pnpm build: Builds the application for production.
• pnpm start: Starts the production server.
• pnpm lint: Runs ESLint for code quality checks.
• pnpm format: Formats code using Prettier.
• pnpm typecheck: Runs TypeScript type checks.

📂 Project Structure

src/
├── app/            # Next.js App Router (pages and layouts)
│   ├── playground/ # Individual editor implementations
│   └── globals.css # Global styles and Tailwind imports
├── components/     # Reusable UI components
│   └── ui/         # shadcn/ui primitive components
├── hooks/          # Custom React hooks
├── lib/            # Utility functions and shared logic
public/         # Static assets and PWA manifest

Contributing

Contributions are welcome! If you have suggestions for new editors to add or features to improve the playground, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Created with ❤️ by fapethedev

Contact

• Email @fapethedev
• LinkedIn @fapethedev