{"id":25538800,"url":"https://github.com/react-chatbotify-plugins/markdown-renderer","last_synced_at":"2026-01-31T23:30:17.871Z","repository":{"id":278228173,"uuid":"934909563","full_name":"React-ChatBotify-Plugins/markdown-renderer","owner":"React-ChatBotify-Plugins","description":"A simple plugin for rendering markdown messages in React ChatBotify.","archived":false,"fork":false,"pushed_at":"2025-02-18T17:37:43.000Z","size":154,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-18T17:43:52.991Z","etag":null,"topics":["chatbotify","javascript","npm","open-source-project","plugins","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@rcb-plugins/markdown-renderer","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/React-ChatBotify-Plugins.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":"2025-02-18T15:47:28.000Z","updated_at":"2025-02-18T17:37:47.000Z","dependencies_parsed_at":"2025-02-18T17:44:09.617Z","dependency_job_id":"e70531af-8ee7-4b6c-9578-eefcf2988ddb","html_url":"https://github.com/React-ChatBotify-Plugins/markdown-renderer","commit_stats":null,"previous_names":["react-chatbotify-plugins/markdown-renderer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-ChatBotify-Plugins%2Fmarkdown-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-ChatBotify-Plugins%2Fmarkdown-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-ChatBotify-Plugins%2Fmarkdown-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-ChatBotify-Plugins%2Fmarkdown-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/React-ChatBotify-Plugins","download_url":"https://codeload.github.com/React-ChatBotify-Plugins/markdown-renderer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239781116,"owners_count":19695962,"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":["chatbotify","javascript","npm","open-source-project","plugins","react","reactjs","typescript"],"created_at":"2025-02-20T05:24:08.049Z","updated_at":"2026-01-31T23:30:17.834Z","avatar_url":"https://github.com/React-ChatBotify-Plugins.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"200px\" src=\"https://raw.githubusercontent.com/react-chatbotify-plugins/markdown-renderer/main/src/assets/logo.png\" /\u003e\r\n  \u003ch1 align=\"center\"\u003eMarkdown Renderer\u003c/h1\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/react-chatbotify-plugins/markdown-renderer/actions/workflows/ci-cd-pipeline.yml\"\u003e \u003cimg src=\"https://github.com/react-chatbotify-plugins/markdown-renderer/actions/workflows/ci-cd-pipeline.yml/badge.svg\" /\u003e \u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/@rcb-plugins/markdown-renderer\"\u003e \u003cimg src=\"https://img.shields.io/npm/v/@rcb-plugins/markdown-renderer?logo=semver\u0026label=version\u0026color=%2331c854\" /\u003e \u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/@rcb-plugins/markdown-renderer\"\u003e \u003cimg src=\"https://img.shields.io/badge/react-16--19-orange?logo=react\u0026label=react\" /\u003e \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n## Table of Contents\r\n\r\n* [Introduction](#introduction)\r\n* [Quickstart](#quickstart)\r\n* [Features](#features)\r\n* [API Documentation](#api-documentation)\r\n* [Team](#team)\r\n* [Contributing](#contributing)\r\n* [Others](#others)\r\n\r\n### Introduction\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg height=\"400px\" src=\"https://github.com/user-attachments/assets/dab87ea2-58be-424c-b1ef-6071786cb504\" /\u003e\r\n\u003c/p\u003e\r\n\r\n**Markdown Renderer** is a plugin that adds support for rendering markdown in chat bubbles within the [**React ChatBotify Core Library**](https://react-chatbotify.com). By default, the core library does not ship with markdown support. This plugin relies on chatbot events to intercept messages and determine if markdown rendering logic has to be applied. The demo gif above should give you a pretty good idea of what this plugin is capable of doing.\r\n\r\nFor support, join the plugin community on [**Discord**](https://discord.gg/J6pA4v3AMW) to connect with other developers and get help.\r\n\r\n### Quickstart\r\n\r\nThe plugin is incredibly straightforward to use and is [**available on npm**](https://www.npmjs.com/package/@rcb-plugins/markdown-renderer). Simply follow the steps below:\r\n\r\n1. Install the plugin with the following command within your project folder:\r\n   ```bash\r\n   npm install @rcb-plugins/markdown-renderer\r\n   ```\r\n\r\n2. Import the plugin:\r\n   ```javascript\r\n   import MarkdownRenderer from \"@rcb-plugins/markdown-renderer\";\r\n   ```\r\n\r\n3. Initialize the plugin within the `plugins` prop of `ChatBot`:\r\n   ```javascript\r\n   import ChatBot from \"react-chatbotify\";\r\n   import MarkdownRenderer from \"@rcb-plugins/markdown-renderer\";\r\n\r\n   const MyComponent = () =\u003e {\r\n     return (\r\n       \u003cChatBot plugins=[MarkdownRenderer()]/\u003e\r\n     );\r\n   };\r\n   ```\r\n\r\n4. Add the `renderMarkdown` attribute to the [**Block**](https://react-chatbotify.com/docs/concepts/conversations#block) that requires markdown rendering:\r\n   ```javascript\r\n   import ChatBot from \"react-chatbotify\";\r\n   import MarkdownRenderer, { MarkdownRendererBlock } from \"@rcb-plugins/markdown-renderer\";\r\n\r\n   const MyComponent = () =\u003e {\r\n     const flow = {\r\n       start: {\r\n         message: \"### What is your age?\",\r\n         renderMarkdown: [\"BOT\", \"USER\"]\r\n       } as MarkdownRendererBlock\r\n     }\r\n\r\n     return (\r\n       \u003cChatBot plugins=[MarkdownRenderer()]/\u003e\r\n     );\r\n   };\r\n   ```\r\n\r\nThe quickstart above shows how rendering of markdown can be done for both bot and user messages **within the start block**. The documentation website for the React ChatBotify Core Library also contains a [**live markdown renderer example**](https://react-chatbotify.com/docs/examples/markdown_render) that uses this plugin. You may wish to check it out!\r\n\r\n### Features\r\n\r\n**Markdown Renderer** is a lightweight plugin that provides the following features to your chatbot:\r\n- Render markdown in bot chat messages\r\n- Render markdown in user chat messages\r\n- Optionally pass in your own custom markdown component to render markdown your way\r\n\r\n### API Documentation\r\n\r\n#### Plugin Configuration\r\n\r\nThe `MarkdownRenderer` plugin accepts a configuration object that allows you to customize its behavior and appearance. An example configuration is passed in below to initialize the plugin:\r\n\r\n```javascript\r\nimport ChatBot from \"react-chatbotify\";\r\nimport MarkdownRenderer from \"@rcb-plugins/markdown-renderer\";\r\n\r\nconst MyComponent = () =\u003e {\r\n  const pluginConfig = {\r\n    // defaults to true, auto enable events required for plugin to work\r\n    autoConfig: true,\r\n  }\r\n\r\n  return (\r\n    \u003cChatBot plugins={[MarkdownRenderer(pluginConfig)]}/\u003e\r\n  )\r\n}\r\n```\r\n\r\nAs you may be able to tell from above, there are 5 configurable sections within the plugin configuration which are `autoConfig`, `promptBaseColors`, `promptHoveredColors`, `textAreaHighlightColors` and `advancedStyles`. These are described in the table below:\r\n\r\n| Configuration Option         | Type     | Default Value                                                                                                                                                                                                                 | Description                                                                                                               |\r\n|------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|\r\n| `autoConfig`                 | boolean  | `true`                                                                                                                                                                                                                        | Enables automatic configuration of required events for markdown rendering. Recommended to keep as `true`. If set to `false`, you need to configure events manually. |\r\n| `markdownComponent`                 | React.ComponentType\u003c{ children: React.ReactNode }\u003e  | `null`                                                                                                                                                                                                                        | A React component to wrap around the message's content to customize its styling, layout, or behavior. The component will receive the message's content as its children prop, so you can design it to add custom formatting, animations, or other UI enhancements. If not provided, a default wrapper from **react-markdown** will be used. |\r\n\r\n#### Rendering Markdown\r\n\r\nTo render markdown in messages, add the `renderMarkdown` attribute to any Block that requires markdown rendering. The `renderMarkdown` attribute is an array that accepts `\"USER\"` and/or `\"BOT\"`. An example can be seen below:\r\n\r\n```javascript\r\nimport ChatBot from \"react-chatbotify\";\r\nimport MarkdownRenderer from \"@rcb-plugins/markdown-renderer\";\r\n\r\nconst MyComponent = () =\u003e {\r\n  const flow = {\r\n    start: {\r\n      message: \"What is your age?\",\r\n      renderMarkdown: [\"USER\", \"BOT\"],\r\n    },\r\n    // ... other blocks\r\n  };\r\n\r\n  return (\r\n    \u003cChatBot plugins={[MarkdownRenderer(pluginConfig)]}/\u003e\r\n  )\r\n}\r\n```\r\n\r\nAs you can see from the example above containing a `start` block, `renderMarkdown` contains both `\"USER\"` and `\"BOT\"`, which means it will render markdown messages for both user and bot messages within the `start` block.\r\n\r\n### Team\r\n\r\n* [Tan Jin](https://github.com/tjtanjin)\r\n\r\n### Contributing\r\n\r\nIf you have code to contribute to the project, open a pull request from your fork and describe \r\nclearly the changes and what they are intended to do (enhancement, bug fixes etc). Alternatively,\r\nyou may simply raise bugs or suggestions by opening an issue.\r\n\r\n### Others\r\n\r\nFor any questions regarding the project, please reach out for support via **[discord](https://discord.gg/J6pA4v3AMW).**\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-chatbotify-plugins%2Fmarkdown-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-chatbotify-plugins%2Fmarkdown-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-chatbotify-plugins%2Fmarkdown-renderer/lists"}