Whitespace Markers

About this piece

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.

Usage

The import and the props worth knowing about, in one place.

import { Editor44 } from "@/components/beste/piece/editor44";

<Editor44 />

for (let $1:i = 0; $1 < $2:arr.length; $1++) {}

Tab throughTab

Code template with dashed-outline tab stops. Active placeholder tints primary, others stay muted.

index.tsx

button.tsx

card.tsx

theme.css

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

1--primary:  #f43f5e;
2--accent:  #8b5cf6;
3--surface:  #0ea5e9;

CSS lines with inline color swatch squares next to each hex value.

return greet(name);

Ayşe

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

button.tsx

12 export function Button({ label }) {
13−  return <button>{label}</button>;
+  return <button className="btn">{label}</button>;
14 }

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

3 cursors

const name = 'Ayşe';
const role = 'design';
const team = 'core';

Stacked code lines each with a primary-tinted blinking caret at the same column plus a header count.