As developers, we often find ourselves wrestling with tools that are “almost perfect” but missing that one crucial feature. Azure DevOps Wiki is a prime example—it’s great for documentation, but the editing experience leaves much to be desired. That’s why I built a browser extension that transforms the Azure DevOps Wiki editor into something truly powerful.

The Problem: Wiki Editing Shouldn’t Be This Hard

If you’ve ever tried to create rich documentation in Azure DevOps Wiki, you know the pain:

• Limited markdown editing capabilities
• No live preview changes tracking while typing
• No Export to PDF features

After countless frustrating editing sessions, I decided to solve this once and for all.

Enter the Azure DevOps Wiki TOAST UI Extension

I’ve created a Chrome extension that replaces the default Azure DevOps Wiki editor with the powerful TOAST UI Editor, adding features that should have been there from day one.

What Makes It Special?

🎨 Rich Editing Experience The extension provides a dual-mode editor—write in pure markdown or use the WYSIWYG interface. Real-time preview means no more guessing how your documentation will look.

📊 Diagrams Made Easy Need flowcharts? Sequence diagrams? The extension supports both Mermaid and PlantUML, so you can create professional diagrams with simple text syntax:

graph TD
    A[User Story] --> B{Ready for Dev?}
    B -->|Yes| C[Sprint Planning]
    B -->|No| D[Backlog Refinement]

🖼️ Smart Image Handling (Will be more polished in the future) Drag, drop, paste—images just work. The extension automatically compresses and uploads them to Azure DevOps attachments, with configurable quality settings.

📤 Export Superpowers Export your wiki pages as PDFs or Word documents with perfect formatting preservation. Great for sharing documentation outside your team.

The Technical Journey

Building this extension taught me a lot about browser extension development and working with existing web applications. Some interesting challenges I solved:

• DOM Integration: Seamlessly replacing Azure DevOps’ editor without breaking their SPA navigation
• Shadow DOM Isolation: Preventing style conflicts between the extension and Azure DevOps
• Image Compression: Client-side optimization before upload to reduce bandwidth and storage
• Smart Paste: Converting HTML from various sources (web pages, Word docs) into clean markdown

The extension is built with TypeScript, uses esbuild for fast compilation, and leverages the TOAST UI ecosystem for rich editing capabilities.

Real-World Impact

The ability to quickly add styles needed means our documentation is better, and the export features make it easy to share documentation in presentations and reports.

Open Source and Ready to Use

The extension is completely open source and available on GitHub. You can install it from source in just a few minutes:

1. Clone the repository
2. Run npm install && npm run build
3. Load the dist folder as an unpacked extension in Chrome

The extension works with both Azure DevOps Services and on-premises installations, and I’ve made sure it’s configurable enough to fit different team preferences.

What’s Next?

I’m already working on additional features like collaborative editing indicators, more diagram types, and better theme support. The goal is to make Azure DevOps Wiki editing as pleasant as using a word doc.

If you’re frustrated with Azure DevOps Wiki editing, give this extension a try. And if you find it useful, contributions are always welcome—this is a tool built by developers, for developers.

---

Check out the project on GitHub or follow me for more development insights and tools.

Tags: #AzureDevOps #BrowserExtension #Documentation #Developer Tools #Open Source