vercel-labs / vercel-labs/json-render

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

Open
#298 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
16.8k
Forks
901
Avg merge
3h 14m
Merged PRs (30d)
4

Description

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! 🙏

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no files, tests, or entry points. Start by locating the rendered UI and existing copy or export behavior, then trace how component specs are represented. Done means an agreed portability path is implemented and validated against the table example without requiring a separate markdown response.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.