Skip to content

skfrost19/Docx-Viewer

Repository files navigation

Enhanced Docx/ODT Viewer for VS Code

Docx Viewer

Installs Visual Studio Marketplace Version Rating LICENSE GitHub Release Open Issues Closed Issues

A modern, feature-rich document viewer for Microsoft Word (.docx) and OpenDocument Text (.odt) files in Visual Studio Code.

✨ Features

πŸ“„ Document Support

  • Microsoft Word Documents (.docx) - Full support with proper formatting
  • OpenDocument Text (.odt) - Complete compatibility with LibreOffice/OpenOffice documents

🎨 Modern UI & Experience

  • VS Code Theme Integration - Automatically adapts to your VS Code theme (dark/light/high contrast)
  • Document Outline - Navigate through headings with an interactive sidebar
  • Search Functionality - Find text within documents with highlighting
  • Zoom Controls - Zoom in/out with keyboard shortcuts or toolbar buttons
  • Print Support - Print documents directly from the viewer

πŸ”§ Enhanced Functionality

  • Responsive Design - Adapts to different panel sizes
  • Keyboard Shortcuts - Full keyboard navigation support
  • Status Bar Integration - Shows current zoom level
  • Error Handling - Graceful error messages and loading states
  • Performance Optimized - Fast rendering with modern CSS techniques

⌨️ Keyboard Shortcuts

  • Ctrl+Plus / Cmd+Plus - Zoom In
  • Ctrl+Minus / Cmd+Minus - Zoom Out
  • Ctrl+0 / Cmd+0 - Reset Zoom
  • Ctrl+F / Cmd+F - Search in Document
  • Ctrl+P / Cmd+P - Print Document
  • Escape - Close Search Panel

πŸ› οΈ Toolbar Features

  • Zoom Controls - Precise zoom adjustment (50% to 300%)
  • Outline Toggle - Show/hide document structure
  • Search - Quick text search with navigation
  • Print - Direct printing capability

πŸš€ Installation

  1. Install from the VS Code Marketplace
  2. Open any .docx or .odt file
  3. The document will automatically open in the enhanced viewer

βš™οΈ Configuration

Access settings via Ctrl+Shift+P β†’ "Open Docx Reader Configuration" or go to File β†’ Preferences β†’ Settings and search for "Docx Reader".

Available Settings

Setting Description Default
docxreader.font Font family for document rendering Arial
docxreader.theme Theme preference (auto/light/dark) auto
docxreader.zoomLevel Default zoom level (0.5 - 3.0) 1.0
docxreader.showOutline Show document outline by default true

Example Configuration

{
    "docxreader.font": "Georgia",
    "docxreader.theme": "auto",
    "docxreader.zoomLevel": 1.2,
    "docxreader.showOutline": true
}

🎯 Usage

Opening Documents

  1. Right-click any .docx or .odt file β†’ "Open With" β†’ "Docx Reader"
  2. Double-click the file (if set as default viewer)
  3. Use Command Palette (Ctrl+Shift+P) β†’ "View: Reopen Editor With" β†’ "Docx Reader"

Navigation

  • Outline Panel: Click headings to jump to sections
  • Search: Use toolbar search or Ctrl+F to find text
  • Zoom: Use toolbar buttons or keyboard shortcuts

Document Structure

The viewer automatically extracts and displays:

  • Headings (H1-H6) in the outline
  • Formatted text with proper styling
  • Tables with borders and styling
  • Images with responsive sizing
  • Lists (numbered and bulleted)
  • Block quotes and code blocks

πŸ› οΈ Development

Building from Source

# Clone repository
git clone https://github.com/skfrost19/Docx-Viewer.git
cd Docx-Viewer

# Install dependencies  
npm install

# Compile TypeScript
npm run compile

# Run tests
npm test

# Launch development version
code --extensionDevelopmentPath=. --new-window

Technology Stack

  • TypeScript 5.8+ - Modern JavaScript with strong typing
  • VS Code API 1.90+ - Latest VS Code extension capabilities
  • Mammoth.js - DOCX to HTML conversion
  • ODT2HTML - ODT file processing
  • Modern CSS - Responsive design with CSS Grid/Flexbox

πŸ› Troubleshooting

Common Issues

Document not loading:

  • Ensure the file isn't corrupted
  • Try opening with another application first
  • Check file permissions

Styling issues:

  • Verify VS Code theme compatibility
  • Reset zoom to 100%
  • Check font settings in configuration

Performance problems:

  • Close other heavy extensions
  • Reduce zoom level for large documents
  • Enable hardware acceleration in VS Code

Getting Help

  1. Check existing Issues
  2. Create a new issue with:
    • VS Code version
    • Extension version
    • Sample document (if possible)
    • Error messages

πŸ“ Changelog

Version 1.2.0 (Latest)

  • ✨ New: Modern UI with VS Code theme integration
  • ✨ New: Document outline with navigation
  • ✨ New: In-document search functionality
  • ✨ New: Zoom controls (50% - 300%)
  • ✨ New: Print support
  • ✨ New: Keyboard shortcuts
  • ✨ New: Status bar integration
  • πŸ”§ Improved: Error handling and loading states
  • πŸ”§ Improved: Performance optimization
  • πŸ”§ Updated: Latest dependencies and security fixes
  • πŸ”§ Updated: TypeScript 5.8+ and ESLint 9+

Version 1.1.3 (Previous)

  • Basic DOCX and ODT viewing
  • Simple font configuration
  • Basic VS Code integration

🀝 Contributing

Contributions are welcome! Please read our Contributing Guidelines first.

Areas for Contribution

  • Additional file format support
  • UI/UX improvements
  • Performance optimizations
  • Documentation improvements
  • Bug fixes and testing

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • Mammoth.js for DOCX conversion
  • ODT2HTML for ODT processing
  • VS Code team for the excellent extension API
  • Contributors and users for feedback and suggestions

Made with ❀️ for the VS Code community