TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Treefrog: A code editor that uses both AST and text editing commands

114 pointsby gushogg-blakeover 3 years ago

24 comments

gushogg-blakeover 3 years ago
Backstory - I started experimenting with AST editing ideas after getting frustrated with my editor&#x27;s lack of understanding of the structure and meaning of code, ie. the editing primitives all dealt with text and simple changes to the code often required repetitive manual text edits that had nothing to do with the meaning of the change. I went through a couple of prototypes and landed on the idea of augmenting a standard editing interface with a new mode that works on a simplified representation of the structure, which basically follows indentation levels - blocks of code like functions, loops, etc, can be moved and manipulated as units, and there are specific editing commands for the different elements.<p>The main idea is to design all of the editing and navigation commands around the thought processes (instead of designing around a data structure, which I think is where traditional editors have gone wrong), so that it feels natural and intuitive to use - like something that&#x27;s been designed for what editing code actually involves, as opposed to a text editor that&#x27;s had lots of code intelligence stuff added on top of it.
radford-nealover 3 years ago
I wrote a tree editor for programs for my Master&#x27;s thesis, in 1980. You can get it at <a href="https:&#x2F;&#x2F;www.cs.toronto.edu&#x2F;~radford&#x2F;MSc-thesis.abstract.html" rel="nofollow">https:&#x2F;&#x2F;www.cs.toronto.edu&#x2F;~radford&#x2F;MSc-thesis.abstract.html</a><p>The editor operates on the AST down to the lowest level, with careful design of keyboard input and cursor feedback to make that not too painful for things like infix operators. The language is described by a grammar, and there is an AST macro language.<p>My conclusion afterwards was that the shift at that time away from keyboard input towards editing with a mouse was negative for editing in terms of the AST (rather than text), since with AST editing there&#x27;s a less direct connection between seeing and pointing and what you&#x27;re editing. I got interested in other things.<p>But perhaps that was a premature conclusion.
评论 #29812410 未加载
评论 #29812630 未加载
dehuggerover 3 years ago
An explanation of what AST actually means would be helpful at the top of the intro page. Quite of a few of the selling points were lost on me due to lack of familiarity with the term. I can (and will) google it, but if I am looking at a new product, especially one I have to buy, it&#x27;d be nice to have the resources available to understand what it offers without turning to a third party.
评论 #29813017 未加载
NeutralForestover 3 years ago
Interesting, there&#x27;s been an [ongoing discussion to use tree-sitter with Emacs](<a href="https:&#x2F;&#x2F;archive.casouri.cat&#x2F;note&#x2F;2021&#x2F;emacs-tree-sitter&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;archive.casouri.cat&#x2F;note&#x2F;2021&#x2F;emacs-tree-sitter&#x2F;inde...</a>) because right now, syntax highlighting is a mix of regex and functions.<p>I don&#x27;t how language parsing should be exposed to make it easy to have parsing in editors. But I believe some efforts like tree-sitter are most welcome and also more inline with what we expect editors to be.
评论 #29815086 未加载
评论 #29812006 未加载
luckystarrover 3 years ago
There has been a movement to try something like this under the buzzword &quot;projectional editing&quot;. The idea was to edit a representation of the code and not the code itself. People and companies experimented with it but didn&#x27;t get much adoption. Not sure why.<p>Perhaps you need to allow the developers to reach invalid states, because the editors I tried just refused entries which would result in a syntax violation. This is harder to implement though. :)
评论 #29812439 未加载
tekknolagiover 3 years ago
This looks broken for me -- nothing loads on the homepage and I get some JS errors. I am on Firefox on macOS.
评论 #29819920 未加载
ngvrndover 3 years ago
I vaguely remember someone telling me, a long time ago, that Thomas Reps&#x27; PhD thesis<p>(<a href="https:&#x2F;&#x2F;ieeexplore.ieee.org&#x2F;book&#x2F;6267325" rel="nofollow">https:&#x2F;&#x2F;ieeexplore.ieee.org&#x2F;book&#x2F;6267325</a>)<p>showed that it wasn&#x27;t practical to build this kind of editor. Perhaps that was not at all the point; it was a long time ago.<p>I wonder, though, can anyone explain 1) if Reps&#x27; thesis does bear on the Treefrog work 2) what it was in Reps&#x27; thesis that bears on the difficulty of making syntax-tree based code development tools?
评论 #29813682 未加载
sweetsocks21over 3 years ago
The S,D shortcuts work for me, but I can&#x27;t get J or K to do anything? Some UX feedback on what is valid at the current time may be useful. One problem with structural&#x2F;projection editors is it&#x27;s not as clear what is a valid operation in the current state.<p>There&#x27;s some existing work in this area you might find interesting as well:<p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;dm_0ney&#x2F;status&#x2F;1414742742530498566" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;dm_0ney&#x2F;status&#x2F;1414742742530498566</a><p><a href="https:&#x2F;&#x2F;hazel.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hazel.org&#x2F;</a><p><a href="https:&#x2F;&#x2F;hazel.org&#x2F;build&#x2F;dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hazel.org&#x2F;build&#x2F;dev&#x2F;</a> (expand the left side pane by clicking the (?) to see the valid operations)
评论 #29813295 未加载
TylerJewellover 3 years ago
Clever line of thinking.<p>Is it fair to think of IDEs that include language-specific refactoring capabilities as a providing a developer abstraction over AST editing?
评论 #29811730 未加载
rajandattaover 3 years ago
Intriguing idea. This would be very interesting to try with a Lisp or Scheme like language. Does it have any support for S-exp based languages?
评论 #29817906 未加载
评论 #29814968 未加载
评论 #29807232 未加载
评论 #29812026 未加载
评论 #29817578 未加载
bytewareover 3 years ago
maybe related? <a href="https:&#x2F;&#x2F;www.jetbrains.com&#x2F;mps&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.jetbrains.com&#x2F;mps&#x2F;</a>
thomasikzelfover 3 years ago
Some feedback on the actual implementation:<p>- I cannot reach inside if and while statements using tree mode<p>- It is not clear which lines are available for refactorings<p>- dragging a line reveals &quot;+ If&quot; and &quot;+ else if&quot; under an if statement. Dropping the line onto it does not work.<p>- tree based moving does not move the viewport<p>About the business side of it:<p>I think it will be hard to create a whole editor just for these features. I know that Jetbrains editors also have ast aware refactorings and I often use moveBySymbol in sublime text which acts a lot like your tree navigation. I think it makes more sense to create this as a plugin, but it will be difficult to monetize that.<p>Anyway I applaud you for creating something that actually works!
评论 #29822746 未加载
catskul2over 3 years ago
The features I&#x27;ve always dreamed about from an AST aware editor was shell-like functionality where operations to rename, move, copy, create, etc were akin to file manipulations done on the command line. At one point I was thinking about the possibility of FUSE-ifying(<a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Filesystem_in_Userspace" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Filesystem_in_Userspace</a>) some code so that a normal shell could be used. Any chance of shell-like functionality from treefrog?
评论 #29814225 未加载
评论 #29814489 未加载
int_19hover 3 years ago
The text in the editor is blurry - looks like it&#x27;s rendered at a lower resolution, and then upscaled with bilinear filtering.<p>(This is on a 4K display running Win11 with UI scale set to 200%)
评论 #29814240 未加载
hackinthebochsover 3 years ago
One pet peeve of mine that this kind of editor might be able to address is how live compilation is sketchy when you&#x27;re actively editing a file. For example when you&#x27;re in the middle of an edit and you end up with a huge number of compilation errors because the parse of the file is in flux. Having the editor and the syntax parser aware of each other can help fix such issues.<p>Semantic merging would also be a nice feature.
danielvaughnover 3 years ago
I remember watching a talk about this, the performance improvement was staggering. Would be cool to see a big vendor like VSCode use it.
eatonphilover 3 years ago
The scroll is really hard to use on my macbook. I can&#x27;t scroll slowly enough. It moves massively up and down with each scroll even when I am very careful.
评论 #29807148 未加载
评论 #29807335 未加载
iddanover 3 years ago
This is the future of programming. Code isn’t (just) text, it’s a tree and we can edit it in a much more elegant way utilising it’s structure
winter_blueover 3 years ago
A quick note: the editor looks blurry&#x2F;low-res on a 4K monitor (and I would guess, probably on other high-res displays as well).
评论 #29813728 未加载
sesmover 3 years ago
What are hypothetical benefits of using this versus Webstorm&#x2F;Intellij with Vim mode?
评论 #29812380 未加载
评论 #29815664 未加载
catskul2over 3 years ago
Any chance of opensourcing this?
评论 #29812751 未加载
leecommamichaelover 3 years ago
IDE-features like “Refactor” are my idea of how this kind of editing already exists.
svilen_dobrevover 3 years ago
some notes:<p>* ctrl-home&#x2F;end do not go to very top&#x2F;bottom<p>* python tree-mode does not do anything sensible
billconanover 3 years ago
the project page doesn&#x27;t anything about supported languages ?
评论 #29813767 未加载