Slide Studio for VS Code

Slide Studio is a powerful VS Code extension for authoring, editing, and presenting HTML-based slide presentations. It provides real-time preview, intelligent editing assistance, and seamless workflow integration for creating beautiful presentations directly in your favorite code editor.

✨ Features

🔍 Live Preview

Automatic preview opening - No setup needed, opens when you open slide files
Real-time WebView preview with instant updates as you type
Smart panel reuse - Preview updates when switching files instead of creating new panels
Beginner-friendly onboarding - Step-by-step tutorial for new users
Split-screen editing experience with synchronized navigation
Support for external resources and CDN libraries with Node.js http/https integration
Mobile-responsive preview modes
Fixed SVG element serialization for smooth DOM interaction

🎯 Smart Slide Detection

Automatically detects various slide formats (Reveal.js, Impress.js, custom)
Intelligent parsing of slide structure and content
Support for sections, divs with .slide class, and data attributes

Interactive slide outline in the sidebar with thumbnails
Quick navigation between slides with keyboard shortcuts
Visual slide timeline and progress indicators
Search and filter slides by title or content

✨ Enhanced Inline Editing

Universal text editing - Double-click ANY text element to edit (25+ element types supported)
Bullet points - Edit list items (<li>) with enhanced hover feedback
Table cells - Edit table cells (<td>, <th>) with proper styling
Code blocks - Edit code with monospace font preservation (<code>, <pre>)
Chart & Mermaid text - Edit text within charts and Mermaid diagrams
Smart editing modes - Auto-detection: short text = input, long text = textarea
HTML preservation - Maintains bold, italic, code formatting during edits
Professional UX - Element-specific styling, hover effects, keyboard shortcuts (Enter, Ctrl+Enter, Escape)

Automatic counter updates - Slide counter updates with native navigation (arrow keys, clicks)
Native HTML compatibility - Works seamlessly with existing slide navigation
Real-time tracking - MutationObserver-based detection of slide changes
Clean interface - Simple "N / Total" counter without conflicting controls

📊 Asset Management

Scan and validate all slide assets (images, CSS, JS)
Detect and identify external libraries (Chart.js, MathJax, Bootstrap)
Optimization suggestions for performance improvements
Asset report with detailed analysis

📄 PDF Export

Export presentations to high-quality PDF files
Configurable page formats and orientations
Print-optimized styling with proper page breaks
Support for slides with charts and dynamic content

⚡ Live Reload

Automatic preview updates when files change
Watch related CSS and JavaScript files
Configurable debounce settings
Preserve slide position during updates

🚀 Getting Started

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X)
Search for "Slide Studio"
Click Install
Restart VS Code if prompted

Quick Start

Open an HTML slide file in VS Code
Automatic activation: The extension detects slide content and activates
Open preview: Use Ctrl+Shift+P → "Slide Studio: Open Preview"
Start editing: Make changes in the editor and see live updates in the preview

📖 Usage Guide

Creating Your First Slide Presentation

Create an HTML file with slide structure:

<!DOCTYPE html>
<html>
<head>
    <title>My Presentation</title>
    <style>
        .slide {
            width: 100vw;
            height: 100vh;
            padding: 2em;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="slide">
        <h1>Welcome to My Presentation</h1>
        <p>This is the first slide</p>
    </div>
    
    <div class="slide">
        <h2>Main Content</h2>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
        </ul>
    </div>
    
    <div class="slide">
        <h2>Thank You!</h2>
        <p>Questions?</p>
    </div>
</body>
</html>

Supported Slide Formats

Slide Studio automatically detects various slide formats:

CSS Class Based: <div class="slide">
Section Based: <section> tags
Data Attributes: <div data-slide="1">
Custom Patterns: Any element with slide-related classes

Command Palette Commands

Slide Studio: Open Preview - Open live preview panel (auto-opens by default)
Slide Studio: Go to Slide... - Quick navigation to specific slide
Slide Studio: Export as PDF - Export presentation to PDF
Slide Studio: Toggle DOM Inspector - Enable/disable element inspection
Slide Studio: Show Getting Started Guide - Replay the beginner tutorial
Slide Studio: Refresh Outline - Refresh slide outline view

Keyboard Shortcuts

In the preview panel:

←/↑ - Previous slide
→/↓/Space - Next slide
Home - First slide
End - Last slide

⚙️ Configuration

Settings

Configure Slide Studio through VS Code settings:

{
  "slideStudio.preview.autoOpen": true,
  "slideStudio.preview.mode": "split", 
  "slideStudio.preview.theme": "auto",
  "slideStudio.editor.quickEdit": true,
  "slideStudio.validation.accessibility": true,
  "slideStudio.server.port": 3000,
  "slideStudio.guidance.hasShown": false,
  "slideStudio.externalResourceCache": true
}

PDF Export Options

{
  "slideStudio.export.pdf": {
    "format": "A4",
    "orientation": "landscape",
    "margin": "1cm",
    "printBackground": true,
    "scale": 0.8
  }
}

🎨 Supported Libraries

Slide Studio has built-in support for popular presentation libraries:

Reveal.js - Modern HTML presentations
Impress.js - 3D presentation framework
Chart.js - Beautiful charts and graphs
MathJax - Mathematical notation
Mermaid - Diagram and flowchart generation
Bootstrap/Tailwind CSS - Styling frameworks

📱 Examples

Basic Slide Deck

<div class="slide">
    <h1>Title Slide</h1>
    <p>Subtitle</p>
</div>

Slide with Chart

<div class="slide">
    <h2>Sales Data</h2>
    <canvas id="myChart"></canvas>
    <script>
        // Chart.js code here
    </script>
</div>

Slide with Math

<div class="slide">
    <h2>Mathematical Formula</h2>
    <p>$$E = mc^2$$</p>
</div>

🤝 Contributing

We welcome feedback to make Slide Studio even better!

🐛 Report bugs - Help us find and fix issues
💡 Feature requests - Suggest new functionality
⭐ Rate & review - Share your experience on the marketplace
📢 Spread the word - Tell others about Slide Studio

🐛 Known Issues

PDF export may not capture some dynamic animations
Large presentations (100+ slides) may impact performance

For issues and feature requests, please visit our GitHub repository.

📄 License

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

🙏 Acknowledgments

VS Code Extension API - For the powerful extension framework
Puppeteer - For PDF generation capabilities
Cheerio - For HTML parsing functionality
Chart.js Community - For inspiration and integration examples

📞 Support

Need help? Check out these resources:

Quick Start Guide: Follow the steps in this README
GitHub Issues: Report bugs or request features
VS Code Marketplace: Leave a review and rating

Made with ❤️ by the Slide Studio team

Happy presenting! 🎉

Slide Studio

Surreal AI