5 ms·

Pantograph: A Fluid and Typed Structure Editor

87 points by rybla 2y ago

rybla 2y ago
Pantograph is a new kind of structure editor where you directly edit a typed program. In order to accomplish this, it introduces a new kind of selection -- tree selection -- and a automatic typed refactoring system. The link is the Pantograph tutorial. Follow the [about] link from the tutorial for more information on Pantograph's implementation and published formalization.
- deleted 2y ago
  [deleted]
- Yoric 2y ago
  That is nice! Would this work well with weirder type-based features, such as typeclasses, regions, etc?
  - rybla 2y ago
    Thanks! We're working on extending the system to support more advanced type systems. In theory, the current system could already support these kinds of features (but not in quite as slick a way as modern languages, most likely), but it would be very cumbersome, so the work is in trimming down the formalization and taking advantage of new abstractions. Check out the implementation for a look at how defining the actual language (and typing rules) works currently https://github.com/jeprinz/pantograph/blob/main/src/Language/Pantograph/Specific/Currying.purs https://github.com/jeprinz/pantograph/blob/main/src/Language...
onemoresoop 2y ago
I like the idea. Reminds me of a talk about syntax editor in racket but I forget what it was named. What languages can pantograph support?
- makizar 2y ago
  (ninth RacketCon): Andrew Blinn - Fructure: A Structured Editing Engine in Racket https://youtu.be/CnbVCNIh1NA?si=JZxjUdTLbBp6IEaK https://youtu.be/CnbVCNIh1NA?si=JZxjUdTLbBp6IEaK
  - onemoresoop 2y ago
    Yes, this is it!! Thanks
- rybla 2y ago
  Currently, we've only instantiated the system for the simply-typed SML-like language that you can use in the tutorial (https://pantographeditor.github.io/Pantograph https://pantographeditor.github.io/Pantograph). Going through that tutorial will also give you a tour of the language features in there. The next phase of work is on instantiating more complicated languages and type systems, to see how the framework can be extended. In theory, a lot (such as the entirety of SML) could be instantiated currently, but it would be quite cumbersome (here's what the implementation of the currently instantiated language looks like https://github.com/jeprinz/pantograph/blob/main/src/Language/Pantograph/Specific/Currying.purs https://github.com/jeprinz/pantograph/blob/main/src/Language...). So we're working on trimming down the formalism and developing new abstractions to make things easier, and to support some more advanced typing systems that actually would have problems with the current system.
conartist6 2y ago
Super cool work! I'm always excited and a little terrified to see other people who share my sensibilities about which direction is forward in code editing : )
- conartist6 2y ago
  I'm taking my own stab at the same problem over in this org: https://github.com/bablr-lang/ https://github.com/bablr-lang/. It makes my head spin seeing the problem domain expressed in such a different way!
  - rybla 2y ago
    Looks interesting, but I'm having trouble finding where to start reading about what's involved. Do you have a suggestion?
    - conartist6 2y ago
      I keep trying to write docs but then I also keep making them out of date. The idea is that instead of each author of a tool like Pantograph building its own system of language support, (with each language author having to build support for each tool) our hope was that we could design some set of data structures, APIs, and capabilities which would allow a proper frontend/backend divide between languages and the the tools which consume their definitions. The best place to get started is to see how CSTML works in the playground: https://bablr.org/playground https://bablr.org/playground. It's meant to be a self-describing format. It can be streamed, and we have a btree-backed storage format for it that makes incremental editing of immutable trees a breeze.
- deleted 2y ago
  [deleted]
rybla 2y ago
Would anyone use this for real programming, if it supported your favorite programming language? I know "supported" is a loaded word there, but just take that to mean: supports all the basic edits you need, in composition, to make any complex edit, but not fancy refactors or fancy language-specific stuff.
- layer8 2y ago
  Features like the mentioned tree selection do make sense. But I prefer tools to be more like a library than a rigid framework. Give me the ability to perform powerful transformations, but don’t put me in a straightjacket that disallows non-well-formed intermediate states.
  - TuringTest 2y ago
    You might enjoy the experimental editor Lapis. This Pantograph somewhat reminds me of that lightweight structure editor, though Lapis is able to find regularities on the fly without a need to follow a perfect tree structure, just by finding bottom-up syntax of language elements (mostly HTML and basic data types). https://en.wikipedia.org/wiki/Lapis_(text_editor) https://en.wikipedia.org/wiki/Lapis_(text_editor) (Look at the links for an archived download page)
- schube 2y ago
  I absolutely would. I feel like the text editing ecosystem is slowly inching towards this anyway with incremental improvements: - Thanks to formatters like gofmt and prettier when I edit code I can do so with exactly zero concern for spacing, new lines, alignment, indent, etc. Close to structure editors where, in my understanding, the way code is stored and the way it is presented may be completely independent. - Mass-renaming like what is provided by LSPs and other refactoring tools also go in this direction of thinking about symbols and their identity, rather than their text name. - Tree-sitter lets traditionally text-oriented tools be re-created to be structure-aware, for example difftastic for diffs or ast-grep for structured search-and-replace. I didn’t quite understand how the structure editor shown here works with types though, and though I’d love to edit my Typescript in a structure editor that just couldn’t work if my inputs got delayed by the Typescript type system figuring things out. I would take enforced type correctness if it can be instant, but I’d still use structure editing without type awareness.
rybla 2y ago
Try Pantograph online: https://pantographeditor.github.io/Pantograph/ https://pantographeditor.github.io/Pantograph/
nikolay 2y ago
This is like what Chime [0][1] did, but it seems dead now, unfortunately. [0]: https://www.chimehq.com/ https://www.chimehq.com/ [1]: https://github.com/ChimeHQ/Chime https://github.com/ChimeHQ/Chime
- deleted 2y ago
  [deleted]
yellowapple 2y ago
License?
- rybla 2y ago
  Thanks for the catch, added

87 points by rybla 2y ago

Pantograph is a new kind of structure editor where you directly edit a typed program. In order to accomplish this, it introduces a new kind of selection -- tree selection -- and a automatic typed refactoring system. The link is the Pantograph tutorial. Follow the [about] link from the tutorial for more information on Pantograph's implementation and published formalization.

deleted 2y ago
[deleted]
Yoric 2y ago
That is nice! Would this work well with weirder type-based features, such as typeclasses, regions, etc?
- rybla 2y ago
  Thanks! We're working on extending the system to support more advanced type systems. In theory, the current system could already support these kinds of features (but not in quite as slick a way as modern languages, most likely), but it would be very cumbersome, so the work is in trimming down the formalization and taking advantage of new abstractions. Check out the implementation for a look at how defining the actual language (and typing rules) works currently https://github.com/jeprinz/pantograph/blob/main/src/Language/Pantograph/Specific/Currying.purs https://github.com/jeprinz/pantograph/blob/main/src/Language...

onemoresoop 2y ago

I like the idea. Reminds me of a talk about syntax editor in racket but I forget what it was named. What languages can pantograph support?

makizar 2y ago
(ninth RacketCon): Andrew Blinn - Fructure: A Structured Editing Engine in Racket https://youtu.be/CnbVCNIh1NA?si=JZxjUdTLbBp6IEaK https://youtu.be/CnbVCNIh1NA?si=JZxjUdTLbBp6IEaK
- onemoresoop 2y ago
  Yes, this is it!! Thanks
rybla 2y ago
Currently, we've only instantiated the system for the simply-typed SML-like language that you can use in the tutorial (https://pantographeditor.github.io/Pantograph https://pantographeditor.github.io/Pantograph). Going through that tutorial will also give you a tour of the language features in there. The next phase of work is on instantiating more complicated languages and type systems, to see how the framework can be extended. In theory, a lot (such as the entirety of SML) could be instantiated currently, but it would be quite cumbersome (here's what the implementation of the currently instantiated language looks like https://github.com/jeprinz/pantograph/blob/main/src/Language/Pantograph/Specific/Currying.purs https://github.com/jeprinz/pantograph/blob/main/src/Language...). So we're working on trimming down the formalism and developing new abstractions to make things easier, and to support some more advanced typing systems that actually would have problems with the current system.

conartist6 2y ago

Super cool work! I'm always excited and a little terrified to see other people who share my sensibilities about which direction is forward in code editing : )

conartist6 2y ago
I'm taking my own stab at the same problem over in this org: https://github.com/bablr-lang/ https://github.com/bablr-lang/. It makes my head spin seeing the problem domain expressed in such a different way!
- rybla 2y ago
  Looks interesting, but I'm having trouble finding where to start reading about what's involved. Do you have a suggestion?
  - conartist6 2y ago
    I keep trying to write docs but then I also keep making them out of date. The idea is that instead of each author of a tool like Pantograph building its own system of language support, (with each language author having to build support for each tool) our hope was that we could design some set of data structures, APIs, and capabilities which would allow a proper frontend/backend divide between languages and the the tools which consume their definitions. The best place to get started is to see how CSTML works in the playground: https://bablr.org/playground https://bablr.org/playground. It's meant to be a self-describing format. It can be streamed, and we have a btree-backed storage format for it that makes incremental editing of immutable trees a breeze.
deleted 2y ago
[deleted]

rybla 2y ago

Would anyone use this for real programming, if it supported your favorite programming language? I know "supported" is a loaded word there, but just take that to mean: supports all the basic edits you need, in composition, to make any complex edit, but not fancy refactors or fancy language-specific stuff.

layer8 2y ago
Features like the mentioned tree selection do make sense. But I prefer tools to be more like a library than a rigid framework. Give me the ability to perform powerful transformations, but don’t put me in a straightjacket that disallows non-well-formed intermediate states.
- TuringTest 2y ago
  You might enjoy the experimental editor Lapis. This Pantograph somewhat reminds me of that lightweight structure editor, though Lapis is able to find regularities on the fly without a need to follow a perfect tree structure, just by finding bottom-up syntax of language elements (mostly HTML and basic data types). https://en.wikipedia.org/wiki/Lapis_(text_editor) https://en.wikipedia.org/wiki/Lapis_(text_editor) (Look at the links for an archived download page)
schube 2y ago
I absolutely would. I feel like the text editing ecosystem is slowly inching towards this anyway with incremental improvements: - Thanks to formatters like gofmt and prettier when I edit code I can do so with exactly zero concern for spacing, new lines, alignment, indent, etc. Close to structure editors where, in my understanding, the way code is stored and the way it is presented may be completely independent. - Mass-renaming like what is provided by LSPs and other refactoring tools also go in this direction of thinking about symbols and their identity, rather than their text name. - Tree-sitter lets traditionally text-oriented tools be re-created to be structure-aware, for example difftastic for diffs or ast-grep for structured search-and-replace. I didn’t quite understand how the structure editor shown here works with types though, and though I’d love to edit my Typescript in a structure editor that just couldn’t work if my inputs got delayed by the Typescript type system figuring things out. I would take enforced type correctness if it can be instant, but I’d still use structure editing without type awareness.

rybla 2y ago

Try Pantograph online: https://pantographeditor.github.io/Pantograph/ https://pantographeditor.github.io/Pantograph/

nikolay 2y ago

This is like what Chime [0][1] did, but it seems dead now, unfortunately. [0]: https://www.chimehq.com/ https://www.chimehq.com/ [1]: https://github.com/ChimeHQ/Chime https://github.com/ChimeHQ/Chime

deleted 2y ago
[deleted]

yellowapple 2y ago

License?

rybla 2y ago
Thanks for the catch, added