SP Editor Chrome extension: free open source alternative to Sharepoint Designer

Did you ever face with situation when you need to debug some javascript code on customer’s Sharepoint environment or change something in css stylesheets, but there is no Sharepoint Designer installed on server. Or when you need to make fixes on Sharepoint Online site, but don’t have Sharepoint Designer on your PC right now? What do we do in such situations: download files, make modifications, upload them, check in, test changes, again download and make modifications, etc. Boring process. Fortunately nowadays there is convenient tool created of one of my work buddies Tomi Tavela: SP Editor. In this post I will show it’s features and what you can do with it.

Once you’ve installed it to the Chrome by clicking F12 there will be new Sharepoint tab in browser Developer tools which looks like this:

There are 2 checkboxes on the start page which are unchecked by default:

• Update changes to Sharpepoint
• Publish a Major

If you want to save major changes to Sharepoint by clicking Ctrl-S then check both checkboxes. Otherwise tool won’t make changes on living Sharepoint site.

In order to start working open Sharepoint site in the browser and open Sharepoint tab in developer tools. I personally often use Edit file feature, let’s check how it works. First of all we open File editor tab and select file which we want to edit:

Then we edit selected file in the right frame area and click Ctrl-S when changes are ready in order to save them. File is saved to Sharepoint and checked in with major version so you may test it on the page immediately (refresh the page with Ctrl-F5 in order to get new changes). Moreover as you can see on the screenshot above editor has intellisense.

Let’s briefly check other features.

Scriptlinks – allows to add and remove script links of web and site level:

Files – upload new file to Style library and optionally inject it to the site via script links:

Web properties – add, change or remove web property bag values:

List properties – add, change or remove list property bag values:

Webhooks – simplifies adding of web hooks to the lists or doclibs (see web hooks):

PnP JS Console v2.0.4 – console for simplifying making REST calls to Sharepoint via pnp-js-core library. Also with intellisense:

Page editor – extension for editing web parts on the publishing pages developed by another great guy Andrey Markeev:

As you can see SP Editor is created by developers and for developers for simplifying our everyday tasks. It is open source, source code is available here. So big thanks to Tomi and all other developers who made contributions for such useful tool)