Code und JSON

Codeblöcke mit Dateireitern, Zeilennummern, Markierungen und Terminal-Stil, dazu JSON-Viewer zum Aufklappen, Durchsuchen und Pfade kopieren.

2 Components · 8 Variants

Kategorie wechseln

code-block

Codeblock

Code mit Dateikopf, Reitern, Kopierknopf, Zeilennummern, Hervorhebungen und Diffs. Die Syntaxfarben kommen aus dem Theme und dem Akzent.

Eine Datei
Reiter
Hervorhebung und Diff
Terminal

Props und Details

Eine Datei

Dateiname, Sprache, Kopieren und Zeilennummern. Lange Zeilen scrollen im Block, nie die Seite.

Installv1.0.0

aiw add @ai-website/code-block

Bringt mit utils, kit, icon

Usage

<CodeBlock filename="send-invoice.tsx" code={source} />

Source

Reiter

Mehrere Dateien in einem Block. Pfeiltasten wechseln die Reiter, der Kopierknopf nimmt die offene Datei.

Installv1.0.0

aiw add @ai-website/code-block

Bringt mit utils, kit, icon

Usage

<CodeBlock files={[{ name: "pricing-card.tsx", code }, { name: "pricing-card.css", code }]} />

Source

Hervorhebung und Diff

Wichtige Zeilen tragen ein leichtes Akzentband. Im Diff bekommen neue und entfernte Zeilen eine Markierung und werden Screenreadern angesagt.

Installv1.0.0

aiw add @ai-website/code-block

Bringt mit utils, kit, icon

Usage

<CodeBlock filename="use-countdown.ts" highlight={[[6, 10]]} code={…} />  <CodeBlock diff code={"-old\n+new"} />

Source

Terminal

Ein Shell-Fenster. Befehle tragen einen Prompt, Ausgaben bleiben leise, Kopieren nimmt nur die Befehle.

Installv1.0.0

aiw add @ai-website/code-block

Bringt mit utils, kit, icon

Usage

<CodeBlock variant="terminal" title="zsh" code={"$ npm run build\n  Complete!"} />

Source

json-viewer

JSON-Ansicht

JSON, das man lesen kann. Ein Baum, der sich per Tastatur öffnet und schließt, Anzahlen an geschlossenen Zweigen, Werte nach Typ getönt, und ein Klick auf einen Schlüssel kopiert seinen Pfad.

Baum
Tabelle
Suche
API-Antwort

Props und Details

Baum

Zwei Ebenen offen zum Start, Pfeile öffnen den Rest, Leitlinien zeigen die Tiefe. Alle öffnen, alle schließen und kopieren stehen in der Leiste, der Pfad eines angeklickten Schlüssels steht darunter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/json-viewer

Bringt mit utils, kit, icon, copy-button

Usage

<JsonViewer label="order.json" data={order} depth={2} />

Source

Tabelle

Ein Array aus Objekten als Tabelle mit einer Spalte je Schlüssel, ein Umschalter zurück zum Baum. Verschachteltes zeigt seine Größe, Fehlendes einen Punkt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/json-viewer

Bringt mit utils, kit, icon, copy-button

Usage

<JsonViewer variant="table" label="bookings" data={bookings} />

Source

Suche

Schlüssel und Werte suchen, die passenden Pfade öffnen sich von selbst, Treffer werden markiert, ein Zähler sagt, wie viele.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/json-viewer

Bringt mit utils, kit, icon, copy-button

Usage

<JsonViewer variant="search" label="settings.json" data={settings} depth={1} />

Source

API-Antwort

Die Antwort einer Anfrage mit Methode, Pfad, Status, Zeit und Größe, der Inhalt als Baum und die Header im zweiten Reiter. Das Statuslicht pulsiert beim Eintreffen zweimal.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/json-viewer

Bringt mit utils, kit, icon, copy-button

Usage

<JsonViewer variant="response" request="GET /v1/orders/4821" status={200} statusText="OK" duration={182} headers={headers} data={order} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Code und JSON stehen.

Eine Datei

Reiter

Hervorhebung und Diff

Terminal

Baum

Tabelle

Suche

API-Antwort

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit