0
# Preview Mode
1

2
Read-only preview mode designed for handling large JSON documents up to 500 MiB with optimized performance, transformation capabilities, and minimal memory usage.
3

4
## Capabilities
5

6
### Large Document Handling
7

8
Preview mode is specifically designed to handle very large JSON documents that would be impractical in other modes.
9

10
```javascript { .api }
11
// Preview mode configuration for large documents
12
const previewOptions = {
13
  mode: "preview",
14
  enableTransform: true,    // Enable JMESPath transformations
15
  enableSort: false,        // Disable sorting for performance
16
  search: false,           // Search disabled for large documents
17
  mainMenuBar: true,       // Show format/transform controls
18
  statusBar: true          // Show document size and statistics
19
};
20
```
21

22
**Features:**
23
- **Memory Efficient**: Optimized rendering for documents up to 500 MiB
24
- **Read-Only**: No editing capabilities to maintain performance
25
- **Transform Support**: JMESPath queries and data filtering
26
- **Format/Compact**: JSON formatting and compacting
27
- **Repair**: Automatic JSON repair functionality
28

29
### Execute with Busy Message
30

31
Execute operations with user feedback for long-running tasks on large datasets.
32

33
```javascript { .api }
34
/**
35
 * Execute a function with a busy message for long operations
36
 * @param fn - Function to execute
37
 * @param message - Message to show during execution
38
 * @returns Promise resolving to function result
39
 */
40
executeWithBusyMessage(fn: () => any, message: string): Promise<any>;
41
```
42

43
**Usage Example:**
44

45
```javascript
46
// Execute expensive operation with user feedback
47
const result = await editor.executeWithBusyMessage(
48
  () => {
49
    // Perform expensive transformation
50
    const largeData = editor.get();
51
    return processLargeDataset(largeData);
52
  },
53
  "Processing large dataset..."
54
);
55

56
// Transform large JSON with progress indication
57
await editor.executeWithBusyMessage(
58
  () => editor.setText(transformedJsonString),
59
  "Applying transformation to large document..."
60
);
61
```
62

63
### Format Large JSON
64

65
Format large JSON documents with progress indication for better user experience.
66

67
```javascript { .api }
68
/**
69
 * Format JSON text with progress indication for large documents
70
 * Inherited from text mode functionality
71
 */
72
format(): void;
73
```
74

75
**Usage Example:**
76

77
```javascript
78
// Format large JSON - automatically shows progress for large documents
79
editor.format();
80

81
// For very large documents, this may trigger executeWithBusyMessage internally
82
```
83

84
### Compact Large JSON
85

86
Remove whitespace from large JSON documents efficiently.
87

88
```javascript { .api }
89
/**
90
 * Compact JSON text by removing whitespace
91
 * Optimized for large documents
92
 */
93
compact(): void;
94
```
95

96
**Usage Example:**
97

98
```javascript
99
// Compact large JSON document
100
editor.compact();
101

102
// This operation is optimized for large documents
103
// and may show progress indication
104
```
105

106
### Repair Large JSON
107

108
Attempt to repair invalid JSON in large documents.
109

110
```javascript { .api }
111
/**
112
 * Repair invalid JSON syntax in large documents
113
 * Uses progressive parsing for better performance
114
 */
115
repair(): void;
116
```
117

118
**Usage Example:**
119

120
```javascript
121
// Repair large invalid JSON document
122
editor.repair();
123

124
// The repair process is optimized for large files
125
// and shows progress for operations taking longer than expected
126
```
127

128
## Preview Mode Features
129

130
### Document Statistics
131

132
Preview mode shows comprehensive document statistics in the status bar:
133

134
```javascript
135
// Information displayed in preview mode:
136
// - Document size (bytes, KB, MB)
137
// - JSON structure overview (objects, arrays, primitives)
138
// - Parse time and render time
139
// - Memory usage statistics
140
```
141

142
### Performance Optimizations
143

144
Preview mode includes several optimizations for large documents:
145

146
**Lazy Loading:**
147
- Content is rendered progressively as needed
148
- Only visible portions are fully processed
149
- Off-screen content uses lightweight placeholders
150

151
**Memory Management:**
152
- Efficient memory usage for large datasets
153
- Garbage collection optimizations
154
- Memory usage monitoring and warnings
155

156
**Progressive Operations:**
157
- Long operations are broken into chunks
158
- User interface remains responsive during processing
159
- Progress indication for operations > 100ms
160

161
### Transform Large Datasets
162

163
Apply JMESPath transformations to large JSON documents efficiently.
164

165
```javascript { .api }
166
// Transform configuration for large documents
167
const transformOptions = {
168
  mode: "preview",
169
  enableTransform: true,
170
  
171
  // Custom query functions optimized for large data
172
  executeQuery: (json, query) => {
173
    // Custom implementation with progress tracking
174
    return executeQueryWithProgress(json, query);
175
  },
176
  
177
  queryDescription: "JMESPath transformations optimized for large datasets"
178
};
179
```
180

181
**Usage Example:**
182

183
```javascript
184
// Transform large dataset with progress indication
185
const largeDataEditor = new JSONEditor(container, {
186
  mode: "preview",
187
  enableTransform: true
188
});
189

190
// Load large JSON
191
largeDataEditor.setText(largeJsonString);
192

193
// Transformations automatically use busy messages for large operations
194
// User can filter, sort, and project data through the Transform modal
195
```
196

197
## Preview Mode Limitations
198

199
### Read-Only Nature
200
- **No Editing**: Values, keys, and structure cannot be modified
201
- **No Undo/Redo**: History functionality is disabled
202
- **No Schema Validation**: Validation is disabled for performance
203

204
### Feature Restrictions
205
- **No Search**: Text search is disabled for performance reasons
206
- **Limited Selection**: Node selection is not available
207
- **No Context Menus**: Right-click menus are disabled
208

209
### Performance Considerations
210
- **Memory Usage**: Very large documents (>100MB) may still impact browser performance
211
- **Transform Complexity**: Complex JMESPath queries on large datasets may be slow
212
- **Browser Limits**: Ultimate size limits depend on browser memory capabilities
213

214
## Preview Mode Configuration
215

216
### Basic Configuration
217

218
```javascript
219
const previewConfig = {
220
  mode: "preview",
221
  
222
  // Enable/disable transform features
223
  enableTransform: true,
224
  enableSort: false,
225
  
226
  // UI components
227
  mainMenuBar: true,    // Show Transform/Format buttons
228
  statusBar: true,      // Show document statistics
229
  navigationBar: false, // Navigation disabled in preview
230
  
231
  // Text formatting
232
  indentation: 2,       // Spaces for formatting
233
  escapeUnicode: false  // Unicode display
234
};
235
```
236

237
### Large Document Optimization
238

239
```javascript
240
const largeDocConfig = {
241
  mode: "preview",
242
  
243
  // Optimize for large documents
244
  enableTransform: true,  // Keep transforms enabled
245
  enableSort: false,      // Disable sorting for performance
246
  search: false,         // Disable search
247
  
248
  // Custom progress handling
249
  onError: (error) => {
250
    if (error.message.includes('memory')) {
251
      showMemoryWarning();
252
    }
253
  }
254
};
255
```
256

257
### Memory Monitoring
258

259
```javascript
260
// Monitor memory usage in preview mode
261
const previewEditor = new JSONEditor(container, {
262
  mode: "preview",
263
  
264
  // Handle memory warnings
265
  onError: (error) => {
266
    if (error.name === 'MemoryWarning') {
267
      console.warn('Large document detected:', error.message);
268
      showPerformanceWarning();
269
    }
270
  }
271
});
272

273
// Check document size before loading
274
function loadLargeDocument(jsonString) {
275
  const sizeInMB = new Blob([jsonString]).size / (1024 * 1024);
276
  
277
  if (sizeInMB > 100) {
278
    console.warn(`Loading ${sizeInMB.toFixed(1)}MB document`);
279
    
280
    // Use preview mode for large documents
281
    previewEditor.setText(jsonString);
282
  }
283
}
284
```
285

286
## Best Practices for Preview Mode
287

288
### When to Use Preview Mode
289

290
```javascript
291
// Use preview mode when:
292
// 1. Document size > 10MB
293
// 2. Read-only access is sufficient
294
// 3. Transform/filter operations are needed
295
// 4. Memory usage is a concern
296

297
function chooseMode(jsonString) {
298
  const size = new Blob([jsonString]).size;
299
  const sizeMB = size / (1024 * 1024);
300
  
301
  if (sizeMB > 10) {
302
    return "preview"; // Large documents
303
  } else if (sizeMB > 1) {
304
    return "code";    // Medium documents
305
  } else {
306
    return "tree";    // Small documents
307
  }
308
}
309
```
310

311
### Performance Tips
312

313
```javascript
314
// 1. Minimize transformations on very large datasets
315
// 2. Use specific JMESPath queries rather than broad selections
316
// 3. Consider pre-processing large documents server-side
317
// 4. Monitor memory usage in browser dev tools
318

319
// Good: Specific query
320
const specificQuery = "users[?age > 25].{name: name, email: email}";
321

322
// Avoid: Broad query on large dataset
323
const broadQuery = "users[]"; // Returns entire large array
324
```