Treefrog

editor

Most editors are designed to edit text
Treefrog is designed to edit code

Read more in the introductory blog post and on Hacker News

Tree Mode

Navigate your code's syntax tree with your keyboard, and manipulate the nodes with your mouse.

A screenshot of the Treefrog editor in darkmode.

Spatial Editing

Moving something is a single drag-and-drop. No need to draw a selection around it first.

Open Web Editor

“The future of programming”

- Hacker News anon

Treefrog editor is an intuitive and ergonomic interface for expressing ideas with code.

User interactions are explicitly designed around the following types of thought process:

  • Drafting

    Prose-like thought processes where the code is written and thought about mostly as a sequence of logical and declarative statements. This is well accommodated by traditional code editors – and Treefrog's normal mode – with features such as snippets and auto-complete.

  • Editing

    Having a dedicated mode for syntax-aware navigation and selection opens up new possibilities for making the selection process faster and more intuitive. For example, with an if statement selected, the command to change the condition could be simply cc ("change condition").

  • Spatial

    When your editor understands your code, you can drag-and-drop code naturally, reducing multiple steps into one intuitive motion. Spatial awareness is key when minimizing friction between your ideas, and your work.

  • Refactoring

    Most editors add these features on top of a standard text editing interface, behind context menus or less-ergonomic key combinations. Treefrog editor has context-aware refactoring built into its core.