Markdown wrapper for Shopify UI Extension multi_line_text_field input

Extensions
,
1

Hey Shopify devs! :wave:

I’m excited to share a new tool (and first Shopify open source project) I’ve built that makes customizing checkout content much easier. The Markdown Wrapper is a React-based renderer that converts a multi line text field into markdown syntax.

Available on github

What problem does it solve?

Currently, Shopify UI Extensions are inputs are limited to primitive types such as boolean, integer, single/multi lines of text etc

While the above might suit the majority of merchants, there are use cases where complex content needs to be displayed on checkout. Therefore the aim of this tool is to convert a multi_line_text_field into markdown content.

This tool leverages native Checkout UI Extensions like Text, Heading, ListItem etc, so that we keep everything native.

image
image1515×912 63.6 KB

Supported Markdown Elements:

  • Headings (h1, h2, h3)

  • Bold and italic text

  • Unordered and ordered lists

  • Horizontal rules

  • Paragraphs with inline formatting

Input

image
image426×817 33.2 KB

Output

image
image901×979 22.7 KB

Let me know what you all think

7 Likes
2

This is awesome @Octavian !!

Thanks for creating and sharing this! It will be super valuable for devs looking to speed up displaying formatted content. Have also shared on X here to get even more visibility with the Shopify dev community: x.com

2 Likes