Edit in GitHubLog an issue

Building your first plugin

This tutorial will walk you through the process of building your first plugin. You will learn how to create a plugin, add a command to it, and then run it in InDesign.

Prerequisites

Before you start, make sure you have the following software installed on your machine:

Steps

Step 1: Create a plugin

You can create your plugin directly in the UXP Developer Tool. To do so, open the UXP Developer Tool and click Create Plugin.

This opens a dialog where you can enter the details for your plugin:

Screenshot of the create plugin dialog
The create plugin dialog

In the dialog, enter the following information:

FieldValue
Name
My First Plugin
Host Application
Adobe InDesign
Host Application Version
18.5
Template
quick-starter

Then click Select Folder and choose a location on your machine where you want to create the plugin.

The UXP Developer Tool will create a new folder with the name you specified in the location you specified. The folder will contain the following files:

Copied to your clipboard
My First Plugin
├── manifest.json
├── index.html
└── index.js

Step 2: Run the plugin

Now that you have created your plugin, you can run it in InDesign.

First things first, you'll need to run InDesign. You can verify that UDT is connected to the app by checking the connected apps panel.

Then, in the UXP Developer Tool, in the row for your plugin, click ⋯ → Load:

Screenshot of the UXP Developer Tool with the load button highlighted
The load button

This will load your plugin into InDesign. You should see the plugin's panel appear in InDesign:

Screenshot of InDesign with the plugin panel open
The plugin panel

Step 3: Make a change

Now that you have your plugin running in InDesign, let's make this plugin your own.

Open the index.html file in your code editor. You should see the following code:

Copied to your clipboard
<html>
<head>
<script src="./index.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<button id="btnCreateText">Create Text</button>
</body>
</html>

This is the HTML code that defines the content of your plugin's panel. You can change it to whatever you want.

For example, you could change the heading to say "My First Plugin":

Copied to your clipboard
<h1>My First Plugin</h1>

Or you could add a paragraph below the heading:

Copied to your clipboard
<p>This is my first plugin.</p>

To see your changes, you'll need to reload the plugin in InDesign. To do so, in the UXP Developer Tool, in the row for your plugin, click ⋯ → Reload:

Screenshot of the UXP Developer Tool with the reload button highlighted
The reload button

Next steps

Congratulations! You have successfully created your first plugin. Next, we'll take a look at some of the concepts that are important for plugin development.

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.