Share via

Performance issue on adding shapes to slide using shapes.addTextBox

Sandhya Sriram 20 Reputation points
2026-05-11T11:49:18+00:00

In office.js add-in, inserting a textbox to a slide using below code takes more than 15s - in PowerPoints opened in browser (Google chrome in my case). What can I do to improve this.

I do not face any such lag in Ppt opened in desktop app.

const textbox = shapes.addTextBox(
            text,
            {
              left: 700,
              top: calculatedTop,
              height: 85,
              width: 210,
            },
          );
          textbox.fill.setSolidColor('#CEC2FF');
          textbox.textFrame.textRange.font.name = 'Arial';
          textbox.textFrame.textRange.font.color = '#2905B7';
          textbox.textFrame.textRange.font.size = 8;
          textbox.textFrame.autoSizeSetting =
            'AutoSizeShapeToFitText';
            await context.sync();
Microsoft 365 and Office | Development | Office JavaScript API

2 answers

Sort by: Most helpful
  1. Jayden-P 22,475 Reputation points Microsoft External Staff Moderator
    2026-05-11T12:53:42.8566667+00:00

    Hi @Sandhya Sriram

    To help me narrow this down, could you confirm your test environment?

    • Are you running this code using Script Lab (Insert → Add-ins → Script Lab)?
    • Or a custom Office add-in (your own project / sideloaded add-in)?
    • Have you tried running on another browser such as Edge? Does it make any changes?

    If possible, can you please provide the full code and your PPT file via Private message?

    User's image

    I look forward for your reply.


    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Was this answer helpful?

    0 comments No comments

  2. AI answer

    2026-05-11T11:49:29.8966667+00:00

    Use a single context.sync() and batch operations on the shape to reduce the performance impact, especially in PowerPoint for the web.

    shapes.addTextBox returns a Shape that can be fully configured before synchronizing with the host. The following pattern minimizes round trips and is consistent with the documented usage of addTextBox:

    await PowerPoint.run(async (context) => {
      const shapes = context.presentation.slides.getItemAt(0).shapes;
    
      const textbox = shapes.addTextBox(text, {
        left: 700,
        top: calculatedTop,
        height: 85,
        width: 210,
      });
    
      // Configure all properties before syncing
      textbox.fill.transparency = 0; // example of batching with other fill props
      textbox.fill.setSolidColor('#CEC2FF');
      textbox.textFrame.textRange.font.name = 'Arial';
      textbox.textFrame.textRange.font.color = '#2905B7';
      textbox.textFrame.textRange.font.size = 8;
      textbox.textFrame.autoSizeSetting = 'AutoSizeShapeToFitText';
    
      // Single sync for all operations
      await context.sync();
    });
    

    Also ensure that:

    1. shapes is obtained once per batch (as in the example above) rather than repeatedly in a loop with separate PowerPoint.run calls.
    2. If multiple text boxes are added, create and configure all of them in the same PowerPoint.run and call context.sync() only once at the end.

    This approach matches the documented pattern for ShapeCollection.addTextBox, which is designed to batch shape creation and property updates efficiently.


    References:

    AI-generated content may be incorrect. Read our transparency notes for more information.

    Was this answer helpful?

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.