HACKER Q&A
📣 capableweb

More “experimental” UIs for editing/writing code?


There is a bunch of editors with the traditional model of inserting text with the keyboard, arrows move the cursor around, you click around in menus/using hotkeys to perform actions (Visual Studio Code, Atom, Eclipse). Then there is the "modal" editors that have different modes where you can switch between for example "editing" or "movement" modes, and what your keyboard controls depends on the mode you're in (editors like Vim). Otherwise there is also very interactive and extensible editors, where eval basically lives within/together with the editor (Emacs, LightTable)

Otherwise, most editors fit in somewhere along those lines.

But what other editors is there out there that have something really different for editing/writing code? Things that come to mind is "editors" like Scratch where you aren't really "editing" code with your keyboard, but moving things around instead. Or, if I imagine I'd create a editor for programming controlled by a joystick, what kind of UI and UX would that editor have?


  👤 bgoated01 Accepted Answer ✓
Cursorless is an editor created for editing with voice control. It is built on top of Talon Voice and VSCode. Every token in the file is marked with a "hat," and you can refer to different pieces of your code without having to place your cursor there by stating the color/shape of the hat and the letter that the hat is above.

I started using it to help with some RSI, and honestly when I go back to a keyboard to use emacs evil mode it feels awkward compared to cursorless (other than the fact that it allows me to get out of VSCode, but that's a personal preference...).

This tutorial video gives a short taste of what cursorless is like: https://www.youtube.com/watch?v=h6lM68jU2iI And here is a link to the documentation: https://www.cursorless.org/docs/


👤 efortis
Here's a nice document with many programming interfaces by Johnathan M. Edwards

    1948 Plugboards
    1949 Keypunch
    1963 Teletype
    1970 VT05
    1980 Symbolic Lisp
    1980 Smalltalk
    1986 Boxer
    1987 Self
    1987 HyperCard
    1987 Alice Pascal
    1991 Visual Basic
    1991 AgentSheets
    1994 SK8
    1996 Squeak/eToys
    2001 Eclipse
    2003 Flash MX
    2005 Scratch
    …
    
https://docs.google.com/presentation/d/e/2PACX-1vSPuf3eQ2tlC...

👤 fragmede
If you haven't used Colab/Juypter Notebooks yet, I highly recommend you try it. It's a "notebook" style interface used a lot in data science, and it allows you to run "cells" in arbitrary order if needed. Stylized comments are well supported.

The other interesting interface I've come across is https://gibber.cc/ and https://glicol.org/ which are both music coding environments though they have slightly different UI so are both worth exploring to get a sense. What I imagine is an extension of their approach to make going from a (Python) REPL to working code more seamless. My workflow is often play in a REPL until I get it working, and then try and reconstruct the right order of code back in an editor. There's got to be a better way of going from REPL to code than that, but I've not found it yet.



👤 robto
Hazel[0] is really fascinating!

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

It's a programming language and IDE that's fully integrated with the semantics of the language. I saw the demo at Strange Loop in 2019[1], and it was really cool to see the interactive, dialogue-esque development workflow that I love from super dynamic lisps - but working with a strong, statically, dependently typed language. It reminded me of Idris, but even more integrated.

[0]https://hazel.org/ [1]https://www.thestrangeloop.com/2018/hazel-a-live-functional-...


👤 paulywog
I saw this talk, Stop Drawing Dead Fish by Brett Victor, a while back. While I don't think it's the tool you're looking for, he does a great job showing why we may want better tools than we have currently and what they might look like. https://vimeo.com/64895205/description

👤 PainfullyNormal
Have you heard of dion?

https://media.handmade-seattle.com/dion-systems/

It's still in the category of "inserting text with the keyboard", but the underlying representation of the "program" isn't raw text. The text is just a user interface for a more complicated representation.


👤 tjchear
This is not what you're asking for, but I think city as a visual metaphor for certain class of programs could work. Imagine literal factories for manufacturing certain class of objects, highways and roads to represent connections between component buildings, warehouse as databases or storage, office buildings as manager objects, etc and code editing is just moving buildings around (probably hard to do fine grained editing, as you'll need metaphor or abstraction at a different level). Vehicles are literally rpc calls or data packets. If something's breaking, it can be depicted as traffic jams or accidents or billowing smoke from a building.

Now attach a VR headset and controller. Even people without engineering training could do high level administration or editing.


👤 allday
This thought crosses my mind a lot too. When we're working with code, we're shaping information into structures and patterns. And so our brains are tasked with translating those structures and patterns into text, making sure that text is written exactly right, and reconciling the difference in the observed output of structures and patterns with the text we've written. What if we could stay at that higher level of abstraction?

My de facto example of this that I keep coming back to is syntax highlighting. It's immensely useful, and yet once you get used to it, the brain is able to skip the (conscious) step of breaking it down e.g. "this text is green so it means it is a function name, so the next text should be blue because they are function parameters", etc. It's more like "okay, green, blue, bunch of stuff between the braces, checks out". Indentation, squiggly line error highlighting, etc. all serve a similar purpose. They rely on our minds' fundamental ability to recognize visual patterns without having to fully process them through our language centers.

So I feel like there is a huge unexplored space there for more efficient and natural programming. VR with 3D representations of code as, I dunno, pipes, gears, something like that? Function declarations in specific colors and then call sites in mixed colors when one function is called from another? Anything to reduce the friction from thought to working software without having to worry about syntax.

This is all very abstract and I probably haven't explained it well, but it's one of those things I can't shake because I'm fairly sure there's something there.


👤 cloudmike
JetBrains MPS [0] is worth a look for inspiration. Like some of the other projects mentioned here, it's an editor on top of an Abstract Syntax Tree. You can use it to make DSLs that have different UI/UX projections.

I'm not sure anyone's actually using it, but there are some good ideas in there.

[0] https://www.jetbrains.com/mps/


👤 bartimus
I one time did a project entirely in notepad. Not notepad++. But the standard notepad that comes with Windows. It was a time when I got tired of frameworks and IDE's that come and go and try to offer things more conveniently. Again having to learn about some new kid on the block. Having to depend on 3rd parties. I wanted everything to be vanilla.

What's interesting is how this forces you to think carefully about structuring your files, folders and code. It also allows you to leverage the Windows files explorer and have your code opened in multiple windows.

I'm now using VS Code. I hate how the file explorer jumps around when closing a tab (because it tries to select whatever other tab becomes visible). VS Code also doesn't allow me to easily open my files in multiple windows. Meanwhile we have browsers that allow us to freely open windows or tabs.


👤 marttt
Not exactly "experimental", considering the Unix heritage, but -- line editors.

"I've seen [visual] editors like that, but I don't feel a need for them. I don't want to see the state of the file when I'm editing." -- Ken Thompson, on the superiority of ed to visual editors. Summarized by Peter Salus in A Quarter Century of UNIX (Addison-Wesley, 1994).

Definitely a blast from the past, but I do think line editors may force one to write simpler programs -- or to think in smaller chunks, as opposed to (doom)scrolling or moving about incrementally on a large screen. Who knows, maybe the line editing approach is making a comeback of sorts, with people figuring out how to write code using tablets, smartphones, RasPi-based low-powered devices, etc. Maybe we will start re-thinking the (possible) mental benefits of smaller screens / viewing less lines of text or code at a time.

Rob Pike's sam editor has an interesting command language. You're not limited to thinking in "lines" as in ed or sed; rather, the whole file is a giant string that you manipulate using regular expressions, external pipes, etc: http://doc.cat-v.org/bell_labs/sam_lang_tutorial/sam_tut.pdf

In the light of the OP's question, I suppose Pike's "structural regular expressions" are the keyword here (explained in the above linked paper). It is a paradigm worth pointing out; also used later in screen-oriented editors like vis.

sam's predecessor, qed, is also interesting, extremely powerful, but it seems to have a much steeper learning curve. I have used sam quite a bit, but not qed. https://github.com/phonologus/QED/raw/master/doc/qed-tutoria...


👤 jph
Experimental UIs for editing/writing code that I would love to see:

1. Highlight code interrelations. Example: click in a function, and the UI displays related code, along with indicators of the timing of relation (e.g. caller vs. callee), type of relation (e.g. override v. delegate v. strategy), strength of relation (e.g. 80% of the time function "f" is called, then function "g" is called), etc.

2. Collaborate on code reviews. Example: when I do a pull request, then I want to see my team's comments within my typical editor, within my real source code, rather than in some project management tool or some git hosting web page.

3. Make it much easier to write good documentation by automating feedback. Example: when anyone in the world uses my open source, and it doesn't work the way it's documented, then make it easy for the user to provide diagnostics directly to the section of code that's having the issue, suitable for triage by me.


👤 khitchdee
Here is an editor for C I'm in the process of writing with a Modal, keyboard-only interface. It features a 3 column source code display format which is different from the traditional single column format. Also, there are on-screen controls such as menus, toolbars, navigation windows etc. The entire screen is used to display source code and keystroke sequences are used for navigation. In particular code folding is very efficient. https://github.com/Rohit-Agarwal-Khitchdee/Modal-GUIs

I've defined a couple of source code navigation constructs above the language level that are embedded inside comment blocks.

While I've written this editor for my own use, I've made it available as an open-source repository Github. It is experimental. The source code is well documented and easy to modify for your own purposes.


👤 gbrown_
I came across tylr the other week which looks very interesting. Probably easiest to watch this video[1] first then play with the demo and read the paper [2][3].

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

[2] https://tylr.fun/

[3] https://tylr.fun/essay


👤 SilvanCodes
Have you heard of the Unison Codebase Manager (ucm)? In Unison (https://www.unison-lang.org/) all code is stored as its AST and then you can 'chat' with ucm asking it for specific type signatures for example. Also the text you write as code really is just an intermediate representation and theoretically ucm could give you all sorts of different views on your code.

👤 jonjacky
Light Table [1,2] attracted a lot of attention here [3] several years ago. The author went on to make another system called Eve [4].

1. https://en.wikipedia.org/wiki/Light_Table_(software)

2. https://github.com/LightTable/LightTable

3. https://hn.algolia.com/?q=light+table

4. https://hn.algolia.com/?q=eve+chris+granger



👤 themodelplumber
I like it...

Joystick, pedals, rudder controls, driving a constantly-forking code prediction interface on screen which is helping determine your next line of code based on where you drive or fly. Thinking about PilotWings, where you have targets, but you can choose between them.

Each drive or flight is a context, IOW the area inside the brackets / indentations in your editor. Switch contexts very, very fast using something like even holding down a joystick button and moving the joystick, for example. So you'd have all these environments to fly in, and they could even be generative, unfolding as the code characteristics specialize.

Bonus, attach a big knob somewhere, like on the joystick, for timeline control, which would be like undo / history. What do they call this thing on old video editors? Seeker? Spinner? I forgot.

But this is just using one metaphor, in a very on-the-nose sort of way. I'm sure there are tons of different ways to go...

...like sometimes I wish I had a foot control that would recognize the cadence of my feet moving and use that for workspace (mind) suggestion, direction, and control. Ah well, maybe in the future.

Interesting q! No matter what you do, it'd suck in some ways, but it would also have some advantage, some unique thing, and IMO that's the really interesting part. Like maybe the joystick tool I described would be best for prototyping or scaffolding or who knows what.


👤 smoldesu
There's definitely a world of no-code/low-code platforms, and if you're working purely with data then it might be effective. Node-based programming is readily available in certain other fields as well (Blender does this for shader programming, as do some game engines).

As for "real world" proliferation of these tools, I'm not sure I'd get my hopes up. Compiling code is ultimately about moving things from one text format to another, so having direct control over your input/output is integral to working quickly. One might even suggest that having so many keys on a modern keyboard contributes to how much entropy the average programmer can generate in a short period of time.

I think the real boon is going to be more visual, interactive debugging going forward. Modern resources like LLVM seem underutilized to me, and as we improve LSP support for IDEs we're going to end up with really robust tooling. We're headed towards a paradigm shift in programming, with safer abstractions and more opinionated syntax. These are good changes, but I think our tooling will largely adapt around those concepts rather than WYSIWYG/drag-and-drop editors.


👤 pella
- like https://www.liquidtext.net/ for program codes ?

- or Flow-based programming ? --> https://github.com/topics/dataflow-programming


👤 t-3
It's not general purpose, but colorforth has a really weird and different editor. Coloring words "types" the word (definition label, compiled, immediate, comment, etc), which allows the language and compiler to be dead simple. It really makes me wonder why modern languages aren't designed with IDEs in mind - instead of loading the syntax with complexity, separate it out into the fancy editor layer! Color/text formatting is probably not the best paradigm, but the potential of editor-first language design hasn't really been explored anywhere near as far as it deserves.

As far as conventional editors go, I'm a big fan of vis. Multiple cursors, structural regex, and vi keybindings are just too nice to give up.

https://github.com/martanne/vis


👤 wwilim
https://gtoolkit.com/ - this is a tool optimized for - as the creators say - "figuring things out", ie. exploration and code reading

👤 samsquire
I wrote a living document interface. Nowadays it's probably similar to notion.

The idea was you could write code into it and see all the data structures of the code you wrote. There's a screencast and the code is available but broken. It's written in Angular 1. There was a cool feature where you could select different things on the screen for searching for an operation for them to merge them together.

Screenshots of version 1 (Jena fuseki, sparql, d3)

https://camo.githubusercontent.com/3064a94d00812c1373c4eb3b2...

Screenshots of version 2 in this document (angular, couchdb, pouch, paperjs, masonry, ruby, python, javascript) https://github.com/samsquire/liveinterface

Links to screencast https://github.com/samsquire/ideas#4-living-documents


👤 disqard
I created a text-free visual programming language where the program is specified using Programming By Demonstration.

It's called BlockStudio (https://www.blockstud.io) and other people have used it to make some nice little games and animations:

https://blockstud.io/profile/15572


👤 faebi
Our team is using a homemade time planning tool. In the past it used to be an excel, these days it‘s an app. Each member had two rows (morning/afternoon). Each column is a date. The team filled it out using background colors. Each color represented a category like holidays, ill, onsite etc. One easily gets an overview of the whole team while providing all the details. At some point you run out of colors since the shades are too similar. We added custom patterns with mixed colors for each category.

In text editors we are stuck at text, these days with a few colors. There are barely any shades of color, no background colors or even patterns at all. The maximum is usually a TODO: which gets a yellow background. It think there is still a lot of colors, patterns and shades to explore to create more of an information dense image than a book. Animation is yet another beast.

Another thing missing in todays editors are logical connections. We define methods, but there is no visual hint where they are called from. Files are still displayed as trees instead of networks. Clearly defined interfaces would show up unless we have the classic spaghetti code.



👤 buescher
Labview (1986) and Simulink (1990 or thereabouts) for graphical dataflow programming. For oss and IoT, node-red looks nice but I haven’t used it.

Notebook interfaces - Mathematica has had one forever (1988) and still leads. For oss, everyone seems to like jupyter more than I do.

For low-code/no-code rdbms CRUD prototyping, Microsoft Access (1992).


👤 afloyd
plan9's ACME is interesting how its mostly traditional except for both the mouse-chords and the part that its also a shell. also a window manager. and a file manager.

at one point there was plans to add graphics capabilities to truly turn it into a window manager but well, those never came to be.


👤 catlifeonmars
I recently discovered the Apple Numbers formula editor UI. It’s surprisingly minimal and nice, it does a good job blending text editing and visual blocks. It’s somewhat reminiscent of scratch or blockly IMO.

Edit: adjust autocorrect spelling choices


👤 wes-k
https://gtoolkit.com/

I haven’t fully wrapped my head around this. It’s a moldable editor where different types of data can each have their own view.


👤 gibb0n
I think about this all the time, it seems to primitive to still just be editing text files. Our monitors are much larger and at a higher definition, and capable of advanced 3D effects.

👤 crowdhailer
I've been building a strongly typed language and structural editor. The idea is to develop both to get the quickest editing experience. Having a really small language has made it easier for the editor to have a small set of commands for updating the program.

https://petersaxton.uk/log/ Week 1 & 2 I mostly introduce the structural editor, later updates have been more about language development


👤 dschuessler
I have no experience with it but you made me remember Enso (previously known as Luna).

https://enso.org/language


👤 fuzzythinker
Some good ones pops up in Projectional Programming [1] once in a while. The pinned thread links to the structure-editors github list [2] too.

[1] https://www.reddit.com/r/nosyntax/

[2] https://github.com/yairchu/awesome-structure-editors


👤 TheTaytay
I don’t know that this is exactly what you mean, but games that come with editors often push the boundaries here a bit because their domain is limited and their audience is not (initially) expert. The Warcraft III editor was essentially spitting out Scripting engine functions under the hood, but the UI presented it much more approachably. I am sure modern equivalents do this even better, but I remember being impressed by that one back in the day.

👤 ilrwbwrkhv
Natto.dev is one of my favourites.

👤 qwertyzxcvmnbvw
Check out the moldable tools idea, e.g. Tudor Girba's https://gtoolkit.com/

👤 ellis0n
AnimationCPU is a new live coding platform with code/no-code IDE. This demo video https://vimeo.com/manage/videos/732098541 and some details https://news.ycombinator.com/item?id=32181251

👤 wodenokoto
Ever since I started learning Borland Delphi as an early teenager I’ve had this idea of an IDE where every function lives as its own entity (maybe like a card) and in the editor is connected to all functions that it call and all functions that call it and I suppose the whole editor must be a giant graph/mind map.

It’s not a very well developed idea, dispute it having floated somewhere in my head for over two decades.


👤 mentos
Check out Unreal Engine visual scripting using blueprints

👤 msaltz
I’ve always thought https://enso.org/ looked cool. It’s a functional language that has both a text representation and a visual representation as a graph that you can edit directly. I still haven’t played with it much though

👤 kirillrogovoy
I've made a UI editor for React that allows you to edit any element visually but commits changes right to your code the same way you'd do it with a code editor.

https://github.com/impulse-oss/impulse


👤 smartmic
The Sam Text Editor

http://sam.cat-v.org/


👤 throw_away_hn
There was a recent twitter thread on this. [1]

Check the replies to find people building stuff:

[1] https://twitter.com/threepointone/status/1555851417604300800


👤 danhab99
I've been struggling with what a touch based IDE for my galaxy tab4. Right now I'm thinking about showing a drawer with token suggestions written on color coded chips. Right now I'm struggling with packing an LSP into an Android app.

👤 uprun
https://uprun.github.io/lisperanto/ - an in-browser AST editor with instant evaluation and code on canvas

👤 antioppressor
Nothing new in the past 20 years, everyone is copying someone else and doing minimal changes and sell it as "NEW" and "REVOLUTIONARY" editor.

Same zero innovation area just like browsers.


👤 cpach
One alternative interface could be pen and paper. I’ve used it a lot, but mostly when I was learning to program, these days, not so much.

👤 youamericanloo
how far away the Blender Node Editor from being full fledged coding UI? is that easy to make it?

👤 mhh__
I just recently witnessed a demo of a structured functional language called lamdu.

👤 4silvertooth
Not an editor but I've seen people do crazy things on Minecraft.

👤 tpoacher
Gnu ed.

Ed is the standard editor.


👤 scombridae
Those who cannot form a complete sentence resort to grunting and body language.

When you learn to code, you'll have many fine text editors to choose from.