MDX_AnswerHub

MDX_AnswerHub turns a conventional FAQ into a searchable, topic-based answer center. Visitors can search question and answer content, browse automatically generated categories, and expand the information they need.

Designers can author questions individually in Framer or import an existing FAQ collection as text. Both sources appear together without changing each other's saved content. Answers can now also include optional images for screenshots, setup guides, and visual support content. A new instance includes 19 demonstration questions across six topics, arranged as a guided learning path from manual Markdown to equivalent bulk syntax, visual answers, and customization.

Bulk answers use the same Markdown as manual answers: `A:` identifies where the answer begins; bold, italic, links, lists, code fences, and standalone image markers keep their existing syntax. The exact markers and results are introduced in 11 Rich Answers Syntax.

Enable Bulk Input, then paste content into Bulk FAQs. The importer recognizes the following five formats locally; it does not call a service or overwrite Questions. Manual entries appear first, followed by imported entries in pasted order. Category names must match to share a topic. Turning Bulk Input Off hides imported questions but retains the pasted text; no automatic deduplication is performed.

Category: Getting Started
Q: Can I edit imported questions?
A: Yes. Edit or rearrange the pairs directly in Bulk FAQs.

Question: Can answers contain links?
Answer: Yes. Use [Framer](https://www.framer.com/).

Can I customize the layout?
Yes. Choose Cards or Dividers.

Does search include answers?
Yes. It searches readable answer content as well.

# Setup & Support
### How do I add questions?
Use **Questions** for individual entries or **Bulk Input** for pasted FAQs.

### Can I include a list?
Yes:
- First step
- Second step

1. Does AnswerHub support dark mode?
Yes. Choose Dark or Auto.

2. Is bulk input required?
No. You can use manual Questions alone.

[
  {
    "question": "Can I customize colors?",
    "answer": "Yes. Light and Dark palettes have separate controls.",
    "category": "Appearance"
  },
  {
    "question": "Where is the guide?",
    "answer": "Visit the MODAX documentation.",
    "category": "Support",
    "linkLabel": "Read the guide",
    "linkUrl": "https://modax.framer.website/mdx-components/mdx-answer-hub"
  }
]

Use a labeled answer for multiline instructions or snippets. Code fences inside an answer are preserved and are not parsed as new questions. The following entire sample can be pasted into Bulk FAQs:

Category: Developers
Q: How do I log a message?
A: Use a JavaScript statement:

```js
console.log("Hello from MODAX")
```

Add labeled image metadata after the answer text in a Q/A pair. `Image:` expects a publicly accessible URL; the other fields are optional:

Category: Visual Support
Q: Where do I start setup?
A: Open the settings shown below.
Image: https://example.com/settings.png
Alt: Screenshot of the setup panel.
Caption: Step 1 — open Settings.
Position: Bottom
Fit: Contain
Height: 280

In JSON, use the corresponding media keys (the importer also accepts `imageUrl`, `alt`, and `caption`):

[
  {
    "question": "Where do I start setup?",
    "answer": "Open the settings shown below.",
    "category": "Visual Support",
    "image": "https://example.com/settings.png",
    "imageAlt": "Screenshot of the setup panel.",
    "imageCaption": "Step 1 — open Settings.",
    "imagePosition": "bottom",
    "imageFit": "contain",
    "imageHeight": 280
  }
]

Tip: If precise image placement within a long answer matters, use standalone Markdown image lines in the `A:` body instead of an item-level `Image:` field. Keep image lines outside fenced code blocks so they render as images.

• Each question must have an answer. Unmatched text and malformed JSON produce warnings rather than modifying manual content.
• Canvas-only diagnostics show imported and combined counts and up to 12 warnings; diagnostics are not displayed to site visitors.
• Bulk text is limited to 100,000 characters and 150 imported questions. The manual Questions array independently supports up to 150 entries.
• Imported entries remain editable and reorderable in Bulk FAQs, not as generated rows inside the native Questions array.

Live documentation: https://modax.framer.website/mdx-components/mdx-answer-hub

MODAX Framer collection: https://www.framer.com/@modax/

The Answer property and imported answers share the same renderer. Markdown is optional; plain text works normally. The default Rich Answers questions demonstrate syntax alongside its rendered output; Smart Bulk Import shows the equivalent `Category:` / `Q:` / `A:` format.

The following markers can be typed directly in an answer. This example displays the exact syntax literally:

**important**
*emphasis*
_emphasis_
[Framer](https://www.framer.com/)
`npm run dev`
- First item
* Another item
+ Another item
1. Numbered item

Bold and italic render as emphasis; links are clickable after URL safety checks; backticks format inline code; list markers create lists. Separate paragraphs with a blank line.

Start and finish a block with three backticks (or three tildes). An optional language after the opening fence becomes the code label. This outer example shows exactly what to type:

```tsx
export function Welcome() {
    return <p>Built with Framer.</p>
}
```

The rendered block includes horizontal scrolling and a Copy control that copies the code without its fence markers. Existing plain-text answers do not need conversion.

In Questions, select an item and enable Show Image, then choose Image Source:

• Upload (default): Choose or upload an asset through Framer's Image control. Existing image selections without an Image Source setting continue working in this mode.
• URL: Paste a direct publicly accessible `https://` or `http://` image address into Image URL. An empty or invalid address displays no image; the component never falls back to an uploaded image while URL mode is selected.

Both modes share Image Alt, optional Caption, Image Position (Top/Bottom), Image Fit (Cover/Contain), and Image Height (160–520px). Top places the image before the answer; Bottom places it after. Cover crops to fill the frame, while Contain fits the complete image. Switching source modes does not overwrite the saved value in the other field. The default Visual Answers topic includes one live example of each mode.

Bulk FAQs still uses public image URLs through `Image:` labels or JSON `image` / `imageUrl` values; there is no upload field in bulk text.

For an image inside answer Markdown, place the following on its own line (replace the sample URL with a public image address). The optional quoted text is displayed as the image caption:

![Screenshot of the product settings](https://example.com/settings.png "Product settings screen")

All three methods render inside a rounded, theme-aware image container. Search includes image alt text and captions. Markdown images must use a URL that the visitor's browser can retrieve.