{"id":19488164,"url":"https://github.com/markpluslabs/react-markplus","last_synced_at":"2026-01-17T16:11:11.316Z","repository":{"id":28477563,"uuid":"31993596","full_name":"markpluslabs/react-markplus","owner":"markpluslabs","description":"A React markdown editor and previewer.","archived":false,"fork":false,"pushed_at":"2025-02-09T04:16:42.000Z","size":62661,"stargazers_count":2122,"open_issues_count":10,"forks_count":384,"subscribers_count":83,"default_branch":"main","last_synced_at":"2026-01-14T09:03:26.614Z","etag":null,"topics":["markdown","markdown-editor","markdown-editor-react","markplus","react","react-editor"],"latest_commit_sha":null,"homepage":"https://markpluslabs.github.io/react-markplus/","language":"SCSS","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/markpluslabs.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":"2015-03-11T02:20:06.000Z","updated_at":"2025-12-19T19:39:20.000Z","dependencies_parsed_at":"2024-10-06T06:25:46.424Z","dependency_job_id":"01825427-b24c-42be-9eaa-48be9816ba98","html_url":"https://github.com/markpluslabs/react-markplus","commit_stats":{"total_commits":824,"total_committers":8,"mean_commits":103.0,"dds":0.008495145631068013,"last_synced_commit":"843ed537085120f384f4e9ba67063a803cb2b08e"},"previous_names":["tylerlong/markdown-plus","tylingsoft/markdown-plus","tylerlong/markplus","markpluslabs/react-markplus"],"tags_count":89,"template":false,"template_full_name":null,"purl":"pkg:github/markpluslabs/react-markplus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markpluslabs%2Freact-markplus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markpluslabs%2Freact-markplus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markpluslabs%2Freact-markplus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markpluslabs%2Freact-markplus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markpluslabs","download_url":"https://codeload.github.com/markpluslabs/react-markplus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markpluslabs%2Freact-markplus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28511852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T13:38:16.342Z","status":"ssl_error","status_checked_at":"2026-01-17T13:37:44.060Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["markdown","markdown-editor","markdown-editor-react","markplus","react","react-editor"],"created_at":"2024-11-10T21:00:32.887Z","updated_at":"2026-01-17T16:11:11.292Z","avatar_url":"https://github.com/markpluslabs.png","language":"SCSS","readme":"# MarkPlus\n\n\u003cimg src=\"https://markpluslabs.github.io/react-markplus/icon.svg\" alt=\"icon\" width=\"256\" height=\"256\"/\u003e\n\nA React markdown editor and previewer.\n\n## Demos\n\n- [Demo for Markdown authors](https://markpluslabs.github.io/react-markplus/)\n- [Demo for React developers](https://markpluslabs.github.io/react-markplus-demo/)\n  - [source code](https://github.com/markpluslabs/react-markplus-demo/blob/main/src/app.tsx)\n\n## Installation\n\n```\nyarn add react-markplus\n```\n\n## Usage\n\n```tsx\nimport MarkPlus from \"react-markplus\";\n\n\u003cMarkPlus markdown=\"# Hello world!\" /\u003e;\n```\n\n## CSS\n\nYou will need to import the following CSS:\n\n- \"katex/dist/katex.css\";\n- \"@fortawesome/fontawesome-free/css/all.css\";\n- \"react-markplus/src/css/index.scss\";\n\n## markdown\n\nInitial markdown text to load into the editor.\n\n```tsx\n\u003cMarkPlus markdown=\"# Hello world!\" /\u003e;\n```\n\nDefault value is `''`.\n\n## onChange\n\nA callback function to be invoked automatically when markdown text changes.\n\n```tsx\n\u003cMarkPlus\n  onChange={(markdown) =\u003e {\n    console.log(\"markdown text changed to:\", markdown);\n  }}\n/\u003e;\n```\n\nDefault value is `() =\u003e {}`.\n\n## ❌ onPreviewChange\n\nA callback function to be invoked automatidally when preview html changes.\n\nThis has been **removed** from the library. Because you are supposed to generate\npreview using\n[markplus-engine](https://github.com/markpluslabs/markplus-engine).\n\n## toolbar\n\nShow, hide or remove toolbar.\n\n```tsx\n\u003cMarkPlus toolbar=\"show\" /\u003e;\n```\n\n3 possible values:\n\n- `show`: show toolbar, show a gutter below toolbar. Click the gutter to hide\n  toolbar.\n- `hide`: hide toolbar, show a gutter on top. Click the gutter to show toolbar.\n- `none`: no toolbar, no gutter.\n\nDefault value: `show`.\n\n## mode\n\nDisplay editor, preview or both.\n\n```tsx\n\u003cMarkPlus mode=\"both\" /\u003e;\n```\n\n3 possible values:\n\n- `both`: show both editor and preview\n  - there is a vertical gutter between editor and preview, you may drag the\n    gutter to adjust sizes of them.\n- `editor`: show editor only\n- `preview`: show preview only\n  - Use this mode if you don't need any editing feature.\n  - in this mode this library is a markdown renderer.\n\nDefault value: `both`.\n\n## theme\n\nOverall theme: light, dark or auto:\n\n```tsx\n\u003cMarkPlus theme=\"auto\" /\u003e;\n```\n\n3 possible values:\n\n- `light`: light theme\n- `dark`: dark theme\n- `auto`: same as system theme\n\nDefault value: `auto`.\n\n## toolbarItems\n\nYou may configure the toolbar freely.\n\n```tsx\n\u003cMarkPlus toolbarItems={[\"about\", \"|\", \"bold\", \"italic\"]} /\u003e;\n```\n\nA toolbar item could be either a string or a `ReactElement`. For toolbar items\nincluded with library, you may just specify a string. For your own custom\ntoolbar items, please specify a `ReactElement`.\n\n## Included toolbar Items\n\n- `'about'`\n  - show a modal about MarkPlus\n- `'|'`\n  - a vertical separator\n- `'bold'`\n  - make text bold\n- `'italic'`\n  - make text italic\n- `'strikethrough'`\n  - make text strokethrough\n- `'underline'`\n  - make text underlined\n- `'mark'`\n  - make text marked\n- `'emoji'`\n  - show a modal to insert emojis\n- `'fontawesome'`\n  - show a modal to insert fontawesome icons\n- `'quote'`\n  - quote text\n- `'unordered-list'`\n  - create unordered list item\n- `'ordered-list'`\n  - create ordered list item\n- `'unchecked-list'`\n  - create unchecked task list item\n- `'checked-list'`\n  - create checked task list item\n- `'link'`\n  - insert a link\n- `'image'`\n  - insert a image\n- `'code'`\n  - insert a code snippet\n- `'table'`\n  - insert a table\n- `'math'`\n  - insert some math formulas\n- `flowchart`\n  - insert some flowcharts\n\n## Default toolbar items\n\n```tsx\nimport { defaultToolbarItems } from \"react-markplus\";\n```\n\nIts value is:\n\n```tsx\n[\n  \"about\",\n  \"|\",\n  \"bold\",\n  \"italic\",\n  \"strikethrough\",\n  \"underline\",\n  \"mark\",\n  \"|\",\n  \"emoji\",\n  \"fontawesome\",\n  \"|\",\n  \"quote\",\n  \"unordered-list\",\n  \"ordered-list\",\n  \"unchecked-list\",\n  \"checked-list\",\n  \"|\",\n  \"link\",\n  \"image\",\n  \"code\",\n  \"table\",\n  \"|\",\n  \"math\",\n  \"flowchart\",\n];\n```\n\nYou may add or remote items from it to customize your own toolbar.\n\n## Custom toolbar item\n\nHere is a sample to create and insert a custom toolbar item:\n\n```tsx\n\u003cMarkPlus\n  toolbarItems={[\n    \"about\",\n    \"|\",\n    \u003ci\n      key=\"preferences\"\n      title=\"Preferences\"\n      className=\"fa fa-cog\"\n      onClick={() =\u003e {\n        console.log(\"Todo: display a preferences modal\");\n      }}\n    \u003e\n    \u003c/i\u003e,\n  ]}\n/\u003e;\n```\n\n### Known issue\n\nCustom toolbar item will freeze in React 19 dev mode.\n\nIt works in production mode though. It also works with React 18.\n","funding_links":[],"categories":["JavaScript","SCSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkpluslabs%2Freact-markplus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkpluslabs%2Freact-markplus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkpluslabs%2Freact-markplus/lists"}