Client Side (inline IDE) editor/app for editing (.js , .json, .css, .html) files in a Document Library

Question

We more and more store data as .json files in a Document Library.
Instead of (re)writing our configuration front-end, I would like users to edit the bare .json files.
(and while we're at it, all related .js, .css and .html files in the DocLib)

Question: Is there an App or Client-Side code for editing/creating files in a Document Library?

I am thinking a REST interface on top of a Document Library with the TinyMCE library or similar.

Oldskool solutions involve installing software or opening a DocLib with Explorer and using a locally installed editor:

• (2010) How to create document library for a new file type for use with inline and external editor?
• (2012) Open txt files in document library in an editor (notepad)

Update #1

I am not after a DEV experience,
I am looking for a 100% Client Side solution for (end)users to edit HTML5 files in the Browser

Answer 1

Question was answered:

Use the Built in (SPOinline) Monaco Editor:

Answer: https://sharepoint.stackexchange.com/questions/206907/how-can-use-the-microsoft-monaco-editor-which-in-offie365-they-say

Update: referenced post was deleted

Right now its only available in the "Modern lists and libraries experience"

This is not correct,

The editor IS available in Office365 for ANY document

All you have to do is get the URL right

• Open a .txt file from a Modern Library Experience

• Investigate the URL

It takes 3 parameters

    https://[SITE]/[LIBARY]/Forms/AllItems.aspx
    ?id=[SITE]%2F[LIBARY]%2F[FILENAME]
    &parent=%2F[RELATIVEPATH+LIBRARY]
    &p=5

disclaimer: there could be some typos above

With some trial and error you will be able to open any .HTML or .JS from a Classic Library

You then write a CSR script to rewrite the URLs in a Classic Library,
and it is one click, just like in the Modern Experiences

Update

Gautam reports it doesn't work for him.

I have used this at least since october 2016 on multiple Tenants, do not know what could be wrong... as I said.. it takes some trial and error to get the URL 100% right

Update (because Mr. Allrood asked so kindly in the comments)

The CSR script

"MonacoEdit": {
    View: function (ctx, fieldSchema, item) {
        eval(atob("dmFyIGZpbGVyZWYgPSBpdGVtLkZpbGVSZWY7dmFyIGZpbGVwYXRoID0gZmlsZXJlZi5zcGxpdCgnLycpOw=="));
        eval(atob("dmFyIGZpbGVuYW1lID0gZmlsZXBhdGgucG9wKCk7dmFyIHBhcmVudCA9IGZpbGVwYXRoLmpvaW4oJy8nKTs="));
        var uri = location.origin + parent + '/Forms/AllItems.aspx' + '?';
        uri += '&id=' + fileref + '&parent=' + parent + '&p=5';
        return '<a href="' + encodeURI(uri) + '" target=_blank><b>Edit</b></a>';
    }
}

Will display an Edit link for an existing 'MonacoEdit' (doesn't matter what type) column

Sorry for the encrypted JavaScript code, was just in the news them Russians hackers have been at it again (not that I think the Americans are clean)
Since I presume Mr Allrood is russian I couldn't resist some Friday programmers humor.

If you don't trust this eval code just paste this in your F12 console:

atob("dmFyIGZpbGVyZWYgPSBpdGVtLkZpbGVSZWY7dmFyIGZpbGVwYXRoID0gZmlsZXJlZi5zcGxpdCgnLycpOw==")

Answer 2

I usually use a gulp task for this, called gulp-spsync, and then I can edit the assets in any editor I want and it will sync to any SharePoint destination.