Detect Sitecore Page Modes

If you’re a frontend developer new to Sitecore you may not know that Sitecore has a series of page modes which provide different functionality to the content editor. These page modes are Design, Preview and most importantly Experience Editor (previously known as Page Editor).

I won’t go into these page modes in detail but for this blog post I’ll be focusing on Experience Editor and design page modes, and how to detect these page mode with JavaScript

All examples in this post use a fresh install of Sitecore but the same can be done in any Sitecore project.

Sitecore Global NameSpace

When you launch Experience Editor by navigating to publish and clicking on “Experience Editor”, Sitecore has helpfully added a global namespace you can tap into using JavaScript.

If you open up developer tools and type in console “Sitecore” you will see an object literal returned with a bunch of values


The item we are most interested in is “PageModes”, this has a load of parameter available for you to tinker about with. I’ve not tried all of these options so feel free to add comments in the comments box if you see anything that could be helpful.


Inside PageModes you’ll see “PageEditor” another property that will be useful in the JS to detect Page Editor mode.

Now that we can see what properties are available to use from the Sitecore global namespace, that allows us to write code to detect the if we are in the Experience Editor mode.

The example I’ve given has some extra code just to demonstrate how it could be useful in a real project.

 // noConflict mode
var app = app || {};
var pageEditorMode = function() {
// Sitecore global name space in page editor or preview mode
return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);
app = (function($, undefined) {
// do all the things
var init = function() {
if (pageEditorMode()) {
// add class to body to help override styles for experience editor mode
console.log('Experience editor (or page editor if your old school)');
} else {
// js will run here when in page preview mode or normal viewing
console.log('no page editor');
return {
init: init
jQuery(document).ready(function() {
view raw page-modes.js hosted with ❤ by GitHub

Detecting Sitecore Page Modes with C#

You can detect page modes in the backend code in nearly the same way as you can using JavaScript. I would suggest using this method instead of the client side; it just feels cleaner and more robust for me (I’m not a backend developer so please excuse any bad code)

if (Sitecore.Context.PageMode.IsPageEditor)
// capture all page modes
// detailed page modes which could be handy for different editor types
if (Sitecore.Context.PageMode.IsPageEditorEditing)
// specific if using the experience editor
// handy for content editors who only edit content and don't make structural changes to the page
if (Sitecore.Context.PageMode.IsPreview)
// specific if using the preview mode
if (Sitecore.Context.PageMode.IsPageEditorDesigning)
// specific if using the design mode
// this can be really handy for non-content editors and someone who constructs the page
// and need to see all the functionality
if (Sitecore.Content.PageMode.IsPageEditorNavigating)
// general clicking around the site in page editor mode

As you can see from the code example there are more page modes you can tap into which will allow you to do different things depending on the type. This is something you cannot do in the JavaScript version (from what I know).

Hope this post helped, thanks for reading.

2 thoughts on “Detect Sitecore Page Modes

  1. Great article.
    In addition, I have a question. What is the difference from “return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);” and “return (Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);”. I see you use “!!” and I think Its not necessary.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s