Trying to build an extension to display differently based on if the page is in view or edit mode.

Is there a built in way to see if a modern Site Page is in Read or Edit display mode?

I know of DisplayMode in the @microsoft/sp-core-library, but that only seems to support whether or not an SPFx app is in Read or Edit mode.

  • Hi did you find any solution for this problem? Also can you tell us how to use DisplayMode in SPFx? Commented Jan 4, 2018 at 6:08

2 Answers 2


The correct answer is valid but it will not cover all the scenarios, if you need to detect the edit mode from an SPFx solution on a classic page the Mode=Edit will not be available. A more reliable solution would be to use the DisplayMode

//Detect display mode on classic and modern pages pages
if(Environment.type == EnvironmentType.ClassicSharePoint){
let isInEditMode: boolean;
let interval: any;
interval = setInterval(function(){
  if (typeof (<any>window).SP.Ribbon !== 'undefined'){
    isInEditMode = (<any>window).SP.Ribbon.PageState.Handlers.isInEditMode();
      //Classic SharePoint in Edit Mode
      //Classic SharePoint in Read Mode
}else if(Environment.type == EnvironmentType.SharePoint){
if(this.displayMode == DisplayMode.Edit){
  //Modern SharePoint in Edit Mode
}else if(this.displayMode == DisplayMode.Read){
  //Modern SharePoint in Read Mode

More information about this can be fount here


When the modern page is in edit mode. you can find there will be query string added on the url Mode=Edit. if you remove that query string the page will go in read mode. you can get query string values in the spfx webparts.

ex: https://tenant.sharepoint.com/sites/demosite1/SitePages/modernpage.aspx?Mode=Edit

  • Thanks, for some reason I didn't think to check the simplest place to look. Trying to over-complicate things I guess.
    – Jordan
    Commented Dec 13, 2017 at 14:05

Your Answer

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

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