Custom Glitch editor with file tree, mobile friendly

last thread: CodeMirror 6 and modern xterm.js for Glitch. That means better mobile support

Project URL: https://gossamer-fanatical-mice.glitch.me/

I’m working on making a suite of mobile-browser-friendly Glitch tools. Previously I showed off a file editor based on CodeMirror 6 and a terminal based on xterm.js.

This time, I’ve added:

  • a file tree, live updating, and with a whole heck of a lot of operations available:
    image
  • CodeMirror’s built in language support, including syntax highlighting:
    image
  • ability to open files in subdirectories:
  • and internally, I’ve set up the codebase with a jsconfig.json so I can use tsc to detect problems:
    Screen Shot 2024-05-07 at 22.18.59
    pictured: reenactment of a real bug that typescript helped me find. also pictured: me actually being pretty risky because if I break the editor I have to use the normal Glitch editor to fix it

It’s pretty usable now. I did most of the file tree programming in this project itself.

5 Likes