Skip to main content
The VisualizationState type is a discriminated union of all supported visualization kinds.

​
VisualizationState

Union type: 
type VisualizationState =
  | CodeState
  | DataState
  | DiagramState
  | MathState
  | ChartState
  | PreviewState;

​
CodeState

Source code with syntax highlighting, focus ranges, and annotations.
​
kind
'code'
required
​
name
string
required
Unique identifier for this code block
​
lang
string
required
Language identifier (e.g., 'typescript', 'python')
​
fileName
string
required
Displayed filename
​
content
string
required
Source code
​
focus
readonly FocusRange[]
required
Line ranges to highlight
​
annotations
readonly CodeAnnotation[]
required
Line annotations
​
regions
readonly RegionDef[]
required
Named sub-regions for triggers

​
FocusRange

​
start
number
required
Starting line number (1-based)
​
end
number
required
Ending line number (inclusive)

​
CodeAnnotation

​
line
number
required
Line number to annotate
​
text
string
required
Annotation text

​
DataState

Data structure visualizations (arrays, trees, graphs, etc.).
​
kind
'data'
required
​
name
string
required
​
data
ArrayData | LinkedListData | TreeData | ...
required
Data structure definition. See below for supported types.
​
regions
readonly RegionDef[]
required

​
Supported Data Structures

  • ArrayData: Linear array with pointers
  • LinkedListData: Singly linked list with nodes and edges
  • DoublyLinkedListData: Doubly linked list
  • TreeData: N-ary tree (supports BST, AVL, red-black, heap, etc.)
  • BTreeData: B-tree variants (B-tree, B+ tree, 2-3 tree, 2-3-4 tree)
  • TrieData: Trie variants (trie, radix tree, suffix tree)
  • SkipListData: Skip list with levels
  • StackData: Stack with top pointer
  • QueueData: Queue with front/rear pointers
  • DequeData: Double-ended queue
  • RingBufferData: Circular buffer
  • HashMapData: Hash table with chaining
  • GraphData: Directed or undirected graph
  • MatrixData: 2D matrix with labels
  • UnionFindData: Disjoint set (union-find)
  • LsmTreeData: Log-structured merge tree
  • FibonacciHeapData: Fibonacci heap
  • BitArrayData: Bit arrays (Bloom filter, cuckoo filter, count-min sketch, HyperLogLog)

​
ArrayData Example

​
type
'array'
required
​
values
readonly string[]
required
Array elements
​
pointers
readonly DataPointerDef[]
required
Named pointers to array indices

​
TreeData Example

​
type
'tree'
required
​
variant
TreeVariant
required
One of: 'generic' | 'bst' | 'avl' | 'red-black' | 'heap-min' | 'heap-max' | 'splay' | 'treap' | 'aa' | 'segment' | 'interval' | 'fenwick' | 'merkle' | 'kd' | 'rope'
​
nodes
readonly TreeNodeDef[]
required
​
rootId
string
required
​
pointers
readonly DataPointerDef[]
required

​
TreeNodeDef

​
id
string
required
Unique node identifier
​
value
string
required
Node value
​
children
readonly string[]
required
Child node IDs
​
annotation
string
required
Node annotation (e.g., balance factor, color)

​
GraphData Example

​
type
'graph'
required
​
nodes
readonly DataNodeDef[]
required
​
edges
readonly GraphEdgeDef[]
required
​
pointers
readonly DataPointerDef[]
required
​
directed
boolean
required
​
layout
GraphLayoutKind
required
One of: 'ring' | 'force' | 'tree' | 'grid' | 'bipartite'

​
DataPointerDef

​
name
string
required
Pointer label
​
targetId
string
required
Target node/element ID

​
DiagramState

System architecture diagrams.
​
kind
'diagram'
required
​
name
string
required
​
nodes
readonly DiagramNodeDef[]
required
​
edges
readonly DiagramEdgeDef[]
required
​
groups
readonly DiagramGroupDef[]
required
​
regions
readonly RegionDef[]
required

​
DiagramNodeDef

​
id
string
required
​
label
string
required
​
nodeType
DiagramNodeType
required
One of: 'client' | 'service' | 'database' | 'cache' | 'queue' | 'load-balancer' | 'api-gateway' | 'message-queue' | 'user' | 'server'
​
icon
string | undefined
Optional icon identifier

​
DiagramEdgeDef

​
fromId
string
required
​
toId
string
required
​
label
string
required

​
MathState

Mathematical expressions rendered via LaTeX.
​
kind
'math'
required
​
name
string
required
​
expressions
readonly MathExpression[]
required
​
regions
readonly RegionDef[]
required

​
MathExpression

​
id
string
required
​
latex
string
required
LaTeX markup

​
ChartState

Data visualizations (bar, line, scatter, etc.).
​
kind
'chart'
required
​
name
string
required
​
chartKind
ChartKind
required
One of: 'bar' | 'line' | 'scatter' | 'area' | 'pie' | 'radar' | 'radial'
​
series
readonly ChartSeries[]
required
​
annotations
readonly ChartAnnotation[]
required
​
shadedRegions
readonly ShadedRegion[]
required
​
regions
readonly RegionDef[]
required

​
ChartSeries

​
name
string
required
Series label
​
data
readonly ChartDataPoint[]
required

​
ChartDataPoint

​
label
string
required
​
value
number
required

​
PreviewState

Live HTML/React preview.
​
kind
'preview'
required
​
name
string
required
​
source
string
required
HTML or JSX source code
​
template
PreviewTemplate
required
One of: 'html' | 'react'
​
regions
readonly RegionDef[]
required

​
RegionDef

Named sub-element for trigger targeting.
​
name
string
required
Region identifier
​
target
string
required
CSS selector or element identifier

Build docs developers (and LLMs) love

Get started for freeTalk to us