(super slick now) Show users where to edit a various parts of your template

Project URL: Glitch :・゚✧

Alright so imagine you’ve made a neat webpage template with a bunch of different places people can edit the HTML to put their own information.

The first step for the person remixing it is to cross reference where in the code is the markup that goes with which parts of the page. And that can be pretty tricky with the wild layouts that you can make in CSS these days.

Here’s an idea for how to speed that up (doesn’t work though). Take a look at this sample code:

  Using this project

The editLink function here does the following:

  1. If our page isn’t embedded in the Glitch editor, exit right away.
  2. Pretend there was a JS error.
  3. Look at the error’s stack to see where editLink() was called. That’ll be something like this:
        at editLink (https://lavish-lace-axolotl.glitch.me/edit.js:52:13)
        at https://lavish-lace-axolotl.glitch.me/:71:21
  4. Extract the Glitch project name, path, and line+column location. For example: lavish-lace-axolotl, index.html, line 71, column 21.
  5. Come up with a Glitch editor URL that goes there: https://glitch.com/edit/#!/lavish-lace-axolotl?path=index.html%3A71%3A13 (actually a few characters before it so that we’re actually in the part to edit and not the script tag).
  6. Put a link to that URL right there where the script is. The link has target="_parent" so that it navigates the editor instead of opening another copy of the editor inside the preview panel.

You can put these <script>editLink();</script> all over your template. When people view the webpage by itself, it’ll look normal, as if nothing were there. When you open it in the editor preview, you get a bunch of links, and clicking on one will move your editor cursor right to where you can edit that part of the page:

Except no, it doesn’t. The Glitch editor doesn’t actually respond to hash changes. This was all pointless.


Hum, you would need to have an extension, or perhaps even a bookmarklet? :sparkles:

1 Like

ok I’ve changed it to do a full page reload so now it at least goes there. very disruptive though.


There’s a new piece of functionality in the Glitch editor!

You can now use a postMessage to the editor to move the cursor around. I’ve updated this to use that :rainbow:. Goodbye, full page reloads!


This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.