feat: add response syntax highlighting to API playground

Open Beginner friendly
#131 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start in src/components/api/playground-dialog.tsx and inspect how the request body editor uses the existing CodeMirror setup or how the site's Shiki setup is applied. Add highlighting to the response body tab while preserving the site's dark/light theme, then verify that JSON responses are readable in both themes.

Written by the indexing model from the issue text.

Description

Problem

The API playground dialog (`src/components/api/playground-dialog.tsx`) displays raw JSON responses without syntax highlighting. The response body tab shows plain monospace text, making it hard to read large responses.

Suggested Fix

  • Use the existing Shiki setup or CodeMirror (already imported for the request body editor) to highlight the response JSON
  • Apply the same dark/light theme as the rest of the site
Dominant language
TypeScript
Stars
2
Forks
1
Avg merge
12h 29m
Merged PRs (30d)
12

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.

More from raystack/chronicle

All issues in raystack/chronicle

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.