How I reinvented the wheel and discovered projectional editing

Trust me, you want a code editor that doesn’t let you change the code.

Back in 2014 I created an XML editor called Xonomy. It’s a code editor where you don’t edit code: instead, you edit an internal representation which is only shown to you as code. You edit this internal representation by clicking on things, navigating from one element to another, and making selections from menus. The motivation for designing an editor like this is to make it baby-proof: to prevent users from accidentally creating badly formed or invalid XML documents.


I can’t believe it took me nine years to accidentally discover that there is a name for this genre of editors: they’re called projectional editors and they’re common in the DSL (Domain-Specific Languages) universe. Here’s a great introduction to the idea behind projectional editing from the website of one such editor, Freon. And here’s a great video about projectional editing from the makers of another such editor, JetBrains MPS.

Outside the DSL universe, projectional editing is a wheel people seem to keep on reinventing again and again, without even calling it that. My Xonomy is one example. Another example is Thomas Hallgren’s Grammatical Framework editor which, exactly like Xonomy and Freon and others, makes you think you’re editing source code (in the Grammatical Framework programming language), but actually you’re not: you’re pointing and clicking, and sometimes typing, but the thing you’re creating – the thing the editor sees – is not a stream of text, it’s a structure.

Grammatical Framework editor

When you think about it, every editor in which you edit some kind of structure can be placed on a continuum:

The advantage of text-based code editing is that it is quick and fluent, you get to do most of what you want to do through the keyboard instead of having to muck about with the mouse. Plus, plain-text is easy to copy and paste around. The disadvantage is that it’s easy to make a mistake, which is where those pesky syntax errors come from. Diagrammatic editors do not have this problem, they’re baby-proof and you simply can’t produce an invalid structure in them, but the downside is that they’re really slow-moving to work with: too much mousing around and not enough keyboarding. Projectional editing is an attempt to give you the best of both worlds: you work mostly with the keyboard and look mostly at text but, depending on where your cursor is, your keystrokes are translated into modifications of the underlying Abstract Syntax Tree – which are then instantly re-projected onto your screen, hence the name projectional editing.

Projectional editors have been around for some time. They certainly were around back in 2014 when I was beginning to tinker with Xonomy. I wish I knew about them then – if anything, I would have known how to explain what I was doing: I was building a projectional editor for XML.

Michal Měchura, 2023-07-21, CC BY-SA