Advanced node type: Info with Markdown and images

Info node with Markdown and media

Info nodes support full Markdown formatting, allowing rich content including images, links, lists, and code blocks.

Supported Markdown

• Headings – # H1, ## H2, ### H3
• Emphasis – *italic*, **bold**, ***bold italic***
• Lists – Ordered (1. item) and unordered (- item)
• Links – [text](https://example.com)
• Images – ![alt text](https://example.com/image.png)
• Code – Inline `code` and blocks with triple backticks ```
• Blockquotes – > quoted text
• Tables – Pipe‑separated tables

Adding an image to an Info node

1. Click the Info node to open properties.
2. In the Content field, add a Markdown image: ![Diagram](https://your-cdn.com/diagram.png)
3. Optional: Add a caption below the image: Figure 1: Device reset button location
4. Save the node.

Embedding videos

Info nodes do not support direct video embedding, but you can embed a YouTube or Vimeo link as a clickable link or use an iframe via raw HTML (if HTML is enabled for your organization — contact support).

Alternative: Take a screenshot of the video frame and add a link to the video URL.

Best practices for Info nodes

• Keep content concise. Customers skim more than they read.
• Use images when they explain better than text (diagrams, screenshots, product photos).
• Host images on a CDN for fast loading.
• Add alt text for accessibility: ![Reset button location on device back panel]
• Test the Info node in the widget preview before publishing.
• Avoid putting critical instructions only inside an image; include text as well.

Markdown preview

In the Tree Editor properties panel, you can toggle a Preview mode to see how the Markdown will render in the widget.