Tylr: Demo of tile-based editing, a new kind of structure editing | Hacker News Reader

Tylr: Demo of tile-based editing, a new kind of structure editing

twitter.com

217 pointspolm2340 comments

This is a very exciting development, similar in spirit to the proposal by Bret Victor for Learnable Programming [1].

I'm also excited by the fact that from their website the CRDT for local-first collaborative editing and Jupyter like alternative are also in the pipeline [2].

For those who are interested in the history of structure editor you can check the venerable Tioga editor in Xerox's Cedar programming environment [3],[4].

[1]http://worrydream.com/LearnableProgramming/

[2]https://hazel.org/

[3]http://www.bitsavers.org/pdf/xerox/parc/cedar/Cedar_7.0/07_T...

[4]https://www.youtube.com/watch?v=z_dt7NG38V4

https://hazel.org has been on this beat for some time as well, and have the proofs to back it up.

Hazel is a live functional programming environment that is able to typecheck, manipulate, and even run incomplete programs, i.e. programs with holes. There are no meaningless editor states.

Looks like OP is building Hazel!

so he is!

Yup, tylr is a minimal prototype, ala Hazelnut, intended to be adapted and integrated into Hazel (happening now!)

From Twitter: tylr is a tiny interactive exposition of _tile-based editing_, a new kind of structure editing that, like text, supports linear token-level editing workflows but, unlike text, ensures your manipulated tokens can always be parsed back into a valid syntax tree

I don't quite understand this. Suppose I enter a start parenthesis - '(' - then what is it supposed to do / have as an AST?

Suppose I have:

   let y = f(2, 3)

And I add a start parenthesis like this:

   let y = f((2, 3)

There is no longer a valid tree and it is not obvious at that point where, I, the end-user, want the parenthesis construct to end.

If it works like Emacs paredit, the default for just hitting `(` would be

  let y = f()(2, 3)

but there should be a different command to do (`alt-(` in paredit)

  let y = f((2, 3))

There should of course also be "slurp" and "barf" commands to add or remove items from the parentheses if you do the wrong thing first (or want to wrap multiple things in the parentheses)

I put the parenthesis one step further to the right - so you would get:

   let y = f(()2, 3)

Which possibly wouldn't parse.

(It possibly wouldn't parse in a language with C-style syntax.)

That would depend on the language. Paredit is mainly made for Lisp where that would be legal (aside from the comma between 2 and 3). In some other languages that could also be allowed for casts.

And also "boof" and "crap" commands for moving items in and out of the the other side of the parens.

Well the demo is live, it's linked right there and you could try it.

I did, and after typing in the left-parens inside the already existing left-parens, tylr gave me a right-parens in the "backpack", the space above where I was typing, and then didn't let me move outside of the enclosing parens pair (ie, I had to "put down" the matching right-parens to either enclose the 2, or the 2,3 pair). If instead I put in the left-parens before the already existing one, tylr automatically added the right-parens after the existing right-parens (which makes sense, it's the only legal place for the left-parens I just added to be matched).

But again, you could just try it out.

I did and I couldn’t really understand what it was doing.

That's kind of cool. It would also be nice if hitting ( after selecting an expression would wrap it in ()s, if it is syntactically correct to do so. That's the first thing I tried.

Yup, these kinds of things are definitely on the agenda as we integrate the core ideas here into Hazel. We kept things minimal in Tylr to focus on the core ideas with minimal "magic".

Indeed, that problem (ambiguity about where to put matching delimiters) is what motivated tylr. The solution is: when the location of the closing parentheses isn't unique, as in your example, tylr puts it in the "backpack" above the cursor and enters "restructuring mode", letting you select where it should go (within the valid region).

Reasonable question given the usual approach to structure editors, which have users directly modify the AST. tylr adopts a more indirect approach, where your program is presented in an alternate (modal) tile-based syntax with its own syntax-directed editing. The point of this indirection is to give you more text-editor-like flexibility, but unlike text tylr makes sure you can always (in the default mode) transform your program from the tile-based syntax to the abstract syntax.

It might help to think of restructuring mode, the mode automatically entered upon constructing `(`, as a transactional editing mode in which you specify your AST-to-AST transformation.

Reminds me of Paredit, an emacs mode for structural code editing and navigation for lisps. It keeps the parse tree valid even as you do crazy stuff.

http://danmidwood.com/content/2014/11/21/animated-paredit.ht...

Was looking for this exact comment.

I’m honestly waiting for a tree-sitter (or LSP) based paredit-mode to show up, so that I can use it for all modes and languages, and not just LISP.

Paredit is really great, and has been adapted to other editors as well. Writing Clojure in IntelliJ with Cursive and Paredit mode is really pleasant.

Yep, Paredit was my first thought as well.

Yeah slurping and barfing in Paredit are quite similar to basic restructuring operations in tylr, eg selecting a parenthesis and moving it somewhere else. Some differences:

(1) In tylr you move the parenthesis itself, rather than making the parenthesized term slurp/barf its neighbors. This may seem like a minor difference for simple operations like this but I think it's an important primitive UI metaphor that makes the editing experience feel more direct/linear/text-like rather than you having to translate your editing goal into operations on the AST.

(2) tylr generalizes beyond S-expressions to infix operator sequences and other multi-sorted syntactic forms (eg it understands you shouldn't be able to move expression forms in patterns).

(3) tylr generalizes beyond parenthesis moving to near-arbitrary range selection moving, eg I could make the selection (specified by the square brackets)

`( 1 + 2[) * (]3 + 4 )`

and directly move it over to give

`( 1[) * (]_ + 2 + 3 + 4 )`

(where tylr has inserted a hole `_` to keep things well-formed)

Smartparens is another emacs mode for structural editing as well.

I like the visual style and the conceptualization, but is anything about it really new? Not trying to be dismissive, I just looked at some structural and projectional editors some time ago and this seems to have very similar ideas. JetBrains MPS and Lamdu[1] come to mind, but there are many others. There's also a subreddit[2] for this sort of thing.

[1] https://www.youtube.com/watch?v=skhP6LcbRTs

[2] https://reddit.com/r/nosyntax

more specifically, there is a list of such projects in: https://www.reddit.com/r/nosyntax/wiki/projects

This is the first time I've been totally prevented from reading something on Reddit by the pop-up, it used to let me through eventually! Now it seems to just ditch the url I wanted and goes to 'popular' instead! (Opera mobile Android) Why did they do that? Is (usage of) the app really that much more valuable to them?

Ah derp! Works great with "request desktop site" turned on.

https://old.reddit.com/r/nosyntax/wiki/projects

Thanks I did not know about that! Works heaps better I reckon!

I'd love to hear more about MPS. I tried looking into it, but the 'getting started' tutorials involved tens of files with arcane (for a novice) logic, so I gave up.

Yeah! For one thing, tylr makes it possible to make sub- and cross-structural selections, which isn't possible in other structure editors. Try typing `2 + 3 * 4` in MPS and selecting `* 4` or even `2 + 3`—you can't because they don't correspond to abstract syntactic terms. tylr understands these sorts of arbitrary range selections and makes sure you manipulate them in reasonable ways (eg see https://twitter.com/dm_0ney/status/1414742962442014720?s=20).

How is this novel compared to e.g. the Microsoft Equation Editor, which uses a hierarchical, cell-based approach for describing mathematical formulas? I guess this is a bit different since you can enter everything via the keyboard, while the MS editor requires you to select primitives from a menu.

The UI looks very nice and minimalistic though, I really like it.

AFAIK the MS equation editor allows writing a subset of LaTeX tags for symbols, doesn't it?

I would love to see this as an option in tools like regex101 . This could make debugging complex regular expressions much easier.

Yeah! something like this as a regex-writing helper could be super useful! And it could have uses such as a mini-editor/plugin within an appropriate larger editor framework? Cool idea!

Kinda neat, would prefer to have a page rather than just a line of code to move up and down. I can see it catching on, it's not just a big departure from current syntax highlighting/code completion. My IDE pre-matches various brackets and quotes as I type and gets it right most of the time.

What language is this? Or is it just a mathematic editor? Just wondering it is interest whatever language it is.

I'm not familiar with this mathematical style, if you can call it that. I kept wanting to break the line.

Reply on news.ycombinator.com