WebEditKit - Web editors for JetBrains MPS

Language Workbenches
1

I have just recorded a demo of WebEditKit:

The idea is to make easy to create web editors which talk with a running instance of MPS.

Basically my workflow is:

  • I build languages with MPS, evolve them, prototype them quickly
  • When languages are stable and a client wants to edit maybe even a subset of the models I create editors using WebEditKit

These editors can be used to complement JetBrains MPS: you could do advanced stuff in MPS, and light editing in the browser.

We benefit from all the infrastructure of MPS, so we just need to focus on the editing part. I think these editors should be easy to integrate in existing web applications, they should be good web citizens and play nicely with CSS & JavaScript. For example, in one case I have integrated this with a drag-and-drop editor.

Now, this is all very new and has not even at alpha level of maturity, so use it with caution.

All of this is open-source: both the server-side (MPSServer) and the framework to be used on the client-side (WebEditKit).

The code of the demo is here: https://github.com/Strumenta/businessorg-webeditkit-example

The code to create the editors is this:

import {
    editableCell,
    emptyRow,
    fixedCell, horizontalCollectionCell, referenceCell,
    registerRenderer,
    row, tabCell,
    verticalCollectionCell,
    verticalGroupCell
} from "webeditkit";

const webeditkit = require("webeditkit");

$('document').ready(function(){
    webeditkit.setup();

    registerRenderer('com.strumenta.businessorg.Organization', (node) => {
       return verticalGroupCell(
            row(fixedCell(node, 'Organization', ['title']), editableCell(node, 'name', ['title'])),
            emptyRow(),
            row(fixedCell(node, 'Roles:')),
            row(tabCell(), verticalCollectionCell(node, 'roles')),
            emptyRow(),
            row(fixedCell(node, 'Persons:')),
            row(tabCell(), verticalCollectionCell(node, 'persons')),
       );
    });

    registerRenderer('com.strumenta.businessorg.Role', (node) => {
        return editableCell(node, 'name');
    });

    registerRenderer('com.strumenta.businessorg.Person', (node) => {
        return row(editableCell(node, 'name'), fixedCell(node, ":"), horizontalCollectionCell(node, 'roles', () => {
            return fixedCell(node, ",");
        }));
    });

    registerRenderer('com.strumenta.businessorg.RolePlayed', (node) => {
        return referenceCell(node, 'role');
    });

    webeditkit.addModel("localhost:2904", "com.strumenta.businessorg.sandbox.acmeinc", "5270253970127314084", "businessorg");
});

I am looking forward to hearing what you think.

In the meantime I am having a lot of fun :smiley:

4 Likes
2

Hi Federico,

Good stuff, I hope I will have some time during Easter to try it out myself.

One thought I had was: would it be possible to ask the MPS Server also for the Editor model (containing the MPS cells)? That way, it should be possible to map the MPS Editor model to your Web editor model automatically and show a “mimic” of the MPS editor immediately in the Browser after setting up things.
Of course, this would make it harder/different to actually edit the model in the browser, but for the use case of just rendering the model in the web I wonder if this wouldn’t be a interesting thing to do?

With both the domain and editor model from MPS, you might even be able to generate (most of) your editor code, don’t you think?

Best,
Robert

1 Like
3

Hi Robert, yes, this should be possible to do. I think one could already do it by asking the editor model through MPSServer and then process the result to generate the appropriate renderer in WebEditKit. I think it may be useful to do at some point. I did not start with that because I want to focus initially on building web-first editors, which can be integrated in existing web applications, I did not want to be too much MPS-esque in the interface, at least at the beginning. But it would be definitely useful and something worth building, as soon as this is a bit more of a POC

4

Hm, I don’t think this would be more or less MPS-esque than your current solution, but a tool that allows you to quickly load simple, existing editors into the web and play with them.
Thanks for making the MPS Server available to others!

Best,
Robert

5

Sorry, I was a bit obscure in my previous answer. What I meant is that I would encourage users to build editors with the browser in mind as a first choice. This is why I would not put the emphasis from the beginning on recycling MPS editors as-is. It would still be a valuable interim solution but I think it would be better to think of new editors specifically for the web. At least, this is what I have in mind as of now and where I am spending the initial energies

1 Like
6

Okay, but you would still want users to use MPS to define the meta model? Cause I got the impression that one of your main focusses is to have the interop with MPS, so that your web editors operate directly on the MPS models, complementing existing MPS languages.

Reading your initial post again, where you describe the workflow, I got the impression that your idea is to use WeEditKit as a enhancement for exisitng MPS languages (“stable language”, for me, inherently includes that there is some sort of editor, maybe you have a different understanding and that’s why I’m confused).

7

On a different note, I want to suggest to increase the font-size for upcoming videos, I had trouble really reading the code in the video (maybe I just need glasses, though :)).

8

Yes, I see these editors as a complement to a larger MPS solution, but I would expect that the main use is to create new editors, new views if you want, designed for the web. One could still do the heavy lifting in MPS but doing lighter editing in the browser, using an editor that is thought for this lighter editing, without necessarily the same rich features we have in MPS

Will do, thank you for the feedback!

1 Like