Is there a way to detect that I'm in Pinegrow with JavaScript?

I have some JavaScript running that on my page that I DON’T want to run in Pinegrow (even when JS is enabled). How do I do this?

is there a class or element somewhere that exists only within the Pinegrow interface that I can check against? I’m sure there’s a way to find this out myself so a lil help on how to look inside Pinegrow would be fab! Otherwise, for now, I’m checking if the URL is localhost.


if (!document.body.classList.contains('is-pinegrow')) {
  // run the code

Hi @fakesamgregory

Assuming your Pinegrow internal server is running at at port 40000, try:

if( === “ {
   console.log(“I’m within the Pinegrow matrix”)

Hey @Akayy,

Thanks for this. Unfortunately, this does not then run when I preview in the browser. I just want it to not run in the Pinegrow interface.

May be location.href? I think this has some url parameters, and in external browser, I think it doesn’t have url params… haven’t checked this yet at my end!

@fakesamgregory and @Akayy,
Yeah, @Akayy is right. location.href in Pinegrow will have have a pgedit URL parameter, while the browser won’t.

Here you go:

  console.log('Editing within pinegrow')
1 Like

Great this works!! Thanks both

1 Like

Checking for data-pg-id attributes would also work:

if (!document.body.hasAttribute('data-pg-id') {
  // run the code

Extending from this, is there a way to hide/show elements just within Pinegrow from the UI?

Off the head, i’d create a class/attribute hide-in-pg and in my CSS…

[data-pg-id] [hide-in-pg] {
  display: none !important;

In the tree panel, selecting an element shows the vertical element menu. It has hide/show icon. Is that what you are after?

1 Like

That’s exactly it. Thank you.