I'd like to know if there is a way to detect that the component is in the design mode. By saying "design mode" I mean the situation when we're moving the component to/from Object Record page in Lightning App Builder and changing its attributes. Usually, most component frameworks have such ability, for example in .NET

2 Answers 2


There's a Debug mode available in Lightning Components if that's what you are looking for.

Quoting the relevant text

There are two modes: production and debug. By default, the Lightning Component framework runs in production mode. This mode is optimized for performance. It uses the Google Closure Compiler to optimize and minimize the size of the JavaScript code. The method names and code are heavily obfuscated.

When you enable debug mode, the framework doesn't use Google Closure Compiler so the JavaScript code isn't minimized and is easier to read and debug.

To enable debug mode for your org:

From Setup, enter Lightning Components in the Quick Find box, then select Lightning Components. Select the Enable Debug Mode checkbox. Click Save.

Depending on your exact use case, you may also want to look at the Lightning Inspector Chrome Extension.

  • Ok, got it. My question was about detecting design mode programmatically. Say, I'd like to show one UI in design mode (while user's changing component location and attributes) and another UI on actual Record page. Is that possible?
    – Mike Raven
    Commented Jun 3, 2016 at 18:01
  • I don't think that's possible. If my answer helped with the info you were looking for, please mark it as an answer for everyone's benefit. Commented Jun 3, 2016 at 18:05
  • 3
    This doesn't answer the question at all though. Commented May 17, 2018 at 0:23

Here's a hacky way of accomplishing this. It relies on the URL of the page editor not changing.


<aura:component implements="flexipage:availableForRecordHome">
    <!-- Attributes -->
    <aura:attribute name="inDesignMode" type="Boolean" default="false"/>

    <!-- Handlers -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- Body -->
    <aura:renderIf isTrue="{!v.inDesignMode}">
            Component is in design mode.


    doInit: function (component, event, helper) {
        var inDesignMode = document.location.href.toLowerCase().indexOf( 
'flexipageeditor' ) >= 0;
        component.set("v.inDesignMode", inDesignMode);

I'd recommend implementing it as a service component if you need to use it in multiple components.

  • Pity still no legit way to do this; URL in April 2018 is e.g. /visualEditor/appBuilder.app?id=0M03C00000004K8SAI.
    – Keith C
    Commented Apr 3, 2018 at 12:39
  • Actually the URL fragment used in the example is correct. The URL you indicate is the URL for the page builder but it wraps the editable contents containing the LEX components in an IFRAME with a src of /flexipageEditor/surface.app. I also thought it was the appBuilder URL initially until my code didn't work. :) Commented Apr 3, 2018 at 23:13
  • 1
    Just ran into this How to Identify lightning component is added from app builder or not? that seems like a good approach.
    – Keith C
    Commented May 8, 2018 at 11:16
  • Haven't tested that approach yet myself but I like it better assuming it works as intended. Commented May 17, 2018 at 0:21
  • Hi @KeithC can you share what was in How to Identify lightning component is added from app builder or not? The site is no longer available and it is also not in the Wayback machine.
    – Tim Lewis
    Commented Jan 4, 2019 at 16:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .