{"id":25878613,"url":"https://github.com/potherca-blog/simplyedit-loader","last_synced_at":"2026-06-09T00:32:33.395Z","repository":{"id":147392591,"uuid":"76175883","full_name":"potherca-blog/simplyedit-loader","owner":"potherca-blog","description":"Loader for SimplyEdit with dynamic Key and Attribute switching based on host name.","archived":false,"fork":false,"pushed_at":"2024-06-02T17:55:52.000Z","size":24,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T12:40:46.227Z","etag":null,"topics":["javascript","javascript-snippets","potherca","simply-edit","snippet","snippets"],"latest_commit_sha":null,"homepage":"http://blog.pother.ca/simplyedit-loader/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/potherca-blog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-11T13:26:47.000Z","updated_at":"2025-01-29T15:13:29.000Z","dependencies_parsed_at":"2023-05-21T00:00:52.336Z","dependency_job_id":null,"html_url":"https://github.com/potherca-blog/simplyedit-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/potherca-blog/simplyedit-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potherca-blog%2Fsimplyedit-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potherca-blog%2Fsimplyedit-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potherca-blog%2Fsimplyedit-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potherca-blog%2Fsimplyedit-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/potherca-blog","download_url":"https://codeload.github.com/potherca-blog/simplyedit-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potherca-blog%2Fsimplyedit-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34086664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-snippets","potherca","simply-edit","snippet","snippets"],"created_at":"2025-03-02T12:35:22.847Z","updated_at":"2026-06-09T00:32:33.390Z","avatar_url":"https://github.com/potherca-blog.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\npermalink: /\n---\n\n# Hands-on with SimplyEdit: Automated attribute switching\n\n![SimplyEdit Logo](https://simplyedit.io/img/logo.svg)\n\nA tool I like to use when creating websites is [SimplyEdit].\nWith SimplyEdit it is trivial to make content editable for the owner of the website.\nIt is simply a matter of adding a `\u003cscript\u003e` tag and some `data` attributes.\n(It's called **Simply**Edit for a reason...)\n\nOne thing I noticed when developing with SimplyEdit, was that I kept switching\nAPI keys and storage endpoints between environments. I was manually editing the\nattributes of the script tag.\n\nBeing a developer, I prefer automating things to save time and avoid human error.\nSo I created a small javascript snippet to automate this process.\n\n\n## Table of Contents\n\n* [TL;DR](#tldr)\n  * [Usage](#usage)\n  * [The Snippet](#the-snippet)\n* [The Full Story](#the-full-story)\n  * [SimplyEdit data attributes](#simplyedit-data-attributes)\n  * [SimplyEdit API keys](#simplyedit-api-keys)\n  * [Automating the process](#automating-the-process)\n  * [The Javascript snippet](#the-javascript-snippet)\n  * [Minifying](#minifying)\n  * [Examples](#examples)\n    * [The SimplyEdit Website](#the-simplyedit-website)\n    * [My attributes](#my-attributes)\n\n## TL;DR\n\nIf you use [SimplyEdit], the snippet below will make it easier to switch API\nkeys and/or configuration while switching between development/test/production\nenvironments.\n\n### Usage\n\nThe snippet exposes three functions:\n\n- `simply.key(key [, host])` to set an API key\n- `simply.set(name, value [, host])` to set any given SimplyEdit attribute.\n- `simply.src(value [, host])` to set the URL to load `simply-edit.js`.\n\nAll three of these functions allow adding a host name, to indicate that the value\nshould only be set when on _that_ host.\n\nThe name of the function, `simply`, is configurable in case there is already\nanother piece of Javascript with the name \"simply\" in use.\n\n### The Snippet\n\n    \u003c!-- SimplyEdit Loader--\u003e\n    \u003cscript\u003e\n    !(function(s,i,m,p,l,y){function d(a,b,c){if(c===undefined||c===s.location.host){l.setAttribute(a,b)}}\n    l=l||i.createElement(m);l.async=1;l.src=\"https://cdn.simplyedit.io/1/simply-edit.js\";\n    y=y||i.scripts[0];y.parentNode.insertBefore(l,y);s[p]=s[p]||{key:function(a,b){\n    d(\"data-api-key\",a,b)},set:function(a,b,c){d(\"data-simply-\"+a,b,c)},src:function(a,b){d(\"src\",a,b)}}\n    })(window,document,\"script\",\"simply\");\n\n    simply.key('my-awesome-api-key');\n    simply.set('endpoint', '/');\n\n    \u003c/script\u003e\n    \u003c!-- End SimplyEdit Loader--\u003e\n\n## The Full Story\n\n### SimplyEdit `data` attributes\n\nThe script tag, beside pointing the `src` to the `simply-edit.js` file, also\nneeds to contain an api-key. Depending on how SimplyEdit is used, other\nattributes can also be set to configure SimplyEdit.\n\nFor instance, the script tag from the **simplyedit.io** website looks like this:\n\n    \u003cscript src=\"//cdn.simplyedit.io/1/simply-edit.js\"\n        data-api-key=\"ba1a14669981509ed5012533e8a54bf9\"\n        data-simply-endpoint=\"/\"\n        data-simply-files=\"/files/\"\n        data-simply-images=\"/img/\"\n        data-simply-settings=\"myCustomSettings\"\n    \u003e\u003c/script\u003e\n\nSimplyEdit Launched version 1.0 in October 2016 but I was lucky enough to be\n[the first registrant] when SimplyEdit went into Beta back in November 2015.\nThis earned me a vanity key to use with their API.\n\nWhen on a development environment, I tend to use so called [canary] (early\nrelease) version instead of the stable release.\n\nAs [my website] is hosted using [Github Pages], I also need to add a custom\nendpoint where SimplyEdit can store my data.\n\nPutting all of this together, _my_ script tag looks like this:\n\n    \u003cscript src=\"https://canary.simplyedit.io/1/simply-edit.js\"\n        data-api-key=\"potherca\"\n        data-simply-endpoint=\"https://github.com/Potherca/potherca.github.io/\"\n    \u003e\u003c/script\u003e\n\n### SimplyEdit API keys\n\nAlthough a commercial license is required for use in production, SimplyEdit is\ngraceful enough to offer development API keys for free. These are:\n\n- `codepen` for on https://codepen.io/\n- `github` for https://github.io/ sub-domains\n- `heroku` for https://herokuapp.com sub-domains\n- `localhost` for on http://localhost/\n\nBesides being very open to adding more development keys, they also off a 30 day\nfree trial.\n\n### Automating the process\n\nWhat I tended to do, when I switched environments or development machines\n(desktop, laptop, chromebook, tablet) is change the API key, as each machine had\na different URL on which development took place.\n\nDepending on the phase the project was in (concept, develop, test, acceptance,\nproduction), I also tended to change the storage URL. I really didn't want to\naccidentally mess up the content in production when testing things.\n\nSo I created a small javascript snippet to automate this process.\n\n### The Javascript snippet\n\nAfter some tweaking, the snippet ended up like this:\n\n    (function createSimplyEditScriptTag(window, document, elementName, functionName, element, siblingElement) {\n\n      function setAttribute(p_sName, p_sValue, p_sHost) {\n        if (p_sHost === undefined || p_sHost === window.location.host) {\n          element.setAttribute(p_sName, p_sValue);\n        }\n      }\n\n      element = element || document.createElement(elementName);\n      element.async = 1;\n      element.src = 'https://cdn.simplyedit.io/1/simply-edit.js';\n\n      siblingElement = siblingElement || document.scripts[0];\n      siblingElement.parentNode.insertBefore(element, siblingElement);\n\n      window[functionName] = window[functionName] || {\n        key: function (p_sKey, p_sHost) {\n          setAttribute('data-api-key', p_sKey, p_sHost);\n        },\n        set: function (p_sName, p_sValue, p_sHost) {\n          setAttribute('data-simply-' + p_sName, p_sValue, p_sHost);\n        },\n        src: function (p_sValue, p_sHost) {\n          setAttribute('src', p_sValue, p_sHost);\n        }\n      };\n    })(window, document, 'script', 'simply');\n\nAlthough the code should be simple enough to understand, adding 25 lines of JS\ncode does not exactly feel \"lightweight\".\n\n### Minifying\n\nTaking a cue from [Google's Analytics tracking snippet] (and Mathias Bynens\n[optimizations of the snippet]), I decided to minify the code.\n\nThe final result is this:\n\n    !(function(s,i,m,p,l,y){function d(a,b,c){if(c===undefined||c===s.location.host){l.setAttribute(a,b)}}\n    l=l||i.createElement(m);l.async=1;l.src=\"https://cdn.simplyedit.io/1/simply-edit.js\";\n    y=y||i.scripts[0];y.parentNode.insertBefore(l,y);s[p]=s[p]||{key:function(a,b){\n    d(\"data-api-key\",a,b)},set:function(a,b,c){d(\"data-simply-\"+a,b,c)},src:function(a,b){d(\"src\",a,b)}}\n    })(window,document,\"script\",\"simply\");\n\nThe functionality is exactly the same only a lot less readable. It is also lot\nshorter. Pasting a mere 5 lines feels a lot more lightweight.\n\n### Examples\n\n#### The SimplyEdit Website\n\nFor an example, take the data atributes from the SimplyEdit website. The snippet\nwith those attributes would look like this:\n\n    \u003c!-- SimplyEdit Loader--\u003e\n    \u003cscript\u003e\n    !(function(s,i,m,p,l,y){function d(a,b,c){if(c===undefined||c===s.location.host){l.setAttribute(a,b)}}\n    l=l||i.createElement(m);l.async=1;l.src=\"https://cdn.simplyedit.io/1/simply-edit.js\";\n    y=y||i.scripts[0];y.parentNode.insertBefore(l,y);s[p]=s[p]||{key:function(a,b){\n    d(\"data-api-key\",a,b)},set:function(a,b,c){d(\"data-simply-\"+a,b,c)},src:function(a,b){d(\"src\",a,b)}}\n    })(window,document,\"script\",\"simply\");\n\n    simply.key('ba1a14669981509ed5012533e8a54bf9');\n    simply.set('endpoint', '/');\n    simply.set('files', '/files/');\n    simply.set('images', '/img/');\n    simply.set('settings', 'myCustomSettings');\n\n    \u003c/script\u003e\n    \u003c!-- End SimplyEdit Loader--\u003e\n\nThe attributes are all rather straightforward. As no host switching is used, it\nisn't really sensible to use the snippet, but merely using it as an example to\ncompare with the tag  at the start of this article seemed sensible enough :-)\n\n#### My attributes\n\nFor my attributes I would add some extra settings for use an various different\nhosts. Putting it together it would look like this:\n\n    \u003c!-- SimplyEdit Loader--\u003e\n    \u003cscript\u003e\n    !(function(s,i,m,p,l,y){function d(a,b,c){if(c===undefined||c===s.location.host){l.setAttribute(a,b)}}\n    l=l||i.createElement(m);l.async=1;l.src=\"https://cdn.simplyedit.io/1/simply-edit.js\";\n    y=y||i.scripts[0];y.parentNode.insertBefore(l,y);s[p]=s[p]||{key:function(a,b){\n    d(\"data-api-key\",a,b)},set:function(a,b,c){d(\"data-simply-\"+a,b,c)},src:function(a,b){d(\"src\",a,b)}}\n    })(window,document,\"script\",\"simply\");\n\n    /* My API key also works on localhost */\n    simply.key('potherca');\n    /* Use github to run a testing environment */\n    simply.key('github', 'potherca.github.io');\n    /* Use Heroku to run an acceptance environment */\n    simply.key('heroku', 'potherca.herokuapp.com');\n\n    /* Production data is stored on Github */\n    simply.set('endpoint', 'https://github.com/Potherca/potherca.github.io/');\n    /* When developing on Cloud9 (https://c9.io/) data is stored elsewhere */\n    simply.set('endpoint', '/storage/', 'website-potherca.c9users.io');\n    /* On a development environment, use the canary build */\n    simply.src('https://canary.simplyedit.io/1/simply-edit.js', 'localhost');\n    simply.src('https://canary.simplyedit.io/1/simply-edit.js', 'website-potherca.c9users.io');\n    \u003c/script\u003e\n    \u003c!-- End SimplyEdit Loader--\u003e\n\n[canary]: http://martinfowler.com/bliki/CanaryRelease.html\n[Github Pages]: https://pages.github.com/\n[Google's Analytics tracking snippet]: https://developers.google.com/analytics/devguides/collection/analyticsjs/\n[my website]: https://pother.ca/\n[optimizations of the snippet]: https://mathiasbynens.be/notes/async-analytics-snippet\n[SimplyEdit]: https://simplyedit.io/\n[the first registrant]: https://twitter.com/potherca/status/665236400112074752\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotherca-blog%2Fsimplyedit-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpotherca-blog%2Fsimplyedit-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotherca-blog%2Fsimplyedit-loader/lists"}