Back

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

217 points3 yearstwitter.com
teleforce3 years ago

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

hprotagonist3 years ago

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.

cwackerfuss3 years ago

Looks like OP is building Hazel!

cyrus_3 years ago

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

hprotagonist3 years ago

so he is!

mdrachuk3 years ago

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

throwaway4good3 years ago

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

throwaway4good3 years ago

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.
patrickyeon3 years ago

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.

+1
breuleux3 years ago
throwaway4good3 years ago

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

juki3 years ago

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)
DonHopkins3 years ago

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

+2
throwaway4good3 years ago
cyrus_3 years ago

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).

dm_0ney3 years ago

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.

code_biologist3 years ago

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...

dm_0ney3 years ago

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)

josteink3 years ago

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.

hk__23 years ago

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.

publicola19903 years ago

Smartparens is another emacs mode for structural editing as well.

jhgb3 years ago

Yep, Paredit was my first thought as well.

throwamon3 years ago

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

amitport3 years ago

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

danwills3 years ago

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?

danwills3 years ago

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

danwills3 years ago

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

dm_0ney3 years ago

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).

bookofsand3 years ago

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.

ThePhysicist3 years ago

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.

lggy3 years ago

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

jansan3 years ago

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

danwills3 years ago

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!

anigbrowl3 years ago

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.

tonetheman3 years ago

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

dmos623 years ago

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