Live Code Playground Showcase Features Block for React

Edit LANGUAGES: each is built with languageOf from an id, a label, a file name, how the result is declared and its lines. A line is made of kw, txt, qs and cm tokens: keywords are bold, strings and comments muted. FIELDS holds the result's fields, with each field's name and type in every language, in the same order as LANGUAGES.

No. It shows a spinner for WAIT milliseconds and then the canned result. To call something real, replace the timeout in run with your request and set the result from its answer. The call's state is announced in a polite status line: "Running events.track", then "Response received, 201 Created".

The plain text of the language on show, without line numbers or styling. It tells screen readers when the text is on the clipboard, and says so too if the browser refuses, as on a page not served over HTTPS.

It follows your theme, light or dark, like the rest of the page. The code uses the page's own colours at different weights instead of a syntax palette, so it holds up in every preset. A real terminal would be the only content worth forcing dark.

Tab reaches the language tabs and the arrow keys move between them; the code panel is a tab stop too, so a long line can be scrolled with the arrow keys. The tab state lives in the block, so the response panel and the copy button follow it. The tabs are controlled with value and onValueChange, which receives the new value.

The response panel moves under the code, and the file name hides to leave room for the tabs and the copy button. Code lines scroll sideways inside their panel instead of wrapping, and the window keeps one height across the three languages so switching never moves the page.