Tokenized Line

Single-line snippet with keywords, strings, and function names colored by semantic token kind.

const user = await fetchUser("42");

Import & use

import { Code5 } from "@/components/beste/piece/code5";

<Code5
  tokens={[
    {
      "kind": "keyword",
      "text": "const"
    },
    {
      "kind": "plain",
      "text": " "
    },
    {
      "kind": "var",
      "text": "user"
    },
    {
      "kind": "plain",
      "text": " = "
    },
    {
      "kind": "keyword",
      "text": "await"
    },
    {
      "kind": "plain",
      "text": " "
    },
    {
      "kind": "fn",
      "text": "fetchUser"
    },
    {
      "kind": "punct",
      "text": "("
    },
    {
      "kind": "string",
      "text": "\"42\""
    },
    {
      "kind": "punct",
      "text": ");"
    }
  ]}
/>

More Code pieces

View all Code

const greeting = "Hello, Beste!";ts

Code Line

One-line code snippet with a monospace pill and a tiny language tag on the right.

{

"name":"Beste",

"version":"1.0.0",

"active":true,

"count":42,

"owner":null

}

JSON Snippet

Pretty-printed JSON object with sky keys, emerald strings, and amber numerics.

SELECT id, name, email

FROM users

WHERE active = true

ORDER BY created_at DESC

LIMIT 10;

SQL Query

Multi-line SQL with violet keywords, emerald string literals, and amber numerics.

members.ts

1import { Sirius } from '@sirius/sdk'
2 
3const client = new Sirius(apiKey)
4await client.members.create({ name })

SDK Snippet Card

A code card with a filename header and copy affordance over syntax-toned, line-numbered source.

greet.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}
4 
5console.log(greet("Beste"));

Code Snippet Card

Dark editor card with three traffic-light dots, a filename tab, and line-numbered code.

function greet(name) {

return 'Hi ' + name;

return `Hello, ${name}!`;

}

Diff Snippet

Compact diff card with added, removed, and context lines tinted in emerald and rose.