I have created a part that adds css and JS to my page.

I would like to have the part be visible from the editor mode, right now its invisible unless you happen to mouse over it.

I've found this documentation: https://docs.microsoft.com/en-us/sharepoint/dev/general-development/how-to-add-an-edit-mode-panel-snippet-in-sharepoint

The issue is that the documentation's context is limited to inserting snippets. I am building my web part through code. I have attempted to insert the snippet from that document into my part but it doesn't work. The element is always visible even when not editing.

How do I add an element to my web part that only appears in edit mode?

1 Answer 1


In the BaseWebPart class you can access the displayMode property to see if a page is in edit mode or not.

Reference: https://docs.microsoft.com/en-us/javascript/api/sp-webpart-base/basewebpart?view=sp-typescript-latest#displaymode

 if (this.displayMode === DisplayMode.Edit) {
   this.domElement.innerHTML = `<div>Edit mode</div>`;
 else {
   // code for read mode

Optionally, you can test against the URL. In modern pages this will have ?Mode=Edit when you are editing a page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.