Expressions

Expression Editor

Add syntax highlighting and context-aware completions to expression inputs.

Note

This guide assumes familiarity with LyteNyte Grid’s expression evaluator. For more details, refer to the Expressions Overview guide.

LyteNyte Grid exports ExpressionEditor, a compound component that wraps a <textarea> with syntax highlighting and optional context-aware completions. Use the ExpressionEditor component anywhere users need to write expressions.

The demo below demonstrates the ExpressionEditor component fully configured using the standard expression language provided by LyteNyte Grid.

Complete Expression Editor

Expression

Result

2number

Illustrative Examples

Context

user

object

↳firstName"John"

string

↳lastName"Smith"

string

age23

number

location"London"

string

fullName() => …

demo.tsx
components.tsx

1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/expression-editor.css";
4
import {
5
  createCompletionProvider,
6
  Evaluator,
7
  ExpressionEditor,
8
  standardPlugins,
9
} from "@1771technologies/lytenyte-pro/expressions";
10
import { useCallback, useMemo, useState } from "react";
11
import { ContextRows, KindBadge, tw } from "./components.js";
12
import { TYPE_COLORS } from "../evaluate-standard-plugins/components.jsx";
13

14
const evaluator = new Evaluator(standardPlugins);
15

16
const context = {
17
  user: {
18
    firstName: "John",
19
    lastName: "Smith",
20
  },
21
  age: 23,
22
  location: "London",
23

24
  fullName: () => context.user.firstName + "  " + context.user.lastName,
25
};
26

27
const completionContext = {
28
  user: {
29
    value: {
30
      firstName: { value: "John", type: "string" as const },
31
      lastName: { value: "Smith", type: "string" as const },
32
    },
33
    type: "object" as const,
34
  },
35
  age: { value: 23, type: "number" as const },
36
  location: { value: "London", type: "string" as const },
37
  fullName: { value: null, type: "function" as const, return: "string" as const },
38
};
39

40
const EXAMPLE_PILLS = [
41
  'user.firstName + " " + user.lastName',
42
  "`${user.firstName} is ${age} old`",
43
  "age * 2",
44
  "fullName()",
45
];
46

47
export default function EvaluatorBasics() {
48
  const [value, setValue] = useState("1 + 1");
49

50
  const result = useMemo(() => {
51
    try {
52
      if (!value) return "";
53

54
      return evaluator.run(value, context);
55
    } catch (e) {
56
      return e instanceof Error ? e : new Error(String(e));
57
    }
58
  }, [value]);
59

60
  const tokenize = useCallback((s: string) => evaluator.tokensSafe(s, true), []);
61
  const provider = useMemo(() => {
62
    return createCompletionProvider(completionContext);
63
  }, []);
64

65
  const isError = result instanceof Error;
66

67
  return (
68
    <div className="flex flex-col gap-5 p-5">
69
      <label className="flex w-full flex-col gap-2">
70
        <div>
71
          <div className="text-ln-text-dark text-sm font-semibold">Expression</div>
72
        </div>
73

74
        <div data-ln-input="true" className="h-8 rounded-xl text-base">
75
          <ExpressionEditor.Root
76
            value={value}
77
            onChange={setValue}
78
            tokenize={tokenize}
79
            completionProvider={provider}
80
          >
81
            <ExpressionEditor.CompletionPopover className="border-ln-border bg-ln-bg-popover shadow-ln-shadow-400 overflow-hidden rounded-lg border py-1">
82
              <ExpressionEditor.CompletionList className="flex min-w-48 flex-col">
83
                {({ items }) =>
84
                  items.map((item, index) => (
85
                    <ExpressionEditor.CompletionListItem
86
                      key={item.id}
87
                      item={item}
88
                      index={index}
89
                      className="text-ln-text-dark hover:bg-ln-bg-strong aria-selected:bg-ln-primary-10 aria-selected:text-ln-primary-70 flex cursor-pointer select-none items-center gap-2.5 px-3 py-1.5 outline-none"
90
                    >
91
                      <KindBadge kind={item.kind} />
92
                      <span className="min-w-0 flex-1 truncate font-mono text-sm">{item.label}</span>
93
                      <span className="text-ln-text-xlight shrink-0 font-sans text-[10px]">{item.kind}</span>
94
                    </ExpressionEditor.CompletionListItem>
95
                  ))
96
                }
97
              </ExpressionEditor.CompletionList>
98
            </ExpressionEditor.CompletionPopover>
99
          </ExpressionEditor.Root>
100
        </div>
101
      </label>
102
      <div className="flex flex-col gap-2">
103
        <div className="text-ln-text-light text-xs font-medium">Result</div>
104
        <div
105
          className={`flex h-10 items-center gap-3 rounded-xl border px-4 py-3 font-mono text-sm ${
106
            isError
107
              ? "border-ln-red-30 bg-ln-red-10 text-ln-red-70"
108
              : "border-ln-border bg-ln-bg-light text-ln-text-dark"
109
          }`}
110
        >
111
          <span className="min-w-0 flex-1 truncate">{isError ? result.message : String(result)}</span>
112
          <span
113
            className={tw(
114
              "shrink-0 rounded-full px-2 py-0.5 font-sans text-[10px] font-medium",
115
              !isError && TYPE_COLORS[typeof result],
116
              isError && "bg-ln-red-30 text-ln-red-90",
117
            )}
118
          >
119
            {isError ? "error" : typeof result}
120
          </span>
121
        </div>
122
      </div>
123

124
      <div className="flex flex-col gap-2">
125
        <div className="text-ln-text-light text-xs font-medium">Illustrative Examples</div>
126
        <div className="flex flex-wrap gap-2">
127
          {EXAMPLE_PILLS.map((expr) => (
128
            <button
129
              key={expr}
130
              type="button"
131
              onClick={() => setValue(expr)}
132
              className="border-ln-border bg-ln-bg text-ln-text-dark hover:border-ln-primary-50 hover:bg-ln-primary-10 hover:text-ln-primary-50 cursor-pointer rounded-full border px-3 py-1 font-mono text-xs transition-colors"
133
            >
134
              {expr}
135
            </button>
136
          ))}
137
        </div>
138
      </div>
139

140
      {/* Context */}
141
      <div className="flex flex-col gap-2">
142
        <div className="text-ln-text-light text-xs font-medium">Context</div>
143
        <div className="border-ln-border bg-ln-bg-light divide-ln-border divide-y overflow-hidden rounded-lg border">
144
          <ContextRows obj={context as Record<string, unknown>} />
145
        </div>
146
      </div>
147
    </div>
148
  );
149
}

1
import { clsx, type ClassValue } from "clsx";
2
import { Fragment } from "react";
3
import { twMerge } from "tailwind-merge";
4

5
const TYPE_COLORS: Record<string, string> = {
6
  string: "bg-ln-green-10 text-ln-green-70",
7
  number: "bg-ln-info-10 text-ln-info-70",
8
  boolean: "bg-ln-yellow-10 text-ln-yellow-70",
9
  fn: "bg-ln-primary-10 text-ln-primary-70",
10
  object: "bg-ln-bg-strong text-ln-text",
11
};
12

13
function typeTag(val: unknown): string {
14
  if (typeof val === "function") return "fn";
15
  if (Array.isArray(val)) return "array";
16
  if (val === null) return "null";
17
  return typeof val;
18
}
19

20
function ContextRow({ name, value, depth = 0 }: { name: string; value: unknown; depth?: number }) {
21
  const type = typeTag(value);
22
  const isObj = type === "object";
23
  const colorClass = TYPE_COLORS[type] ?? "bg-ln-bg-strong text-ln-text";
24

25
  let displayVal: string | null = null;
26
  if (type === "fn") displayVal = "() => …";
27
  else if (!isObj) displayVal = typeof value === "string" ? `"${value}"` : String(value);
28

29
  return (
30
    <div
31
      className="grid grid-cols-[1fr_auto] items-center gap-3 py-2 pr-3"
32
      style={{ paddingLeft: `${12 + depth * 16}px` }}
33
    >
34
      <div className="flex min-w-0 items-baseline gap-2">
35
        {depth > 0 && <span className="text-ln-border-strong shrink-0 select-none font-mono text-xs">↳</span>}
36
        <span className="text-ln-text-dark shrink-0 font-mono text-xs font-semibold">{name}</span>
37
        {displayVal !== null && (
38
          <span className="text-ln-text-light min-w-0 truncate font-mono text-xs">{displayVal}</span>
39
        )}
40
      </div>
41
      <span className={`shrink-0 rounded-full px-2 py-0.5 font-sans text-[10px] font-medium ${colorClass}`}>
42
        {type}
43
      </span>
44
    </div>
45
  );
46
}
47

48
export function ContextRows({ obj, depth = 0 }: { obj: Record<string, unknown>; depth?: number }) {
49
  return (
50
    <>
51
      {Object.entries(obj).map(([key, val]) => {
52
        const isObj = typeTag(val) === "object" && val !== null;
53
        return (
54
          <Fragment key={key}>
55
            <ContextRow name={key} value={val} depth={depth} />
56
            {isObj && <ContextRows obj={val as Record<string, unknown>} depth={depth + 1} />}
57
          </Fragment>
58
        );
59
      })}
60
    </>
61
  );
62
}
63

64
const KIND_CONFIG: Record<string, { icon: string; bg: string; text: string }> = {
65
  function: { icon: "ph--function", bg: "bg-ln-primary-10", text: "text-ln-primary-50" },
66
  string: { icon: "ph--quotes", bg: "bg-ln-green-10", text: "text-ln-green-50" },
67
  number: { icon: "ph--hash", bg: "bg-ln-info-10", text: "text-ln-info-50" },
68
  boolean: { icon: "ph--toggle-left", bg: "bg-ln-yellow-10", text: "text-ln-yellow-50" },
69
  object: { icon: "ph--cube", bg: "bg-ln-bg-strong", text: "text-ln-text" },
70
  array: { icon: "ph--brackets-square", bg: "bg-ln-yellow-10", text: "text-ln-yellow-50" },
71
};
72

73
export function KindBadge({ kind }: { kind: string }) {
74
  const cfg = KIND_CONFIG[kind] ?? {
75
    icon: "ph--question",
76
    bg: "bg-ln-bg-strong",
77
    text: "text-ln-text-light",
78
  };
79
  return (
80
    <span className={`flex size-5 shrink-0 items-center justify-center rounded ${cfg.bg} ${cfg.text}`}>
81
      <span className={`iconify ${cfg.icon} size-3.5`} />
82
    </span>
83
  );
84
}
85

86
export function tw(...c: ClassValue[]) {
87
  return twMerge(clsx(...c));
88
}

Expression Editor Anatomy

ExpressionEditor is a compound component assembled from four parts. You can omit the completion sub-components entirely to use ExpressionEditor as a pure syntax-highlighted input.

With Completions
Without Completions

1
<ExpressionEditor.Root value={value} onChange={setValue} tokenize={tokenize} completionProvider={provider}>
2
  <ExpressionEditor.CompletionPopover>
3
    <ExpressionEditor.CompletionList>
4
      {({ items }) =>
5
        items.map((item, index) => (
6
          <ExpressionEditor.CompletionListItem key={item.id} item={item} index={index}>
7
            {item.label}
8
          </ExpressionEditor.CompletionListItem>
9
        ))
10
      }
11
    </ExpressionEditor.CompletionList>
12
  </ExpressionEditor.CompletionPopover>
13
</ExpressionEditor.Root>

1
<ExpressionEditor.Root value={value} onChange={setValue} tokenize={tokenize} />

Minimal Editor Setup

The only required props are value, onChange, and tokenize. Rendering ExpressionEditor.Root with no children gives you a fully functional syntax-highlighted input with no completion UI:

1
import { Evaluator, ExpressionEditor, standardPlugins } from "@1771technologies/lytenyte-pro/expressions";
2
import { useCallback, useState } from "react";
3

4
const evaluator = new Evaluator(standardPlugins);
5

6
function MyEditor() {
7
  const [value, setValue] = useState("");
8
  const tokenize = useCallback((s: string) => evaluator.tokensSafe(s, true), []);
9

10
  return (
11
    <div data-ln-input="true" style={{ height: 40 }}>
12
      <ExpressionEditor.Root value={value} onChange={setValue} tokenize={tokenize} />
13
    </div>
14
  );
15
}

Pass tokenize to ExpressionEditor.Root to enable syntax highlighting without completion UI. Use tokensSafe instead of tokens so the editor continues to render partial syntax highlighting when the expression has incomplete syntax.

Basic Expression Editor

Expression

Result

7number

Illustrative Examples

demo.tsx

1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/expression-editor.css";
4
import { Evaluator, ExpressionEditor, standardPlugins } from "@1771technologies/lytenyte-pro/expressions";
5
import { useCallback, useMemo, useState } from "react";
6
import { clsx, type ClassValue } from "clsx";
7
import { twMerge } from "tailwind-merge";
8

9
const evaluator = new Evaluator(standardPlugins);
10

11
const EXAMPLES = [
12
  "1 + 2 * 3",
13
  '"hello".toUpperCase()',
14
  "[1, 2, 3].length",
15
  "true && false || true",
16
  "100 > 50 ? 'big' : 'small'",
17
];
18

19
export default function ExpressionEditorBasic() {
20
  const [value, setValue] = useState("1 + 2 * 3");
21

22
  const result = useMemo(() => {
23
    try {
24
      if (!value) return "";
25

26
      return evaluator.run(value);
27
    } catch (e) {
28
      return e instanceof Error ? e : new Error(String(e));
29
    }
30
  }, [value]);
31

32
  const isError = result instanceof Error;
33
  const tokenize = useCallback((s: string) => evaluator.tokensSafe(s, true), []);
34

35
  return (
36
    <div className="flex flex-col gap-5 p-5">
37
      <label className="flex w-full flex-col gap-2">
38
        <div>
39
          <div className="text-ln-text-dark text-sm font-semibold">Expression</div>
40
        </div>
41

42
        <div data-ln-input="true" className="h-8 rounded-xl text-sm">
43
          <ExpressionEditor.Root className="text-sm" value={value} onChange={setValue} tokenize={tokenize} />
44
        </div>
45
      </label>
46
      <div className="flex flex-col gap-2">
47
        <div className="text-ln-text-light text-xs font-medium">Result</div>
48
        <div
49
          className={`flex h-10 items-center gap-3 rounded-xl border px-4 py-3 font-mono text-sm ${
50
            isError
51
              ? "border-ln-red-30 bg-ln-red-10 text-ln-red-70"
52
              : "border-ln-border bg-ln-bg-light text-ln-text-dark"
53
          }`}
54
        >
55
          <span className="min-w-0 flex-1 truncate">{isError ? result.message : String(result)}</span>
56
          <span
57
            className={tw(
58
              "shrink-0 rounded-full px-2 py-0.5 font-sans text-[10px] font-medium",
59
              !isError && TYPE_COLORS[typeof result],
60
              isError && "bg-ln-red-30 text-ln-red-90",
61
            )}
62
          >
63
            {isError ? "error" : typeof result}
64
          </span>
65
        </div>
66
      </div>
67

68
      <div className="flex flex-col gap-2">
69
        <div className="text-ln-text-light text-xs font-medium">Illustrative Examples</div>
70
        <div className="flex flex-wrap gap-2">
71
          {EXAMPLES.map((expr) => (
72
            <button
73
              key={expr}
74
              type="button"
75
              onClick={() => setValue(expr)}
76
              className="border-ln-border bg-ln-bg text-ln-text-dark hover:border-ln-primary-50 hover:bg-ln-primary-10 hover:text-ln-primary-50 cursor-pointer rounded-full border px-3 py-1 font-mono text-xs transition-colors"
77
            >
78
              {expr}
79
            </button>
80
          ))}
81
        </div>
82
      </div>
83
    </div>
84
  );
85
}
86

87
function tw(...c: ClassValue[]) {
88
  return twMerge(clsx(...c));
89
}
90
const TYPE_COLORS: Record<string, string> = {
91
  string: "bg-ln-green-10 text-ln-green-70",
92
  number: "bg-ln-info-10 text-ln-info-70",
93
  boolean: "bg-ln-yellow-10 text-ln-yellow-70",
94
  fn: "bg-ln-primary-10 text-ln-primary-70",
95
  object: "bg-ln-bg-strong text-ln-text",
96
};

Expression Editor Parts

Editor Root

ExpressionEditor.Root is the editor. It manages the textarea, token rendering, and completion state. Wrap ExpressionEditor.Root in a data-ln-input container to apply the correct sizing styles.

1
<div data-ln-input="true" style={{ height: 40 }}>
2
  <ExpressionEditor.Root value={value} onChange={setValue} tokenize={tokenize} />
3
</div>

ExpressionEditor.CompletionPopover renders a floating panel at the cursor using the native Popover API. The component opens and closes automatically based on the editor’s completion state, so you do not need to manage its visibility.

1
<ExpressionEditor.Root>
2
  <ExpressionEditor.CompletionPopover className="rounded-lg border py-1">
3
    ...
4
  </ExpressionEditor.CompletionPopover>
5
</ExpressionEditor.Root>

Completion List

ExpressionEditor.CompletionList renders the suggestion list through a render prop that receives the current items and a loading flag. Use the loading flag to show a spinner while an async provider resolves.

1
<ExpressionEditor.CompletionPopover>
2
  <ExpressionEditor.CompletionList>
3
    {({ items, loading }) =>
4
      loading ? (
5
        <Spinner />
6
      ) : (
7
        items.map((item, index) => (
8
          <ExpressionEditor.CompletionListItem key={item.id} item={item} index={index}>
9
            {item.label}
10
          </ExpressionEditor.CompletionListItem>
11
        ))
12
      )
13
    }
14
  </ExpressionEditor.CompletionList>
15
</ExpressionEditor.CompletionPopover>

Completion List Item

ExpressionEditor.CompletionListItem renders a single suggestion. It handles mousedown selection and manages the aria-selected attribute for the currently highlighted item. Target the selected state with [aria-selected="true"] or aria-selected in Tailwind.

1
<ExpressionEditor.CompletionListItem key={item.id} item={item} index={index} className="px-3 py-1.5">
2
  {item.label}
3
</ExpressionEditor.CompletionListItem>

Completion System

Built-in Provider

The createCompletionProvider utility builds a completion provider from a context object, the same object you pass to evaluator.run. Pass the result to the completionProvider prop:

1
import { createCompletionProvider } from "@1771technologies/lytenyte-pro/expressions";
2

3
const context = {
4
  user: { firstName: "John", lastName: "Smith" },
5
  age: 23,
6
  fullName: () => context.user.firstName + " " + context.user.lastName,
7
};
8

9
const provider = createCompletionProvider(context);
10

11
<ExpressionEditor.Root completionProvider={provider} ... />

The provider inspects the token stream before the cursor to determine which suggestions to return:

Position	Completions Shown
Top level (empty, or after an operator)	All keys of the context object
After a complete value	Binary operators (`+`, `-`, `==`, `!=`, `&&`, `\|\|`, …)
`identifier.`	Properties of that identifier resolved through the context
`identifier.nested.`	Properties at the fully resolved path
`"string".`	Built-in `String` methods (`length`, `includes`, `slice`, …)
`[array].`	Built-in `Array` methods (`map`, `filter`, `reduce`, …)

Completion Triggers

Completions open automatically from specific triggers, or users can open them manually:

Dot: Typing . triggers property access completions.
Space: Typing a space after a complete value triggers completions, which is useful for discovering available binary operators.
Manual: Pressing Ctrl+Space opens completions at the current cursor position

Once the list opens, it filters results in real time using a prefix match on item.label. Completions close when a user accepts a suggestion, presses Escape, or moves focus away from the editor.

Custom Provider

Implement the CompletionProvider signature directly when you need suggestions that createCompletionProvider does not cover:

1
import type { CompletionItem } from "@1771technologies/lytenyte-pro/expressions";
2
import type { Token } from "@1771technologies/lytenyte-pro/types";
3

4
const FIELDS: CompletionItem[] = [
5
  { label: "Revenue", kind: "number", id: "Revenue" },
6
  { label: "Region", kind: "string", id: "Region" },
7
  { label: "InStock", kind: "boolean", id: "InStock" },
8
];
9

10
function myProvider(tokens: Token[], cursorPosition: number): CompletionItem[] {
11
  const relevant = tokens.filter(
12
    (t) => t.end <= cursorPosition && t.type !== "EOF" && t.type !== "Whitespace",
13
  );
14

15
  let i = relevant.length - 1;
16
  if (relevant[i]?.type === "Identifier") i--;
17

18
  const prev = relevant[i];
19

20
  // After a dot, return nothing (our fields have no sub-properties)
21
  if (prev?.type === "Punctuation" && prev.value === ".") return [];
22

23
  return FIELDS;
24
}

The provider can also return a Promise<CompletionItem[]> for async lookups such as server-side field searches.

In the demo below, the custom provider surfaces domain fields and formula functions. Press Ctrl + Space to open completions.

Formula Editor

Expression

Result

75780number

Illustrative Examples

Context

Revenue84200

number

Quantity34

number

Region"West"

string

Product"Laptop Pro"

string

Discount0.1

number

InStocktrue

boolean

demo.tsx
components.tsx

1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/expression-editor.css";
4
import { Evaluator, ExpressionEditor, standardPlugins } from "@1771technologies/lytenyte-pro/expressions";
5
import type { CompletionItem, Token } from "@1771technologies/lytenyte-pro/expressions";
6
import { useCallback, useMemo, useState } from "react";
7
import { ContextRows, KindBadge, tw } from "./components.js";
8
import { TYPE_COLORS } from "../evaluate-standard-plugins/components.jsx";
9

10
const evaluator = new Evaluator(standardPlugins);
11

12
// A domain context representing a sales dataset row
13
const context = {
14
  Revenue: 84200,
15
  Quantity: 34,
16
  Region: "West",
17
  Product: "Laptop Pro",
18
  Discount: 0.1,
19
  InStock: true,
20
};
21

22
// Formula functions available to users
23
const FORMULA_FUNCTIONS: CompletionItem[] = [
24
  { label: "round", kind: "function", id: "round" },
25
  { label: "floor", kind: "function", id: "floor" },
26
  { label: "ceil", kind: "function", id: "ceil" },
27
  { label: "abs", kind: "function", id: "abs" },
28
  { label: "min", kind: "function", id: "min" },
29
  { label: "max", kind: "function", id: "max" },
30
];
31

32
const CONTEXT_FIELDS: CompletionItem[] = Object.entries(context).map(([key, val]) => ({
33
  label: key,
34
  kind: typeof val === "number" ? "number" : typeof val === "boolean" ? "boolean" : "string",
35
  id: key,
36
}));
37

38
// Custom completion provider: injects formula functions and context fields.
39
// Returns formula functions when the cursor is at a fresh expression start (no dot chain),
40
// and field properties when after a dot.
41
function customProvider(tokens: Token[], cursorPosition: number): CompletionItem[] {
42
  const relevant = tokens.filter(
43
    (t) => t.end <= cursorPosition && t.type !== "EOF" && t.type !== "Whitespace",
44
  );
45

46
  if (relevant.length === 0) return [...FORMULA_FUNCTIONS, ...CONTEXT_FIELDS];
47

48
  let i = relevant.length - 1;
49
  // Skip a partial identifier the user is typing
50
  if (relevant[i]?.type === "Identifier") i--;
51

52
  if (i < 0) return [...FORMULA_FUNCTIONS, ...CONTEXT_FIELDS];
53

54
  const prev = relevant[i];
55

56
  // After a dot → no completions (context fields are primitives with no useful sub-properties)
57
  if (prev.type === "Punctuation" && prev.value === ".") return [];
58

59
  // Any other position: top-level suggestions
60
  return [...FORMULA_FUNCTIONS, ...CONTEXT_FIELDS];
61
}
62

63
const formulaContext = {
64
  ...context,
65
  round: Math.round,
66
  floor: Math.floor,
67
  ceil: Math.ceil,
68
  abs: Math.abs,
69
  min: Math.min,
70
  max: Math.max,
71
};
72

73
const EXAMPLES = [
74
  "Revenue * (1 - Discount)",
75
  "round(Revenue / Quantity)",
76
  "Region == 'West' ? Revenue * 1.1 : Revenue",
77
  "InStock && Quantity > 20",
78
];
79

80
export default function CustomProvider() {
81
  const [value, setValue] = useState("Revenue * (1 - Discount)");
82

83
  const result = useMemo(() => {
84
    try {
85
      if (!value) return "";
86

87
      return evaluator.run(value, formulaContext);
88
    } catch (e) {
89
      return e instanceof Error ? e : new Error(String(e));
90
    }
91
  }, [value]);
92

93
  const tokenize = useCallback((s: string) => evaluator.tokensSafe(s, true), []);
94
  const isError = result instanceof Error;
95

96
  return (
97
    <div className="flex flex-col gap-5 p-5">
98
      <label className="flex flex-col gap-2">
99
        <div>
100
          <div className="text-ln-text-dark text-sm font-semibold">Expression</div>
101
        </div>
102

103
        <div data-ln-input="true" className="h-8 rounded-xl text-base">
104
          <ExpressionEditor.Root
105
            value={value}
106
            onChange={setValue}
107
            tokenize={tokenize}
108
            completionProvider={customProvider}
109
          >
110
            <ExpressionEditor.CompletionPopover className="border-ln-border bg-ln-bg-popover shadow-ln-shadow-400 overflow-hidden rounded-lg border py-1">
111
              <ExpressionEditor.CompletionList className="flex min-w-48 flex-col">
112
                {({ items }) =>
113
                  items.map((item, index) => (
114
                    <ExpressionEditor.CompletionListItem
115
                      key={item.id}
116
                      item={item}
117
                      index={index}
118
                      className="text-ln-text-dark hover:bg-ln-bg-strong aria-selected:bg-ln-primary-10 aria-selected:text-ln-primary-70 flex cursor-pointer select-none items-center gap-2.5 px-3 py-1.5 outline-none"
119
                    >
120
                      <KindBadge kind={item.kind} />
121
                      <span className="min-w-0 flex-1 truncate font-mono text-sm">{item.label}</span>
122
                      <span className="text-ln-text-xlight shrink-0 font-sans text-[10px]">{item.kind}</span>
123
                    </ExpressionEditor.CompletionListItem>
124
                  ))
125
                }
126
              </ExpressionEditor.CompletionList>
127
            </ExpressionEditor.CompletionPopover>
128
          </ExpressionEditor.Root>
129
        </div>
130
      </label>
131

132
      <div className="flex flex-col gap-2">
133
        <div className="text-ln-text-light text-xs font-medium">Result</div>
134
        <div
135
          className={`flex h-10 items-center gap-3 rounded-xl border px-4 py-3 font-mono text-sm ${
136
            isError
137
              ? "border-ln-red-30 bg-ln-red-10 text-ln-red-70"
138
              : "border-ln-border bg-ln-bg-light text-ln-text-dark"
139
          }`}
140
        >
141
          <span className="min-w-0 flex-1 truncate">{isError ? result.message : String(result)}</span>
142
          <span
143
            className={tw(
144
              "shrink-0 rounded-full px-2 py-0.5 font-sans text-[10px] font-medium",
145
              !isError && TYPE_COLORS[typeof result],
146
              isError && "bg-ln-red-30 text-ln-red-90",
147
            )}
148
          >
149
            {isError ? "error" : typeof result}
150
          </span>
151
        </div>
152
      </div>
153

154
      <div className="flex flex-col gap-2">
155
        <div className="text-ln-text-light text-xs font-medium">Illustrative Examples</div>
156
        <div className="flex flex-wrap gap-2">
157
          {EXAMPLES.map((expr) => (
158
            <button
159
              key={expr}
160
              type="button"
161
              onClick={() => setValue(expr)}
162
              className="border-ln-border bg-ln-bg text-ln-text-dark hover:border-ln-primary-50 hover:bg-ln-primary-10 hover:text-ln-primary-50 cursor-pointer rounded-full border px-3 py-1 font-mono text-xs transition-colors"
163
            >
164
              {expr}
165
            </button>
166
          ))}
167
        </div>
168
      </div>
169

170
      {/* Context */}
171
      <div className="flex flex-col gap-2">
172
        <div className="text-ln-text-light text-xs font-medium">Context</div>
173
        <div className="border-ln-border bg-ln-bg-light divide-ln-border divide-y overflow-hidden rounded-lg border">
174
          <ContextRows obj={context as Record<string, unknown>} />
175
        </div>
176
      </div>
177
    </div>
178
  );
179
}

1
import { clsx, type ClassValue } from "clsx";
2
import { Fragment } from "react";
3
import { twMerge } from "tailwind-merge";
4

5
const KIND_CONFIG: Record<string, { icon: string; bg: string; text: string }> = {
6
  function: { icon: "ph--function", bg: "bg-ln-primary-10", text: "text-ln-primary-50" },
7
  string: { icon: "ph--quotes", bg: "bg-ln-green-10", text: "text-ln-green-50" },
8
  number: { icon: "ph--hash", bg: "bg-ln-info-10", text: "text-ln-info-50" },
9
  boolean: { icon: "ph--toggle-left", bg: "bg-ln-yellow-10", text: "text-ln-yellow-50" },
10
  object: { icon: "ph--cube", bg: "bg-ln-bg-strong", text: "text-ln-text" },
11
  array: { icon: "ph--brackets-square", bg: "bg-ln-yellow-10", text: "text-ln-yellow-50" },
12
};
13

14
export function KindBadge({ kind }: { kind: string }) {
15
  const cfg = KIND_CONFIG[kind] ?? {
16
    icon: "ph--question",
17
    bg: "bg-ln-bg-strong",
18
    text: "text-ln-text-light",
19
  };
20
  return (
21
    <span className={`flex size-5 shrink-0 items-center justify-center rounded ${cfg.bg} ${cfg.text}`}>
22
      <span className={`iconify ${cfg.icon} size-3.5`} />
23
    </span>
24
  );
25
}
26

27
const TYPE_COLORS: Record<string, string> = {
28
  string: "bg-ln-green-10 text-ln-green-70",
29
  number: "bg-ln-info-10 text-ln-info-70",
30
  boolean: "bg-ln-yellow-10 text-ln-yellow-70",
31
  fn: "bg-ln-primary-10 text-ln-primary-70",
32
  object: "bg-ln-bg-strong text-ln-text",
33
};
34

35
function typeTag(val: unknown): string {
36
  if (typeof val === "function") return "fn";
37
  if (Array.isArray(val)) return "array";
38
  if (val === null) return "null";
39
  return typeof val;
40
}
41

42
function ContextRow({ name, value, depth = 0 }: { name: string; value: unknown; depth?: number }) {
43
  const type = typeTag(value);
44
  const isObj = type === "object";
45
  const colorClass = TYPE_COLORS[type] ?? "bg-ln-bg-strong text-ln-text";
46

47
  let displayVal: string | null = null;
48
  if (type === "fn") displayVal = "() => …";
49
  else if (!isObj) displayVal = typeof value === "string" ? `"${value}"` : String(value);
50

51
  return (
52
    <div
53
      className="grid grid-cols-[1fr_auto] items-center gap-3 py-2 pr-3"
54
      style={{ paddingLeft: `${12 + depth * 16}px` }}
55
    >
56
      <div className="flex min-w-0 items-baseline gap-2">
57
        {depth > 0 && <span className="text-ln-border-strong shrink-0 select-none font-mono text-xs">↳</span>}
58
        <span className="text-ln-text-dark shrink-0 font-mono text-xs font-semibold">{name}</span>
59
        {displayVal !== null && (
60
          <span className="text-ln-text-light min-w-0 truncate font-mono text-xs">{displayVal}</span>
61
        )}
62
      </div>
63
      <span className={`shrink-0 rounded-full px-2 py-0.5 font-sans text-[10px] font-medium ${colorClass}`}>
64
        {type}
65
      </span>
66
    </div>
67
  );
68
}
69

70
export function ContextRows({ obj, depth = 0 }: { obj: Record<string, unknown>; depth?: number }) {
71
  return (
72
    <>
73
      {Object.entries(obj).map(([key, val]) => {
74
        const isObj = typeTag(val) === "object" && val !== null;
75
        return (
76
          <Fragment key={key}>
77
            <ContextRow name={key} value={val} depth={depth} />
78
            {isObj && <ContextRows obj={val as Record<string, unknown>} depth={depth + 1} />}
79
          </Fragment>
80
        );
81
      })}
82
    </>
83
  );
84
}
85

86
export function tw(...c: ClassValue[]) {
87
  return twMerge(clsx(...c));
88
}

Syntax Highlighting

The default highlighter maps each token type to a CSS variable. Override the highlight prop to replace the highlighter entirely:

1
import type { Token } from "@1771technologies/lytenyte-pro/types";
2

3
function MyHighlighter({ token }: { token: Token }) {
4
  if (token.type === "Number")
5
    return <span style={{ color: "cornflowerblue" }}>{token.value}</span>;
6
  if (token.type === "String")
7
    return <span style={{ color: "mediumseagreen" }}>{token.value}</span>;
8
  if (token.type === "ExpressionError")
9
    return <span style={{ textDecoration: "wavy underline red" }}>{token.value}</span>;
10
  return <span>{token.value}</span>;
11
}
12

13
<ExpressionEditor.Root tokenize={tokenize} highlight={MyHighlighter} ... />

To restyle without replacing the highlighter, override the CSS custom properties in your theme:

Variable	Token Types
`--ln-expr-number`	`Number`
`--ln-expr-string`	`String`, `TemplateLiteral`
`--ln-expr-operator`	`Operator`, `Punctuation`, `Spread`, `Pipe`, `Arrow`
`--ln-expr-identifier`	`Identifier`
`--ln-expr-error`	`ExpressionError`
`--ln-expr-punctuation`	`Unparsed`

Styling

Import the stylesheet once before rendering ExpressionEditor:

1
import "@1771technologies/lytenyte-pro/expression-editor.css";

Keyboard Reference

Key	Completion open	Completion closed
`↑` / `↓`	Navigate the list	-
`Enter` or `Tab`	Accept selected suggestion	-
`Escape`	Dismiss completions	-
`Ctrl+Space` / `⌘+Space`	-	Open completions manually

Expressions Overview: Learn how to build domain-specific expressions.
Expression Filters: Define complex logical conditions to filter grid rows.
Expression Plugins: Extend expression capabilities with custom plugins.

Expression Editor

Note

Complete Expression Editor

Expression Editor Anatomy

Minimal Editor Setup

Basic Expression Editor

Expression Editor Parts

Editor Root

Completion Popover

Completion List

Completion List Item

Completion System

Built-in Provider

Completion Triggers

Custom Provider

Formula Editor

Syntax Highlighting

Styling

Keyboard Reference

Expression Editor Properties

ExpressionEditor.Root

ExpressionEditor.CompletionList

ExpressionEditor.CompletionListItem

Next Steps

On this page