MarkdownViewer article and demos #696

laurenic0l · 2026-01-22T04:53:09Z

Here's the first draft of the MarkdownViewer documentation. POM file should be updated with 25.11

closes #659

docs/docs/components/markdownviewer.md

hyyan

@laurenic0l This article has a few issues. The flow is not completely smooth, and it makes some incorrect assumptions.

Conflates "streaming" with "progressive rendering"
- append() works independently - content appears immediately if progressiveRender is off
- "Streaming methods" section title is misleading
- Streaming is about receiving data from server
- Progressive rendering is about displaying it character-by-character
Missing dependency clarity
- isRendering() only meaningful when progressiveRender is enabled
- stop(), flush(), whenRenderComplete() only work with progressiveRender on
- These dependencies aren't explained
Auto-scroll placement
- Presented as if related to streaming, but it's completely independent
- Can be used with or without streaming/progressive rendering
Organization implies wrong flow
- Suggests you need "streaming methods" for progressive rendering
- Reality: you can append() without progressiveRender

I suggest this structure, please verify:

Setting content
Appending content (for any incremental updates)
Auto-scroll (independent feature)
Progressive rendering (visual typewriter effect)
- Enable it
- Render speed
- Render state (isRendering)
- Controlling rendering (stop/flush)
- Waiting for completion (whenRenderComplete)
Clearing content
Syntax highlighting

src/main/java/com/webforj/samples/views/markdownviewer/MarkdownViewerView.java

docs/docs/components/markdownviewer.md

src/main/java/com/webforj/samples/views/markdownviewer/MarkdownViewerStreamingView.java

docs/docs/components/markdownviewer.md

hyyan · 2026-02-11T10:24:57Z

docs/docs/components/markdownviewer.md

+MarkdownViewer viewer = new MarkdownViewer("# Hello World");
+
+// Replace content entirely
+viewer.setContent("## New Content\n\n- Item 1\n- Item 2");


Use java multiline strings instead for readability

hyyan · 2026-02-11T10:27:06Z

src/main/java/com/webforj/samples/views/markdownviewer/MarkdownViewerView.java

+    card.setStyle("maxWidth", "600px")
+        .setStyle("width", "100%")
+        .setStyle("padding", "var(--dwc-space-l)")
+        .setStyle("background", "var(--dwc-color-surface-1)")


that should be: var(--dwc-surface-3)

hyyan · 2026-02-11T10:28:13Z

docs/docs/components/markdownviewer.md

+viewer.append("More content here...");
+```
+
+By default, appended content appears immediately. When progressive rendering is enabled, appended content goes into a buffer and displays character-by-character instead.


Link progressive rendering section

hyyan · 2026-02-11T10:32:44Z

src/main/java/com/webforj/samples/views/markdownviewer/MarkdownViewerProgressiveView.java

+      viewer.setRenderSpeed(speed);
+    });
+
+    viewer.setProgressiveRender(true)


add var(--dwc-surface-3) background please

hyyan · 2026-02-11T10:34:32Z

src/main/java/com/webforj/samples/views/markdownviewer/MarkdownViewerProgressiveView.java

+        .setSpacing("var(--dwc-space-m)")
+        .setPadding("var(--dwc-space-l)");
+
+    speedChoice.setLabel("Render Speed");


align to right and give it 200px width please

hyyan · 2026-02-11T11:03:01Z

src/test/java/com/webforj/samples/pages/markdownviewer/MarkdownViewerPage.java

+    return italicText;
+  }
+
+  public Locator getStrikethrough() {


This is not used anywhere

hyyan · 2026-02-11T11:07:51Z

src/test/java/com/webforj/samples/views/markdownviewer/MarkdownViewerProgressiveViewIT.java

+import com.webforj.samples.pages.markdownviewer.MarkdownViewerProgressivePage;
+import com.webforj.samples.views.BaseTest;
+
+public class MarkdownViewerProgressiveViewIT extends BaseTest {


Tests only check element visibility on initial load - they don't verify any behavior or content. For example, the streaming test never types a message, clicks send, or checks that streaming starts. The basic viewer test checks that a tag exists somewhere, but not that the markdown rendered the expected text. These tests are too shallow to catch regressions - they'll keep passing even when functionality is broken. we should be testing actual behavior (send a message, verify response appears) and asserting on expected content rather than just element presence.

hyyan · 2026-02-11T12:00:13Z

src/main/java/com/webforj/samples/views/markdownviewer/MarkdownViewerStreamingView.java

+    messagesArea.addClassName("chat__messages");
+    messagesArea.setStyle("overflowY", "auto");
+
+    viewer.setProgressiveRender(true)


enable auto scroll

hyyan · 2026-02-11T12:19:50Z

docs/docs/components/overview.md

    <p>A component for displaying user profile pictures or initials, with support for different sizes, shapes, and themes.</p>
  </GalleryCard>

+  <GalleryCard header="MarkdownViewer" href="markdownviewer" image="/img/components/MarkdownViewer.png">


Let's update the screenshot after you fix the demo background to use Surface 3.

hyyan · 2026-02-11T12:24:56Z

docs/docs/components/markdownviewer.md

+
+## Syntax highlighting {#syntax-highlighting}
+
+The `MarkdownViewer` supports syntax highlighting for code blocks when Prism.js is available. Add Prism.js to your app using the `@JavaScript` and `@StyleSheet` annotations:


Let's link Prism.js

hyyan · 2026-02-11T12:55:28Z

@MatthewHawkins @laurenic0l, we'll need to get this fixed before we can merge.

#738

laurenic0l requested review from EHandtkeBasis, MatthewHawkins, bbrennanbasis, gosteenBASIS and hyyan as code owners January 22, 2026 04:53

github-actions bot reviewed Jan 22, 2026

View reviewed changes

docs/docs/components/markdownviewer.md Outdated Show resolved Hide resolved

docs/docs/components/markdownviewer.md Outdated Show resolved Hide resolved

docs/docs/components/markdownviewer.md Outdated Show resolved Hide resolved

laurenic0l added status: needs-snapshot Update to the latest snapshot before this PR can be merged. status: waiting-for-review The PR is ready. Waiting for team members to review. labels Jan 22, 2026

hyyan requested changes Jan 22, 2026

View reviewed changes

laurenic0l added status: waiting-for-author Review is done. Waiting for the PR author to apply changes or respond. and removed status: waiting-for-review The PR is ready. Waiting for team members to review. labels Jan 22, 2026

github-actions bot reviewed Jan 26, 2026

View reviewed changes

docs/docs/components/markdownviewer.md Show resolved Hide resolved

laurenic0l requested a review from hyyan January 26, 2026 23:20

laurenic0l added 4 commits January 26, 2026 22:04

markdownviewer article and demos

2d37da6

adding tests

1b86472

changed article flow to match Hyyan's feedback and updated demos

a354d77

component image

fde2508

laurenic0l force-pushed the 659-markdownviewer-doc branch from 62c2859 to fde2508 Compare January 27, 2026 03:04

adding to gallery

47f2007

laurenic0l added status: waiting-for-review The PR is ready. Waiting for team members to review. and removed status: waiting-for-author Review is done. Waiting for the PR author to apply changes or respond. labels Jan 27, 2026

fix: Corrected link for the MarkDownViewer JavaDocs

f8f9da3

hyyan removed the status: needs-snapshot Update to the latest snapshot before this PR can be merged. label Feb 6, 2026

hyyan requested changes Feb 11, 2026

View reviewed changes

hyyan added status: waiting-for-author Review is done. Waiting for the PR author to apply changes or respond. and removed status: waiting-for-review The PR is ready. Waiting for team members to review. labels Feb 13, 2026


		## Syntax highlighting {#syntax-highlighting}

		The `MarkdownViewer` supports syntax highlighting for code blocks when Prism.js is available. Add Prism.js to your app using the `@JavaScript` and `@StyleSheet` annotations:

MarkdownViewer article and demos #696

Are you sure you want to change the base?

MarkdownViewer article and demos #696

Uh oh!

Conversation

laurenic0l commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hyyan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hyyan commented Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

laurenic0l commented Jan 22, 2026 •

edited

Loading