InDesign WebView Starter Template

---

A clean, modern starter template for building Adobe InDesign UXP plugins with WebView support. This template demonstrates how to create rich, animated UIs using modern web technologies that aren't possible with standard UXP components.

✨ Features

• 🎨 Full-Screen WebView Panel: Seamless integration with InDesign's panel system
• 🔄 Two-Way Communication: Message passing between WebView and UXP
• 📝 InDesign API Integration: Examples of creating text frames and accessing document properties
• ⚡ Modern UI: Dark theme with glassmorphism effects and smooth animations
• 📱 Responsive Design: Adapts to different panel sizes
• 💡 Well-Documented: Clear comments and examples throughout the code

🚀 Quick Start

Prerequisites

• Adobe InDesign 2020 or later (version 20.4.0+)
• Node.js installed on your system

Installation & Setup

1. Start the local server:

   node server.js

   You should see:

   🚀 InDesign WebView Starter - Local Server
   📊 Server running at http://127.0.0.1:7724/
   

2. Load the plugin in InDesign:

   • Open Adobe InDesign
   • Go to Plugins > Developer > Load Plugin...
   • Select this plugin folder
   • The "WebView Panel" will appear

3. Start building:

   • The webview will automatically load and display the starter UI
   • Try the demo buttons to see UXP ↔ WebView communication
   • Open an InDesign document to test the API examples

📁 Project Structure

indesign-webview-starter/
├── Receiver/              # WebView content (served by local server)
│   ├── index.html        # Main UI structure
│   ├── style.css         # Modern styling with animations
│   └── script.js         # WebView logic and communication
├── images/               # Plugin icons
│   ├── icon@1x.png
│   └── icon@2x.png
├── server.js             # Local HTTP server (port 7724)
├── index.html            # UXP panel (full-screen webview)
├── index.js              # UXP plugin logic & InDesign API
├── manifest.json         # Plugin configuration
└── README.md            # This file

🔧 How It Works

Architecture

┌─────────────────────────────────────────┐
│         InDesign Application            │
│  ┌───────────────────────────────────┐  │
│  │      UXP Plugin (index.js)        │  │
│  │  - Loads webview                  │  │
│  │  - Handles messages               │  │
│  │  - Calls InDesign API             │  │
│  │                                   │  │
│  │  ┌─────────────────────────────┐  │  │
│  │  │   WebView (Receiver/)       │  │  │
│  │  │  - Modern UI                │  │  │
│  │  │  - User interactions        │  │  │
│  │  │  - Sends messages to UXP    │  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘
           ↕ HTTP (port 7724)
┌─────────────────────────────────────────┐
│      Local Server (server.js)           │
│  - Serves webview content               │
│  - Runs on http://127.0.0.1:7724        │
└─────────────────────────────────────────┘

Communication Flow

WebView → UXP:

// In Receiver/script.js
window.uxpHost.postMessage({
    type: 'createTextFrame',
    text: 'Hello!'
});

UXP → WebView:

// In index.js
panelWebview.postMessage({
    type: 'success',
    message: 'Text frame created!'
});

🎨 Customization Guide

1. Modify the UI

Edit Receiver/index.html to change the structure:

<div class="card">
    <h2>Your Custom Content</h2>
    <button id="myButton">Click Me</button>
</div>

2. Update Styling

Edit Receiver/style.css - use CSS variables for consistency:

:root {
    --primary: #6366f1;  /* Change primary color */
    --bg-dark: #0f172a;  /* Change background */
}

3. Add Functionality

Edit Receiver/script.js to add your logic:

document.getElementById('myButton').addEventListener('click', () => {
    sendMessageToUXP({
        type: 'myCustomAction',
        data: { /* your data */ }
    });
});

4. Handle Messages in UXP

Edit index.js to process messages from the webview:

window.addEventListener("message", (e) => {
    if (e.data.type === 'myCustomAction') {
        // Call InDesign API
        const doc = app.activeDocument;
        // Your InDesign logic here
    }
});

📝 InDesign API Examples

Create a Text Frame

const page = app.activeWindow.activePage;
const textFrame = page.textFrames.add({
    geometricBounds: [y1, x1, y2, x2]
});
textFrame.contents = 'Your text here';

Get Document Information

const doc = app.activeDocument;
console.log(doc.name);           // Document name
console.log(doc.pages.length);   // Number of pages
console.log(doc.modified);       // Is modified?

Place an Image

const rect = page.rectangles.add({
    geometricBounds: [y1, x1, y2, x2]
});
rect.place(imageFile);
rect.fit(1718580851); // FitOptions.FILL_PROPORTIONALLY

🐛 Troubleshooting

WebView won't load:

• ✅ Make sure the server is running (node server.js)
• ✅ Check that port 7724 is not in use by another application
• ✅ Verify the URL in manifest.json matches the server (http://127.0.0.1:7724)

Messages not working:

• ✅ Ensure enableMessageBridge is set to "localAndRemote" in manifest.json
• ✅ Check browser console for errors (right-click webview → Inspect)
• ✅ Verify you're using window.uxpHost.postMessage() in the webview

InDesign API errors:

• ✅ Make sure a document is open before calling document-related APIs
• ✅ Check the UXP Developer Console for error messages
• ✅ Verify you're using the correct InDesign API version (20.4.0+)

Server errors:

• ✅ Make sure Node.js is installed
• ✅ Check that all files in the Receiver/ folder exist
• ✅ Try restarting the server

🎯 Next Steps

1. Customize the branding: Update plugin name in manifest.json
2. Design your UI: Modify Receiver/index.html and style.css
3. Add your features: Implement your logic in Receiver/script.js
4. Integrate with InDesign: Use the API examples in index.js
5. Test thoroughly: Try different panel sizes and document states
6. Package for distribution: Follow Adobe's UXP plugin packaging guidelines

📚 Resources

• Adobe UXP Documentation
• InDesign Scripting Guide
• UXP WebView API

📄 License

This is a starter template - feel free to use it for your own projects!

🙏 Tips

• Use the browser console: Right-click the webview and select "Inspect" to debug
• Hot reload: Edit files in Receiver/ and refresh the panel to see changes
• Keep it simple: Start with small features and build up gradually
• Test early: Test your plugin frequently during development

---

Happy coding! 🚀