{"id":21246803,"url":"https://github.com/apfirebolt/text-editor-in-react-using-material-ui","last_synced_at":"2026-04-12T07:37:58.106Z","repository":{"id":114820823,"uuid":"585685349","full_name":"Apfirebolt/text-editor-in-React-using-material-ui","owner":"Apfirebolt","description":"A text editor in React much like you see on Medium.com and other blogging sites","archived":false,"fork":false,"pushed_at":"2023-01-05T20:35:46.000Z","size":194,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-21T00:49:30.021Z","etag":null,"topics":["javascript","material-icons","mui","react-html-parser","react-material-ui","reactjs","rich-text-editor","text-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Apfirebolt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-01-05T20:05:33.000Z","updated_at":"2023-01-05T20:36:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"b7fb5323-2433-4ee8-8875-91b61e93c137","html_url":"https://github.com/Apfirebolt/text-editor-in-React-using-material-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Ftext-editor-in-React-using-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Ftext-editor-in-React-using-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Ftext-editor-in-React-using-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Ftext-editor-in-React-using-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Apfirebolt","download_url":"https://codeload.github.com/Apfirebolt/text-editor-in-React-using-material-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243685525,"owners_count":20330980,"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":["javascript","material-icons","mui","react-html-parser","react-material-ui","reactjs","rich-text-editor","text-editor"],"created_at":"2024-11-21T02:06:14.463Z","updated_at":"2026-04-12T07:37:58.065Z","avatar_url":"https://github.com/Apfirebolt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rich Text Editor in React using Material UI\n\n_👀 Medium like text editor in React \n\n![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge\u0026logo=mui\u0026logoColor=white)\n\n## Introduction\n\nI was facing issues with implementing a Text Editor in React, previously I had a hassle-free implementation in Vue for one of the projects I have on Github. Many things did not work for me. I tried packages like React Slate, React-draft-wysiwyg and more. But, they had dependency related issues. Many of them lacked concrete examples. This package called **'mui-rte'** did work for me at last in this project bootstrapped with create-react-app.\n\nThis also has some warnings though which I might address in the future, but I needed a quick solution for the time being.\n\n## Requirements 🏃\n\n- Node\n- React\n- Material UI\n- Draft JS\n\n## Install  💥\n\n```\nnpm install\nnpm start\n```\n\nThe React app is configured to run by default on port 3000.\n\n## Features\n\n- Text Editor\n- Can have hyperlinks and images.\n- Can parse HTML output from the editor to send to the back-end server.\n\n## Project Screenshots\n\nJust one screenshot is there. No routes exist, editor is implemented on the main page only which looks something like this. \n\n![alt text](./screenshots/1.PNG)\n\n## Deployment\n\nDocker deployment using Nginx to be added in the future.\n\n## Development\n\n_Easily set up a local development environment!_\n\n- clone\n- `npm install`\n- `npm start`\n\n**Start coding!** 🎉\n\nClone this repo on your machine, navigate to its location in the terminal and run:\n\n## Contributing\n\nAll contributions are welcome!  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Ftext-editor-in-react-using-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapfirebolt%2Ftext-editor-in-react-using-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Ftext-editor-in-react-using-material-ui/lists"}