import _ from 'lodash'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import JsonmlToReact from 'jsonmltoreact'; // Some random React component class CustomCompoenent extends React.Component { render() { return ( <div className="customCompoenentContainer"> {this.props.header && <h1>{this.props.header}</h1>} {this.props.subheader && <h2>{this.props.subheader}</h2>} {this.props.children} </div> ); } } // Create instance with custom converters let jsonmlToReact = new JsonmlToReact({ 'custom-tag': (props, data) => ({ type: CustomCompoenent, props: { ...props, ...data }, }), 'span': props => ({ props: { className: 'foobar' } }) }); // JsonML tree let jsonml = [ 'div', { class: 'container' }, [ 'custom-tag', { subheader: 'bar' }, [ 'span', 'content' ] ] ]; // Optional data to be passed to converters let data = { 'header': 'foo', }; let reactComponent = jsonmlToReact.convert(jsonml, data); console.log(ReactDOMServer.renderToStaticMarkup(reactComponent)); /* <div class="container">  <div class="customCompoenentContainer">  <h1>foo</h1>  <h2>bar</h2>  <span class="foobar">content</span>  </div> </div> */