Preview Panel Guide

📄 AionUi Preview Panel Guide

This guide explains how to use AionUi's comprehensive preview panel system, which supports 10+ file formats with real-time editing capabilities.

English | 简体中文

🎯 What is the Preview Panel?

The Preview Panel is AionUi's file preview and editing system, supporting viewing and editing of multiple file formats. It provides instant preview of AI-generated results, real-time editing capabilities, and multi-tab management - all without switching applications.

Key Features

• ✅ View Results Instantly - After AI generates files, view preview immediately without switching apps
• ✅ Real-time Tracking + Editable - Automatically tracks file changes, editor and preview sync intelligently
• ✅ Multi-Tab Support - Open multiple files simultaneously, each in its own tab with smart tab management
• ✅ Version History - View and restore historical versions of files (Git-based)

---

📋 Supported Formats

Document Formats

PDF (.pdf)

• Full PDF document viewing
• Page navigation
• Zoom controls
• Text selection (where applicable)

Word Documents

• .doc, .docx, .odt formats
• Document structure viewing
• Content preview
• Formatting display

Excel Spreadsheets

• .xls, .xlsx, .ods, .csv formats
• Spreadsheet viewing
• Data display
• Formula viewing

PowerPoint Presentations

• .ppt, .pptx, .odp formats
• Slide preview
• Presentation structure
• Content display

---

Code Formats

Supports 30+ programming languages with syntax highlighting:

• JavaScript (.js, .jsx)
• TypeScript (.ts, .tsx)
• Python (.py)
• Java (.java)
• Go (.go)
• Rust (.rs)
• C/C++ (.c, .cpp, .h)
• CSS (.css)
• JSON (.json)
• XML (.xml)
• YAML (.yaml, .yml)
• Shell Scripts (.sh, .bash)
• And many more...

Features:

• Syntax highlighting
• Code formatting
• Line numbers
• Code folding

---

Markup Formats

Markdown (.md, .markdown)

• Full Markdown rendering
• Live preview
• Split-screen editing
• WYSIWYG editing support

HTML (.html, .htm)

• HTML rendering
• Real-time preview
• Source editing
• Visual editing

---

Image Formats

Supports multiple image formats:

• PNG (.png)
• JPG/JPEG (.jpg, .jpeg)
• GIF (.gif)
• SVG (.svg)
• WebP (.webp)
• BMP (.bmp)
• ICO (.ico)
• TIFF (.tiff)
• AVIF (.avif)

Features:

• Image viewing
• Zoom controls
• Full-screen mode
• Image information

---

Other Formats

Diff Files (.diff, .patch)

• Diff comparison viewing
• Change highlighting
• Line-by-line comparison
• Color-coded changes

---

🚀 Using the Preview Panel

Opening Files

Files are automatically opened in the preview panel when:

1. AI generates files - Automatically previewed after generation
2. You click on files - Click any file in the workspace or conversation
3. Files are referenced - Files mentioned in conversations can be opened

Multi-Tab Management

• Open Multiple Files - Each file opens in its own tab
• Smart Tab Reuse - Same file won't be opened multiple times
• Tab Overflow - Automatically shows fade effect and scroll support
• Context Menu - Right-click tabs for:
  • Close current tab
  • Close other tabs
  • Close all tabs

Keyboard Shortcuts

• Cmd/Ctrl + S - Save current file
• Cmd/Ctrl + W - Close current tab
• Cmd/Ctrl + K, Cmd/Ctrl + W - Close all tabs
• Cmd/Ctrl + Tab - Switch between tabs

---

✏️ Editing Capabilities

Markdown Editor

Features:

• Live preview mode
• Split-screen mode (editor + preview)
• WYSIWYG editing
• Markdown syntax support
• Real-time synchronization

Usage:

1. Open a Markdown file
2. Edit in the editor panel
3. See live preview update
4. Use split-screen for side-by-side editing

Code Editor

Features:

• Monaco Editor integration
• Syntax highlighting
• Code completion
• Error detection
• Multi-cursor editing

Usage:

1. Open a code file
2. Edit directly in the editor
3. Save with Cmd/Ctrl + S
4. Changes are tracked automatically

HTML Editor

Features:

• Real-time HTML editing
• Visual preview
• Source code editing
• Live updates

Usage:

1. Open an HTML file
2. Edit HTML source
3. See real-time preview
4. Save changes

---

🔄 Real-time Features

Automatic File Tracking

The preview panel automatically tracks file changes:

• Auto-refresh - Updates when files are modified
• Debounce optimization - Prevents excessive updates
• Change detection - Highlights unsaved changes
• Sync with workspace - Stays in sync with file system

Version History

View and restore historical versions:

1. Git Integration - Uses Git for version tracking
2. View History - See all previous versions
3. Restore Versions - Restore any previous version
4. Compare Versions - Compare different versions

Accessing Version History:

• Right-click on file in preview
• Select "View History"
• Browse through versions
• Restore desired version

---

💡 Best Practices

File Organization

• Use Workspace - Associate workspace for better file management
• Keep Files Organized - Organize files in logical folders
• Use Descriptive Names - Name files clearly for easy identification

Editing Workflow

1. Preview First - Always preview before editing
2. Save Regularly - Use Cmd/Ctrl + S frequently
3. Check Changes - Review changes before saving
4. Use Version History - Leverage version history for safety

Performance Tips

• Close Unused Tabs - Close tabs you're not using
• Limit Open Files - Don't open too many files simultaneously
• Use Split-Screen Wisely - Use split-screen only when needed

---

🛠️ Advanced Features

Split-Screen Preview

For Markdown and HTML files:

1. Open file in preview
2. Enable split-screen mode
3. Edit on one side, preview on the other
4. Scroll synchronization

Dirty Detection

• Unsaved Changes - Shows indicator for unsaved changes
• Save Prompt - Prompts before closing unsaved files
• Auto-save - Optional auto-save feature

File Operations

• Save - Cmd/Ctrl + S
• Close - Cmd/Ctrl + W
• Reopen - Reopen recently closed files
• Reload - Reload file from disk

---

⚠️ Important Notes

File Limitations

• Workspace Files - Best experience with workspace-associated files
• Large Files - Very large files may take time to load
• Binary Files - Some binary formats have limited preview

Editing Considerations

• Save Changes - Always save before closing
• Version Control - Changes are tracked via Git
• Backup - Important files should be backed up

---

🔗 Related Resources

• 📁 File Management - File organization use cases
• 🤖 AI Assistants Guide - Using assistants with preview
• ❓ FAQ - Common questions and troubleshooting

---

Need Help?

• 🐛 Report Issues
• 💬 Community Discussions
• 📖 Complete Documentation

Preview and edit files seamlessly without leaving AionUi! 📄