0
# Core Rendering
1

2
Primary rendering functions that convert TeX expressions to DOM elements or HTML strings with comprehensive error handling and configuration options.
3

4
## Capabilities
5

6
### Render to DOM
7

8
Renders TeX expression directly into a DOM element, replacing its content.
9

10
```typescript { .api }
11
/**
12
 * Renders TeX expression into a DOM element
13
 * @param tex - TeX expression to render
14
 * @param element - DOM element to render into (content will be replaced)
15
 * @param options - Rendering options
16
 */
17
function render(tex: string, element: HTMLElement, options?: KatexOptions): void;
18
```
19

20
**Usage Examples:**
21

22
```typescript
23
import katex from "katex";
24

25
// Basic rendering
26
const element = document.getElementById("math-container");
27
katex.render("x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}", element);
28

29
// With options
30
katex.render("\\int_0^\\infty e^{-x^2} dx", element, {
31
  displayMode: true,
32
  fleqn: true
33
});
34

35
// Error handling
36
katex.render("\\invalid", element, {
37
  throwOnError: false,
38
  errorColor: "#ff6b6b"
39
});
40
```
41

42
### Render to String
43

44
Converts TeX expression to HTML string for server-side rendering or programmatic use.
45

46
```typescript { .api }
47
/**
48
 * Renders TeX expression to HTML string
49
 * @param tex - TeX expression to render
50
 * @param options - Rendering options
51
 * @returns HTML string containing rendered math
52
 */
53
function renderToString(tex: string, options?: KatexOptions): string;
54
```
55

56
**Usage Examples:**
57

58
```typescript
59
import katex from "katex";
60

61
// Basic string rendering
62
const html = katex.renderToString("E = mc^2");
63

64
// Display mode
65
const displayHtml = katex.renderToString("\\sum_{i=1}^n i^2", {
66
  displayMode: true
67
});
68

69
// MathML output
70
const mathml = katex.renderToString("\\frac{1}{2}", {
71
  output: "mathml"
72
});
73

74
// Server-side rendering with error handling
75
const safeHtml = katex.renderToString("\\maybe\\invalid", {
76
  throwOnError: false,
77
  errorColor: "#cc0000"
78
});
79
```
80

81
### Parse Error Handling
82

83
KaTeX throws ParseError exceptions for invalid TeX input when throwOnError is true.
84

85
```typescript { .api }
86
/**
87
 * Error thrown when TeX parsing fails
88
 */
89
class ParseError extends Error {
90
  /** Always "ParseError" */
91
  name: "ParseError";
92
  /** Character position where error occurred */
93
  position: number;
94
  /** Length of problematic input */
95
  length: number;
96
  /** Original error message without context */
97
  rawMessage: string;
98
  /** Full error message with TeX source context */
99
  message: string;
100
  
101
  constructor(message: string, token?: object);
102
}
103
```
104

105
**Usage Examples:**
106

107
```typescript
108
import katex, { ParseError } from "katex";
109

110
try {
111
  katex.render("\\invalid{command}", element);
112
} catch (error) {
113
  if (error instanceof ParseError) {
114
    console.log(`Parse error at position ${error.position}: ${error.rawMessage}`);
115
    // Show fallback content
116
    element.textContent = "Math rendering failed";
117
  }
118
}
119

120
// Alternative: disable throwing
121
const result = katex.renderToString("\\invalid{command}", {
122
  throwOnError: false,
123
  errorColor: "#ff0000"
124
});
125
// Returns HTML with error styling instead of throwing
126
```
127

128
### Version Information
129

130
```typescript { .api }
131
/**
132
 * Current KaTeX version string
133
 */
134
const version: string;
135
```
136

137
**Usage Example:**
138

139
```typescript
140
import katex from "katex";
141

142
console.log(`Using KaTeX version: ${katex.version}`);
143
```