{"id":25639289,"url":"https://github.com/basemax/custom-editor-react","last_synced_at":"2026-04-12T15:03:13.278Z","repository":{"id":278929615,"uuid":"934191264","full_name":"BaseMax/custom-editor-react","owner":"BaseMax","description":"Front-end implementation of a real-time collaborative text editor built with React.js. It integrates seamlessly with a backend powered by Node.js, Express, and Socket.IO to provide a live editing experience.","archived":false,"fork":false,"pushed_at":"2025-02-22T15:28:39.000Z","size":274,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T16:27:49.399Z","etag":null,"topics":["custom-editor","custom-editor-color","editor-react","javascript","js","markdown-editor","markdown-editor-react","react","react-editor","reactjs","real-time-editor","realtime-editor","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BaseMax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-17T12:28:28.000Z","updated_at":"2025-02-22T15:28:43.000Z","dependencies_parsed_at":"2025-02-22T16:28:22.586Z","dependency_job_id":"1b2830ce-50ff-4503-8493-01fa35ee60a8","html_url":"https://github.com/BaseMax/custom-editor-react","commit_stats":null,"previous_names":["basemax/custom-editor-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseMax%2Fcustom-editor-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseMax%2Fcustom-editor-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseMax%2Fcustom-editor-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseMax%2Fcustom-editor-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BaseMax","download_url":"https://codeload.github.com/BaseMax/custom-editor-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240265402,"owners_count":19774070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-editor","custom-editor-color","editor-react","javascript","js","markdown-editor","markdown-editor-react","react","react-editor","reactjs","real-time-editor","realtime-editor","ts","typescript"],"created_at":"2025-02-23T03:29:23.419Z","updated_at":"2026-04-12T15:03:13.208Z","avatar_url":"https://github.com/BaseMax.png","language":"CSS","readme":"# Custom Editor React\n\nWelcome to the **Custom Editor React** project! This is a front-end implementation of a real-time collaborative text editor built with **React.js**. It integrates seamlessly with a backend powered by **Node.js, Express, and Socket.IO** to provide a live editing experience.\n\n\u003e Back-End repository: https://github.com/BaseMax/editor-realtime-collaborative\n\n![Custom Editor React](demo.jpg)\n\n## Features\n\n- **Real-Time Collaboration:** Multiple users can edit the same document simultaneously.\n- **Live Markdown Preview:** Users can see rendered Markdown in real time.\n- **WebSocket Integration:** Ensures instant synchronization between users.\n- **User Tracking:** Displays the number of online users.\n- **Customizable Interface:** Can be extended with themes, plugins, and additional features.\n- **React-Based Architecture:** Ensures a modern and scalable front-end.\n\n## Technologies Used\n\n- **React.js** - Front-end library for building UI components.\n- **TypeScript** - Ensures type safety and better development experience.\n- **Socket.IO** - Enables real-time communication with the backend.\n\n## Getting Started\n\n### Prerequisites\n\nEnsure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (v16 or later)\n- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\n\n### Installation\n\n1. Clone the repository:\n   ```sh\n   git clone https://github.com/BaseMax/custom-editor-react.git\n   cd custom-editor-react\n   ```\n\n2. Install dependencies:\n   ```sh\n   npm install  # or yarn install\n   ```\n\n3. Start the development server:\n   ```sh\n   npm run dev  # or yarn dev\n   ```\n\n   The development server will start on **http://localhost:3000**.\n\n### Project Structure\n\n```\n02/17/2025  04:02 PM               253 .gitignore\n02/17/2025  06:10 PM           105,941 bun.lock\n02/17/2025  04:02 PM               734 eslint.config.js\n02/17/2025  04:05 PM               225 eslintrc.json\n02/17/2025  04:02 PM               366 index.html\n02/17/2025  03:58 PM             1,086 LICENSE\n02/17/2025  04:45 PM    \u003cDIR\u003e          node_modules\n02/17/2025  04:45 PM           127,528 package-lock.json\n02/17/2025  06:10 PM               948 package.json\n02/17/2025  04:02 PM    \u003cDIR\u003e          public\n02/17/2025  04:02 PM             1,607 README.md\n02/17/2025  05:30 PM    \u003cDIR\u003e          src\n02/17/2025  04:02 PM               665 tsconfig.app.json\n02/17/2025  04:02 PM               119 tsconfig.json\n02/17/2025  04:02 PM               593 tsconfig.node.json\n02/17/2025  04:02 PM               161 vite.config.ts\n```\n\n## WebSocket Events\n\n| Event Name       | Description |\n|-----------------|-------------|\n| `connection`    | Triggered when a user connects. |\n| `updateContent` | Sends the latest content to clients. |\n| `contentChange` | Updates content from a user. |\n| `onlineUsers`   | Notifies users of the current online count. |\n| `disconnect`    | Triggered when a user disconnects. |\n\n## Contributing\n\nContributions are welcome! Feel free to:\n\n- Submit issues.\n- Open pull requests.\n- Suggest new features.\n\n## License\n\nThis project is licensed under the **MIT License**.\n\n## Author\n\n**Seyyed Ali Mohammadiyeh (Max Base)**  \n\nGitHub: [@basemax](https://github.com/BaseMax)  \n\nEmail: maxbasecode@gmail.com\n\nHappy Coding! 🚀\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasemax%2Fcustom-editor-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasemax%2Fcustom-editor-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasemax%2Fcustom-editor-react/lists"}