{"id":15706,"library":"mml-react","title":"MML for React","description":"MML React is a library from GetStream for rendering Message Markup Language (MML) content within React applications. It provides a foundational `<MML />` component that parses MML strings and translates them into corresponding React components for display. The library is currently stable at version `0.4.7` and has seen a series of maintenance and dependency updates, particularly around early 2022, though new feature releases appear less frequent. Key differentiators include its tight integration with the GetStream ecosystem for building rich chat UIs, extensive customization options for overriding default MML tag-to-React component mappings, and a flexible theming system using SCSS variables. It abstracts away the complexity of parsing and rendering structured message content, offering a component-based approach to build interactive and styled UI elements.","status":"active","version":"0.4.7","language":"javascript","source_language":"en","source_url":"https://github.com/GetStream/mml-react","tags":["javascript","stream","getstream","get-stream","react","chat","mml","mml-react","typescript"],"install":[{"cmd":"npm install mml-react","lang":"bash","label":"npm"},{"cmd":"yarn add mml-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add mml-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React rendering library.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component for rendering MML. Avoid CommonJS require() in modern React/ESM projects.","wrong":"const MML = require('mml-react');","symbol":"MML","correct":"import { MML } from 'mml-react';"},{"note":"Type definition for the MML component's props, useful for TypeScript projects.","symbol":"MMLProps","correct":"import type { MMLProps } from 'mml-react';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { MML } from 'mml-react';\n\n// Example of custom converter for the 'button' tag\nconst customButtonConverter = (tag: any, children: React.ReactNode) => {\n  const { text, action } = tag.node.attributes;\n  return (\n    <button\n      key={tag.key}\n      onClick={() => {\n        // In a real application, parse 'action' safely or use predefined callbacks\n        if (action && action.startsWith('console.log')) {\n          // eslint-disable-next-line no-eval\n          eval(action); // DANGER: Evaluate untrusted input with caution\n        } else if (action && action.startsWith('alert')) {\n          // eslint-disable-next-line no-eval\n          eval(action);\n        }\n      }}\n      style={{\n        backgroundColor: '#6200EE',\n        color: 'white',\n        padding: '8px 16px',\n        border: 'none',\n        borderRadius: '4px',\n        cursor: 'pointer',\n        margin: '5px 0',\n        fontWeight: 'bold',\n      }}\n    >\n      {text || children || 'Default Button'}\n    </button>\n  );\n};\n\nexport default function MMLDemo() {\n  const [mmlContent, setMmlContent] = useState<string>(`\n    <mml>\n      <card>\n        <card-header>Welcome to MML React!</card-header>\n        <card-body>\n          <text>This is an example of <strong color=\"primary-accent\">Message Markup Language</strong> rendered in React.</text>\n          <image url=\"https://picsum.photos/seed/mml/300/150\" alt=\"Random image\" />\n          <button text=\"Log to console\" action=\"console.log('Button clicked from MML!')\" />\n          <button text=\"Show Alert\" action=\"alert('Hello from MML!')\" />\n          <input type=\"text\" placeholder=\"Enter something...\" />\n          <row>\n            <col width=\"50%\"><text>Column 1</text></col>\n            <col width=\"50%\"><text>Column 2</text></col>\n          </row>\n        </card-body>\n      </card>\n    </mml>\n  `);\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setMmlContent(e.target.value);\n  };\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', maxWidth: '600px', margin: '20px auto', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>\n      <h1>MML React Live Demo</h1>\n      <p>Edit the MML source below to see changes reflected instantly.</p>\n      <textarea\n        value={mmlContent}\n        onChange={handleInputChange}\n        rows={15}\n        style={{ width: '100%', minHeight: '200px', marginBottom: '20px', padding: '10px', borderColor: '#ccc', borderRadius: '4px' }}\n      />\n      <h2>Rendered MML:</h2>\n      <div style={{ border: '1px solid #eee', padding: '15px', borderRadius: '5px', backgroundColor: '#f9f9f9' }}>\n        <MML source={mmlContent} converters={{ button: customButtonConverter }} />\n      </div>\n    </div>\n  );\n}\n","lang":"typescript","description":"This quickstart demonstrates how to render dynamic MML content using the `<MML />` component. It includes an editable textarea to update the MML source live and showcases how to override a default MML tag (like 'button') with a custom React component using the `converters` prop."},"warnings":[{"fix":"Review `react-virtuoso` v1 changelog and test MML components that involve virtualized lists. Adjust any custom styling or logic if necessary.","message":"The package upgraded `react-virtuoso` to v1. If your application indirectly relied on specific `react-virtuoso` behaviors or props through `mml-react`, you might encounter breaking changes related to list virtualization.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Thoroughly test existing MML content for any parsing regressions. Ensure MML source strings strictly adhere to valid XML/MML syntax.","message":"The underlying `xml-parser` dependency was upgraded to v3. This could introduce subtle parsing differences or stricter validation for MML source strings, potentially affecting rendering of malformed or edge-case MML inputs.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Upgrade `mml-react` to at least `v0.4.6` or later when using React v18 to ensure peer dependency compatibility and proper functionality.","message":"React v18 support was added and peer dependencies were updated. Older versions of `mml-react` might not be fully compatible with React v18, leading to warnings or runtime errors.","severity":"gotcha","affected_versions":"<0.4.6"},{"fix":"Verify that all URLs within your MML content are correctly sanitized and rendered after the upgrade. Check for any URLs that might now be unexpectedly blocked or modified.","message":"The `@braintree/sanitize-url` dependency was bumped to a major version (v6). As a security-related library, this may introduce breaking changes in URL sanitization logic, potentially altering how URLs are processed or rendered within MML content, or stricter filtering of previously allowed URLs.","severity":"breaking","affected_versions":">=0.4.3"},{"fix":"Immediately upgrade to `mml-react` version `0.4.2` or later to mitigate this security vulnerability.","message":"A critical security fix was implemented to forbid access to object prototype properties within the MML parser, addressing a potential prototype pollution or similar vulnerability. Applications using versions prior to this fix are vulnerable.","severity":"breaking","affected_versions":"<0.4.2"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `npm install mml-react` or `yarn add mml-react`. Ensure your import statement is `import { MML } from 'mml-react';`.","cause":"The 'mml-react' package is not installed in your project, or the import path is incorrect.","error":"Module not found: Can't resolve 'mml-react'"},{"error":"TypeError: MML is not a function"},{"fix":"Ensure `MML` is imported as a named export (`import { MML } from 'mml-react';`) and used as a JSX component: `<MML source=\"<mml>...</mml>\" />`.","cause":"You are attempting to use `MML` as a function or a default import, or it's not being rendered as a valid React component.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)...Check the render method of `YourComponent`."},{"fix":"Review the `mmlContent` or `source` prop string for well-formed XML structure. Ensure all tags are properly closed, attributes are quoted, and the overall MML conforms to the expected specification.","cause":"The string provided to the `source` prop contains malformed or invalid MML, which the XML parser cannot process.","error":"Error: MML parsing failed: [specific XML parsing error message, e.g., 'Unexpected token < at line 1 column 6']"},{"fix":"Ensure the `converters` prop is an object where keys are MML tag names (e.g., `'button'`) and values are functions that accept `tag` and `children` arguments and return a React element.","cause":"The `converters` prop is not an object, or its values (the converter functions) are not correctly structured or return valid React elements.","error":"Warning: Failed prop type: Invalid prop `converters` supplied to `MML`."}],"ecosystem":"npm"}