[Feature Request] Built-in copy/export utility for rendered UI (markdown parity)

[JAYKALIA007]

Hey team 👋

First off, love what you've built here.

Context

I recently migrated my app from markdown-based LLM responses to json-render generative ui for better UX. One thing I'm missing though is copy portability.
With markdown, users could copy a response and paste it anywhere — docs, email, Slack — and it would still be readable and structured.

With generative UI, the same action gives them the raw JSON spec, which isn't meaningful outside the app.

Example

Prompt: "Give me a list of 5 users"

• Rendered: A beautiful Table component ✨
• Copied: The raw JSON spec 😅

What I've Tried

• Asking the LLM to return both a ui spec and a markdown twin (works but costs extra tokens)
• DOM serialization via outerHTML (only works in rich text editors)
• Manual text derivation from the JSON (lossy and app-specific)

Question

Is there a recommended pattern for this I might have missed? If not, would something like a toMarkdown(spec) utility or a <CopyButton /> component be something the team would consider?

Happy to contribute if there's interest — just wanted to check in before going down a custom path. Thanks so much! 🙏

[eshengsky]

This is exactly the problem I’m trying to solve with MFUI: every rendered component has a deterministic text projection, so users can copy/share readable content while the app still renders rich UI.

The idea is not “generate UI + separately ask the LLM for markdown”, but “component spec + portable text projection” as one message shape.

Repo: https://github.com/eshengsky/mfui

Disclosure: I’m working on MFUI.

[JAYKALIA007]

Cool, thanks. Will take a look at this.
P.S. - for now, I have added a small codeblock which suffices our usecase since we have a small number of components.

// Converts a parsed GenUI spec to a human-readable markdown string.
// Lossy by design — the goal is copy-paste utility, not a pixel-perfect replica.

const elementToMarkdown = (key, elements) => {
  const element = elements[key]
  if (!element || typeof element !== 'object') return ''

  const { type, props, children } = element
  if (!type || !props) return ''

  const renderChildren = (keys) =>
    (keys || [])
      .map((k) => elementToMarkdown(k, elements))
      .filter(Boolean)
      .join('\n\n')

  switch (type) {
    case 'Typography':
      if (!props.content) return ''
      return props.variant === 'heading' ? `## ${props.content}` : props.content

    case 'Stack':
      return renderChildren(children)

    case 'Row': {
      const parts = (children || []).map((k) => elementToMarkdown(k, elements)).filter(Boolean)
      return parts.join(' · ')
    }

    case 'Card': {
      const parts = []
      if (props.title) parts.push(`## ${props.title}`)
      const body = renderChildren(children)
      if (body) parts.push(body)
      return parts.join('\n\n')
    }

    case 'Tag':
      return props.label ? `[${props.label}]` : ''

    case 'Banner':
      return props.message ? `> ${props.message}` : ''

    case 'NG_Link':
      return props.label && props.href ? `[${props.label}](${props.href})` : props.label || ''

    case 'Accordion': {
      const items = props.items || []
      const itemKeys = children || []
      return items
        .map((item, i) => {
          const heading = `## ${item.heading}`
          const body = itemKeys[i] ? elementToMarkdown(itemKeys[i], elements) : ''
          return body ? `${heading}\n${body}` : heading
        })
        .filter(Boolean)
        .join('\n\n')
    }

    case 'DataTable': {
      const parts = []
      if (props.title) parts.push(`## ${props.title}`)
      const columns = props.columns || []
      const rows = props.rows || []
      if (columns.length > 0) {
        parts.push(`| ${columns.map((c) => c.header).join(' | ')} |`)
        parts.push(`| ${columns.map(() => '---').join(' | ')} |`)
        rows.forEach((row) => {
          parts.push(`| ${columns.map((c) => (row[c.key] != null ? String(row[c.key]) : '')).join(' | ')} |`)
        })
      }
      return parts.join('\n')
    }

    case 'Chart': {
      const parts = []
      const series = props.series || []
      const labels = props.labels || []
      series.forEach((s) => {
        parts.push(`${s.label}:`)
        labels.forEach((label, i) => {
          parts.push(`  ${label}: ${s.data != null && s.data[i] != null ? s.data[i] : ''}`)
        })
      })
      if (props.insight) parts.push(props.insight)
      return parts.join('\n')
    }

    case 'ActionButton':
      return ''

    default:
      // Unknown component — try to render children to be forward-compatible
      return renderChildren(children)
  }
}

const specToMarkdown = (spec) => {
  if (!spec || typeof spec !== 'object') return ''
  if (!spec.root || !spec.elements || typeof spec.elements !== 'object') return ''
  if (!spec.elements[spec.root]) return ''
  return elementToMarkdown(spec.root, spec.elements).trim()
}

module.exports = { specToMarkdown }