vercel-labs / vercel-labs/json-render
[Feature Request] Built-in copy/export utility for rendered UI (markdown parity)
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
uispec and amarkdowntwin (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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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