Samples

Create a new layer

You can create a script that creates a new layer, with the help of the Photoshop DOM API:

const app = require('photoshop').app;
await app.documents.add();
await app.activeDocument.createLayer();
app.activeDocument.layers[0].name = 'New layer';
Copied to your clipboard
1const app = require('photoshop').app;
2await app.documents.add();
3await app.activeDocument.createLayer();
4app.activeDocument.layers[0].name = 'New layer';

Access the local filesystem

You can create a script that accesses your local filesystem, with the help of the UXP storage module:

const uxpfs = require("uxp").storage;
const ufs = uxpfs.localFileSystem;

try {
    const folder = await ufs.getTemporaryFolder()
    const metadata = await folder.getMetadata();
    console.log(JSON.stringify(metadata));
} catch (e) {
    console.log(`Local File system error: ${e}`);
}
Copied to your clipboard
1const uxpfs = require("uxp").storage;
2const ufs = uxpfs.localFileSystem;
3
4try {
5    const folder = await ufs.getTemporaryFolder()
6    const metadata = await folder.getMetadata();
7    console.log(JSON.stringify(metadata));
8} catch (e) {
9    console.log(`Local File system error: ${e}`);
10}

Using a file picker

You can create a script that instantiates a file picker for writing/saving to files.

const fs = require('uxp').storage.localFileSystem;
try {
    // save file to a location using file picker
    const file = await fs.getFileForSaving("demo.txt");
    await file.write("Hello World! This is demo.");
} catch (e) {
    console.log(e);
}
Copied to your clipboard
1const fs = require('uxp').storage.localFileSystem;
2try {
3    // save file to a location using file picker
4    const file = await fs.getFileForSaving("demo.txt");
5    await file.write("Hello World! This is demo.");
6} catch (e) {
7    console.log(e);
8}

Read/write to clipboard

You can access the clipboard module (navigator.clipboard) to:

write to a clipboard (setContent())
read a clipboard's contents (readText())

try {
    const clipboard = navigator.clipboard;
    await clipboard.setContent({ 'text/plain': "Test string" });
} catch (e) {
    throw new Error(e);
}
try {
    const clipboard = navigator.clipboard;
    const text = await clipboard.readText();
    console.log(text);
}  catch (e) {
    throw new Error(e);
}
Copied to your clipboard
1try {
2    const clipboard = navigator.clipboard;
3    await clipboard.setContent({ 'text/plain': "Test string" });
4} catch (e) {
5    throw new Error(e);
6}
7try {
8    const clipboard = navigator.clipboard;
9    const text = await clipboard.readText();
10    console.log(text);
11}  catch (e) {
12    throw new Error(e);
13}

Create dialog UIs

Simple example

async function createDialog() {
    const dialog = document.createElement("dialog");
    dialog.style.color = "white";
    const div = document.createElement("div");
    div.style.display = "block";
    div.style.height = "200px";
    div.style.width = "400px";
    const header = document.createElement("h2");
    header.id = "head";
    header.style.color = "white";
    header.textContent = "Sample Dialog";
    div.appendChild(header);
    dialog.appendChild(div);
    await document.body.appendChild(dialog).showModal();
}
// Wait for the dialog to render
await createDialog();
Copied to your clipboard
1async function createDialog() {
2    const dialog = document.createElement("dialog");
3    dialog.style.color = "white";
4    const div = document.createElement("div");
5    div.style.display = "block";
6    div.style.height = "200px";
7    div.style.width = "400px";
8    const header = document.createElement("h2");
9    header.id = "head";
10    header.style.color = "white";
11    header.textContent = "Sample Dialog";
12    div.appendChild(header);
13    dialog.appendChild(div);
14    await document.body.appendChild(dialog).showModal();
15}
16// Wait for the dialog to render
17await createDialog();

Example with "Done" button

async function showDialog() {
    let dialog = createDialog();
    document.body.appendChild(dialog).showModal();

    // Give the script time to show the dialog by returning a promise. Make sure that it is resolved/rejected later.
    return new Promise((resolve, reject) => {
        try {
            // Resolve the promise and dismiss the dialog when when user clicks on 'Done' button
            const doneBtn = document.getElementById("done");
            doneBtn.addEventListener("click", () => {
                console.log("user is done");
                dialog.close();
                resolve("user is done");
            })

            // reject when dialog is cancelled/closed
            dialog.addEventListener("cancel", () => {
                console.log("dialog cancelled");
                reject("dialog cancelled");
            });

            dialog.addEventListener("close", () => {
                console.log("dialog closed");
                reject("dialog closed");
            });
        } catch (e) {
            console.log(e);
            reject(e);
        }
    })
}

function createDialog() {
    const dialog = document.createElement("dialog");
    dialog.style.color = "white";
    const div = document.createElement("div");
    div.style.display = "block";
    div.style.height = "200px";
    div.style.width = "400px";
    const header = document.createElement("h2");
    header.id = "head";
    header.style.color = "white";
    header.textContent = "Sample Dialog";
    div.appendChild(header);
    const doneButton = document.createElement("button");
    doneButton.id = "done";
    doneButton.textContent = "Done";
    div.appendChild(doneButton);
    dialog.appendChild(div);
    return dialog;
}

// Wait for the dialog to render
await showDialog();
Copied to your clipboard
1async function showDialog() {
2    let dialog = createDialog();
3    document.body.appendChild(dialog).showModal();
4
5    // Give the script time to show the dialog by returning a promise. Make sure that it is resolved/rejected later.
6    return new Promise((resolve, reject) => {
7        try {
8            // Resolve the promise and dismiss the dialog when when user clicks on 'Done' button
9            const doneBtn = document.getElementById("done");
10            doneBtn.addEventListener("click", () => {
11                console.log("user is done");
12                dialog.close();
13                resolve("user is done");
14            })
15
16            // reject when dialog is cancelled/closed
17            dialog.addEventListener("cancel", () => {
18                console.log("dialog cancelled");
19                reject("dialog cancelled");
20            });
21
22            dialog.addEventListener("close", () => {
23                console.log("dialog closed");
24                reject("dialog closed");
25            });
26        } catch (e) {
27            console.log(e);
28            reject(e);
29        }
30    })
31}
32
33function createDialog() {
34    const dialog = document.createElement("dialog");
35    dialog.style.color = "white";
36    const div = document.createElement("div");
37    div.style.display = "block";
38    div.style.height = "200px";
39    div.style.width = "400px";
40    const header = document.createElement("h2");
41    header.id = "head";
42    header.style.color = "white";
43    header.textContent = "Sample Dialog";
44    div.appendChild(header);
45    const doneButton = document.createElement("button");
46    doneButton.id = "done";
47    doneButton.textContent = "Done";
48    div.appendChild(doneButton);
49    dialog.appendChild(div);
50    return dialog;
51}
52
53// Wait for the dialog to render
54await showDialog();

Access installed fonts

Photoshop has set the permission for the Fonts module to ReadInstalled. This means that if no font is specified or if the font is not installed, then UXP will fallback to "system-ui" font (the default OS system UI font).

async function createDialog() {
    const dialog = document.createElement("dialog");

    dialog.style.color = "white";

    const div = document.createElement("div");
    div.style.display = "block";
    div.style.height = "200px";
    div.style.width = "450px";

    const p1 = createParagraph("system-ui"); // use default OS font
    const p2 = createParagraph("non-existent-font"); // try using a non existent font. Will resolve to OS default.
    const p3 = createParagraph("Courier New"); // use any installed font
    div.appendChild(p1);
    div.appendChild(p2);
    div.appendChild(p3);

    dialog.appendChild(div);
    await document.body.appendChild(dialog).showModal();
}

function createParagraph(fontFamily) {
    const p = document.createElement("p");
    p.style.color = "white";
    p.style.fontFamily = fontFamily;
    p.textContent = `font-family:${fontFamily}: A fox jumps over the lazy dog`;
    return p;
}

// Wait for the dialog to render
await createDialog();
Copied to your clipboard
1async function createDialog() {
2    const dialog = document.createElement("dialog");
3
4    dialog.style.color = "white";
5
6    const div = document.createElement("div");
7    div.style.display = "block";
8    div.style.height = "200px";
9    div.style.width = "450px";
10
11    const p1 = createParagraph("system-ui"); // use default OS font
12    const p2 = createParagraph("non-existent-font"); // try using a non existent font. Will resolve to OS default.
13    const p3 = createParagraph("Courier New"); // use any installed font
14    div.appendChild(p1);
15    div.appendChild(p2);
16    div.appendChild(p3);
17
18    dialog.appendChild(div);
19    await document.body.appendChild(dialog).showModal();
20}
21
22function createParagraph(fontFamily) {
23    const p = document.createElement("p");
24    p.style.color = "white";
25    p.style.fontFamily = fontFamily;
26    p.textContent = `font-family:${fontFamily}: A fox jumps over the lazy dog`;
27    return p;
28}
29
30// Wait for the dialog to render
31await createDialog();