{"id":51401995,"url":"https://github.com/vadimgierko/markdown-text-editor","last_synced_at":"2026-07-04T07:33:44.055Z","repository":{"id":129944738,"uuid":"417157772","full_name":"vadimgierko/markdown-text-editor","owner":"vadimgierko","description":"Split-screen Markdown/ HTML with inline CSS styles Editor with a Live Preview, code highlighting \u0026 dark mode written in React \u0026 Next.js","archived":false,"fork":false,"pushed_at":"2026-06-17T11:15:49.000Z","size":565,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-06-17T12:21:49.912Z","etag":null,"topics":["code-highlight","css","custom-editor","dark-mode","dompurify","embed","github-pages","highlight-js","html","live-preview","localstorage","markdown","markdown-editor","markdown-renderer","marked","marked-js","next-js","react","react-markdown","react-router"],"latest_commit_sha":null,"homepage":"https://vadimgierko.github.io/markdown-text-editor/","language":"TypeScript","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/vadimgierko.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-10-14T14:15:33.000Z","updated_at":"2026-06-17T11:15:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"682481cf-0ced-476d-8d42-bfd4fddcbfaf","html_url":"https://github.com/vadimgierko/markdown-text-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vadimgierko/markdown-text-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimgierko%2Fmarkdown-text-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimgierko%2Fmarkdown-text-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimgierko%2Fmarkdown-text-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimgierko%2Fmarkdown-text-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadimgierko","download_url":"https://codeload.github.com/vadimgierko/markdown-text-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimgierko%2Fmarkdown-text-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35114172,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["code-highlight","css","custom-editor","dark-mode","dompurify","embed","github-pages","highlight-js","html","live-preview","localstorage","markdown","markdown-editor","markdown-renderer","marked","marked-js","next-js","react","react-markdown","react-router"],"created_at":"2026-07-04T07:33:43.448Z","updated_at":"2026-07-04T07:33:44.050Z","avatar_url":"https://github.com/vadimgierko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\nWelcome to\u003cbr\u003e\nonline split-screen Markdown/ HTML Editor with a Live Preview!\n\u003c/h1\u003e\n\n---\n\n📝 **Write** (*using the editor on the left side* 👈)\n\n- common **Markdown** syntax **extended with** Github Flavored Markdown (**GFM**) ([see the guide](/markdown-guide))\n- vanilla **HTML tags with inline CSS styles \u0026 embed HTML elements**, like video, audio, websites etc. ([see the guide](/html-guide))\n- **highlighted code blocks**\n\n🔎 **\u0026 see how it is rendered as an HTML!** (*in the renderer on the right side* 👉)\n\n---\n\nActually... 😏 you can edit this rendered default text right now by editing Markdown in the editor on the left! 👈😎\n\nOr... you can **start from scratch [in the editor](/editor)**, write some Markdown \u0026 it will be 💾 **saved automatically in local storage** for future use!\n\n---\n\n## 💪Battle-tested Markdown Editor \u0026 Renderer\n\n---\n\nThis Markdown Editor \u0026 Rendered (*these are 2 separate components*) is **used in a few** of my **real-world open source projects**:\n\n- linky_notes 👉 [app](https://vadimgierko.github.io/linky-notes/) | [repo](https://github.com/vadimgierko/linky-notes)\n- Issue Tracker 👉 [app](https://github.com/vadimgierko/issue-tracker) | [repo](https://issue-tracker-react-ts.vercel.app/)\n- my personal website 👉 [website](https://www.vadimgierko.com/) | [repo](https://github.com/vadimgierko/personal-website-next-js)\n- Blogging Platform (old \u0026 new versions) 👉 [platform](https://vadimgierko.github.io/blogging-platform/) | [repo](https://github.com/vadimgierko/blogging-platform-next-js)\n\n---\n\n## 🚀Updates after 3 years😏\n\n---\n\nThe project was established in 2021, but it was **upgraded, extended \u0026 rewritten** basically from scratch **in January 2024**.\n\nI've added new editor/renderer features, upgraded tech stack (upgraded React and finally migrated to Next.js) \u0026 added new guides. Let's dive in!\n\n---\n\n### New Markdown Editor/ Renderer features\n\n---\n\n| Editor/ Renderer Features | 2022 | 2024 |\n| --- | --- | --- |\n| Markdown | ✅ | ✅ |\n| GitHub Flavored Markdown (GFM) | ✅ | ✅ |\n| code highlighting (auto light \u0026 dark mode) | ❌ | ✅ |\n| HTML tags | ❌ | ✅ |\n| inline CSS styles | ❌ | ✅ |\n| embed elements | ❌ | ✅ |\n| react-markdown/ custom renderer switching | ❌ | ✅ |\n\n---\n\n### New App features\n\n---\n\n| App Features | 2022 | 2024 |\n| --- | --- | --- |\n| Routing | ❌ | ✅ |\n| Dark/ Light Mode | ❌ | ✅ |\n| Guides | ❌ | ✅ |\n| Show/ hide editor/ renderer | ❌ | ✅ |\n\n---\n\n### New additional custom renderer *(along with previous react-markdown based renderer)*\n\n---\n\nAlso I've created \u0026 added a **new custom *react-markdown-free* Markdown Renderer**\nalong with the existing renderer built on top of \u003ca href=\"https://remarkjs.github.io/react-markdown/\"\u003ereact-markdown renderer\u003c/a\u003e,\nso now you can switch between them using a checkbox in the navbar.\n**Custom renderer is the default** option (becuase it's bugs-free 😏).\n\nThose 2 coexisting renderers give almost same input, but there are a few differences (pros \u0026 cons):\n\n| | react-markdown based editor | custom renderer |\n| --- | :---: | :---: |\n| [react-markdown](https://remarkjs.github.io/react-markdown/) | ✅ | ❌ |\n| *remark* plugins | ✅ | ❌ |\n| *rehype* plugins | ✅ | ❌ |\n| footnotes | ✅ | ❌ |\n| partial HTML/ CSS inline styles bug-free | ❌ | ✅ |\n| [marked](https://marked.js.org/) | ❌ | ✅ |\n| [dompurify](https://github.com/cure53/DOMPurify) | ❌ | ✅ |\n| [highlight.js](https://highlightjs.org/) | ❌ | ✅ |\n\n---\n\n## Technologies used in the project\n\n---\n\n| Technologies | 2022 | 2024 (1st upgrade) | 2024 (2nd upgrade) |\n| --- | :-: | :-: | :-: |\n| next | ❌ | ❌ | 14.0.4 |\n| react | 17.0.2 | 18.2.0 | 18.2.0 |\n| javascript | ✅ | ✅ | ✅ |\n| typescript | ❌ | ❌ | ✅ |\n| react-markdown | 7.0.1 | 9.0.1 | 9.0.1 |\n| react-router-dom | ❌ | 6.21.1 | ❌ |\n| bootstrap | 5.1.3 | 5.3.2 | 5.3.2 |\n| bootstrap-icons | ❌ | 1.11.3 | 1.11.3 |\n| remark-gfm | 3.0.0 | 4.0.0 | 4.0.0 |\n| rehype-raw | ❌ | 7.0.0 | 7.0.0 |\n| rehype-highlight | ❌ | 7.0.0 | 7.0.0 |\n| dompurify | ❌ | 3.0.8 | 3.0.8 |\n| isomorphic-dompurify | ❌ | ❌ | 2.2.0 |\n| marked | ❌ | 11.1.1 | 11.1.1 |\n| highlight.js | ❌ | 11.9.0 | 11.9.0 |\n| gh-pages | 3.2.3 | 6.1.1 | ❌ |\n| GitHub Pages/ GitHub Actions/ CI/CD | ❌ | ❌ | ✅ |\n| 💾 localStorage *(to store inputed markdown)* | ✅ | ✅ | ✅ |\n\n---\n\n\u003ch2 style=\"color: red; text-align: center\"\u003e🐞 WARNING!\u003cbr\u003e Partial HTML/ inline CSS bug\u003cbr\u003ein react-markdown based renderer\u003cbr\u003e(❗use custom renderer instead (\u003cem\u003edefault\u003c/em\u003e)❗)\u003c/h2\u003e\n\n---\n\nIf you're **using react-markdown renderer option**,\nyou can get some errors caused by partial HTML or incomplete inline CSS styles in your markdown\nwhile you're editing content \u0026 **the app may crash**...\n\nI will fix it eventually, but **don't worry** - your **content is always synced with local storage**,\nso refresh the page \u0026 fix your partial HTML in non react-markdown renderer option\n*(by default the editor is using my custom md renderer, which is not causing such errors)*\n\u0026 you can continue working with react-markdown based renderer if you want to.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimgierko%2Fmarkdown-text-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadimgierko%2Fmarkdown-text-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimgierko%2Fmarkdown-text-editor/lists"}