Not just plain text: rendering Markdown in Compose

Compose offers powerful cross-platform UI development, but lacks a powerful, built-in rich text formatting capabilities. Compose 1.7 introduced support for reading HTML into AnnotatedStrings, but that is only enough for simple runs of formatted text. This leaves developers having to programmatically build more complex AnnotatedStrings, but that is not ideal and it’s pretty much impossible to internationalise.

In the Jewel library we provide a new, powerful API to display Markdown, a common and versatile text format. Markdown is easily created, managed and translated, even allowing you to go beyond what’s achievable with the basic HTML support in Android resources. In fact, Markdown goes beyond inline text styling, and lets you express block-level formatting with facilities like blockquotes, tables, images, and more.

This talk will start by introducing the Jewel library, and then cover all aspects of how we implemented the Jewel Markdown parser. I’ll explain how Markdown is a superior solution compared to HTML for the majority of relevant use cases. We’ll discuss the Markdown specs — or the lack thereof, the various proprietary extensions that exist, and how we’re tackling this challenge. Then, we’ll look at how the library parses the raw Markdown input, and the process that transforms that into a set of Composables on screen. Lastly, the talk will showcase some limitations we’ve run into with the text APIs in Compose, how we’ve worked around some of those, and the impact this work is having on the larger Compose ecosystem.

This talk is aimed at developers who are familiar with Jetpack Compose and/or Compose Multiplatform, and are looking at a way to get rich text rendering, maybe to get rid of a few webviews, or in search of inspiration for their own server-driven UI framework. You’ll not only leave the room with actionable information on those topics but, hopefully, some surprising Markdown facts you didn’t know about!

Transcript

1. NOTJUST PLAINTEXT RENDERING MARKDOWN IN COMPOSE Sebastiano Poggi @sebastiano.dev @seb@androiddev.social
2. HAS THIS EVER HAPPENED TO YOU?
3. “I want to display rich text in this label” — You, a fancy cursive-speaking person
4. Reticulate splines Enable spline reticulation algorithms Learn more “I want to display rich text in this label” — You, a fancy cursive-speaking person
5. Web HTML & CSS
6. Web HTML & CSS Swing HTML & CSS
7. Web HTML & CSS Swing HTML & CSS **
8. Web HTML & CSS Swing HTML & CSS ** Android views HTML, to some extent
9. Web HTML & CSS Swing HTML & CSS ** Android views HTML, to some extent Jetpack Compose HTML, to some extent
10. Web HTML & CSS Swing HTML & CSS ** Android views HTML, to some extent Jetpack Compose HTML, to some extent Compose for Desktop Well, err… DIY
11. WE CAN DO BETTER
12. Small detour
13. ** HTML & CSS
14. ** a lot of heavy lifting
15. https://www.codewiththeitalians.it/
16. https://www.codewiththeitalians.it/
17. https://www.codewiththeitalians.it/ Fix with CSS! overflow-wrap: break-word;
18. https://www.codewitht heitalians.it/ overflow-wrap: break-word; Fix with CSS!
19. overflow-wrap: break-word; …does not work https://www.codewiththeitalians.it/ Fix with CSS!
20. What do we do, then?
21. IF YOU GUESSED HERE’S YOUR TROPHY ! HACKS What do we do, then?
22. Inject <wbr> strategically https://www.codewiththeitalians.it/
23. https<wbr>://www<wbr>.codewiththeitalians<wbr>.it<wbr>/ Inject <wbr> strategically
24. https://www. codewiththeitalians.it/ Inject <wbr> strategically
25. https://www.codewitht heitalians.it/ EVERYTHING IS A LIE Inject <wbr> strategically
26. DO NOT WANT /end of detour
27. WHAT DO WE DO? MARKDOWN maybe slightly spoiled by the talk title
28. Why Markdown Easy to read and write Does not allow users to de!ne styling Good for my use case ! Great for UI text and i18n
29. Why Markdown Easy to read and write Does not allow users to de!ne styling Good for my use case ! Great for UI text and i18n
30. Hello <font color='red'>world!"font>
31. Hello <font color='red'>world!"font> Hello world
32. Hello <font color='#0068DA'>world!"font> Hello world
33. world Hello world Hello <font color='#0068DA'>world!"font>
34. world Hello world Hello <font color='#0068DA'>world!"font>
35. Hello world Hello <font color='#%%%COLOR%%%'>world!"font>
36. Can’t happen in Markdown!
37. Can’t happen in Markdown! bold strong emphasis
38. Hello **world**
39. Hello **world** Hello <strong>world!"strong>
40. Hello **world** Hello world Hello <strong>world!"strong>
41. Hello **world** Hello world Hello <strong>world!"strong>
42. Hello **world** Hello world Hello <strong>world!"strong>
43. Hello **world** Hello world Hello <strong>world!"strong>
44. WE WANT NORMAL
45. WHAT IS NORMAL, ANYWAY?
46. what’s expected normal
47. what’s expected normal
48. GitHub GitLab Issue trackers Google Docs Blog post composers StackOver"ow …and more
49. Intuitive expectations GitHub GitLab Issue trackers Google Docs Blog post composers StackOver"ow …and more
50. Intuitive expectations MARKDOWN IS A LIE
51. Time for another rabbit hole? "
52. John Gruber’s Daring Fireball — 2004
53. John Gruber’s Daring Fireball — 2004 Loves Apple Tech opinionist
54. John Gruber’s Daring Fireball — 2004 Reference parser The spec lives here (intentionally) Vague
55. Reference parser …written in Perl
56. Reference parser …written in Perl “write-only language”
57. Markdown specs are limited
58. Missing “expected” features: Tables Syntax highlighting Emojis Footnotes Strikethrough …
59. VAGUE SPECS MISSING FEATURES BAD REFERENCE # "
60. Many incompatible implementations
61. Many incompatible implementations Babelmark
62. Many incompatible implementations GitHub Flavored Markdown
63. Many incompatible implementations GFM
64. What is the !x?
66. COMMONMARK Born in 2014 as Standard Markdown
67. CommonMark GFM GLFM StackOver"ow …
68. “FUN” FACT GFM is also poorly specced Features de!ned in docs but not specs
69. HOWEVER For many Markdown is ~GFM CommonMark has a nice parser
70. Let’s use CommonMark! commonmark-java, not jetbrains/markdown
71. Let’s use CommonMark! commonmark-java, not jetbrains/markdown Kotlin-based, extensible Missing GFM features Not fully compliant
72. Let’s use CommonMark! commonmark-java, not jetbrains/markdown Java-based, extensible GFM extensions Fully compliant
73. HOW TO RENDER MARKDOWN IN TWO EASY* STEPS
74. Small detour
75. Jewel Compose for Desktop theme & components code lives here
76. End of detour
77. MARKDOWN
78. MARKDOWN ...how?
79. Raw MarkDown Parse as AST Emit UI components Raw Markdown
80. Raw MarkDown Parse as AST Emit UI components step 1 step 2 Raw Markdown
81. Step 1: Parse as AST commonmark-java AST
82. Step 1: Parse as AST commonmark-java AST outside the composition
83. Block Block Block Block …
84. Block Block Block Block … Block Block or Inline node Inline node … …
85. Can’t use CommonMark models as-is No equals() and hashCode() No random access to children
86. Parse as AST List<MarkdownBlock> ✅
87. Step 2a: Render block nodes Step 2b: Render inline nodes Step 2: Emit UI components
88. Step 2a: Render block nodes Step 2b: Render inline nodes Step 2: Emit UI components inside the composition
89. Step 2a: Render block nodes Step 2b: Render inline nodes inside the composition
90. Step 2a: Render block nodes Step 2b: Render inline nodes inside the composition MarkdownBlocks composables
91. Block Block … Block … Block How do we handle nested blocks? Block
92. RECURSION $
93. Blockquote Bullet list Paragraph Header 1 Image Divider Paragraph Code block Paragraph … … Simple item Complex item …
94. Paragraph … Blockquote Complex item Simple item … Bullet list Paragraph Header 1 Image Divider Paragraph Code block … render( )
95. Blockquote Paragraph … Complex item Simple item … Bullet list Paragraph Header 1 Image Divider Paragraph Code block … render( )
96. Blockquote Paragraph … Blockquote Complex item Simple item … Bullet list Paragraph Header 1 Image Divider Paragraph Code block … render( )
97. Blockquote Paragraph Header 1 Image Divider Paragraph Code block … Paragraph … Complex item Simple item … Bullet list render( render( )
98. Blockquote Paragraph Header 1 Image Divider Paragraph Code block … Paragraph … Complex item Simple item … Bullet list render( render( )
99. YEAH BUT ACTUALLY WHAT ABOUT HTML?
100. No HTML. Don’t want to implement a browser
101. No HTML. Don’t want to implement a browser May have special casing <kbd> <image !# embeds?
102. Step 2a: Step 2b: Render inline nodes ✅ Render block nodes
103. Paragraph Inline node Inline node … No recursion needed %
104. Step 2a: Render block nodes InlineMarkdown inside the composition AnnotatedString Step 2b: Render inline nodes
105. WE HAVE A PROBLEM AnnotatedString
106. WE HAVE A PROBLEM AnnotatedString limited by TextStyle capabilities
107. Case study: inline code RAW MARKDOWN RENDERED MARKDOWN This PR adds animations to the `Onboarding` flow.
108. Case study: inline code RAW MARKDOWN RENDERED MARKDOWN This PR adds animations to the Onboarding "ow. This PR adds animations to the `Onboarding` flow.
109. Case study: inline code This PR adds animations to the `Onboarding` flow. RAW MARKDOWN This PR adds animations to the Onboarding "ow. RENDERED MARKDOWN Onboa &
110. Case study: inline code This PR adds animations to the `Onboarding` flow. RAW MARKDOWN RENDERED MARKDOWN This PR adds animations to the Onboarding "ow. Onboardin '
111. Case study: inline code I reckon you could improve it by using `animateFloatAsState(target, tween(1000, 1500))` ! RAW MARKDOWN RENDERED MARKDOWN I reckon you could improve it by using animateFloatAsState (target, tween(1000, 1500)) ! (
112. inline images and links
113. inline images and links doable, but wip InlineTextContent Coil for loading Layout jumps unavoidable
114. inline images and links Use LinkAnnotation Stateful styling Can’t draw focus ring
115. inline images and links Use LinkAnnotation Stateful styling Can’t draw focus ring Reticulate splines Enable spline reticulation algorithms Learn more
116. IT WILL GET BETTER (I hope)
117. PUTTING IT ALL TOGETHER
118. Two-pass processing: Parse as AST Emit UI components
119. Two-pass processing: Parse as AST Parse as AST Emit UI components Emit UI components Outside the composition Run only when raw Markdown changes
120. Two-pass processing: Parse as AST Emit UI components Outside the composition Run only when raw Markdown changes Inside the composition Run when raw Markdown changes Run when theme changes Run when editor scheme changes Builds AnnotatedStrings: expensive?
121. Display rich text Render large !le vs
122. Display rich text Render large !le vs many small instances minimise overhead
123. Display rich text Render large !le vs many small instances lazy container editor mode minimise overhead
124. Display rich text Render large !le vs many small instances lazy container editor mode scroll sync (wip) minimise overhead
125. ONE LAST THING ) ☝️
126. WYSIWYG is not possible
127. LET’S SEE THIS IN ACTION
129. Good enough* to render its readme Has missing/WIP features Extensible: GFM features
130. I SWEAR THIS IS ALMOST OVER
131. Forked by OpenAI for ChatGPT Android A HAT TIP TO https://halilibo.com/compose-richtext/ the one from the keynote
132. The OG Markdown renderer inspo ANOTHER HAT TIP TO https://github.com/ErikHellman/MarkdownComposer
133. SO WHAT I MEANT TO SAY ALL ALONG IS…
134. Markdown is great Especially for i18n and server-driven UI Try out Markdown in Jewel …or make your own renderer
135. THANK YOU ♥️ @sebastiano.dev @seb@androiddev.social