ViperIDE: MicroPython Web IDE

[vshymanskyy]

Over some weekends, I created a MicroPython IDE that works directly in the browser using WebSerial, WebUSB and other technologies.

• No software installation required (except the Chrome browser), works out of the box
• Direct USB / Serial connection works on Windows, MacOS, Linux, Android, Chromebook
• WebBluetooth - tested, mostly works with Nordic chips
• WebSocket/WebREPL - works, even on iOS
• Covers most of the functionality of mpremote
• Python code tools like linter, formatter, minifier
• MPY disassembler
• and much more!

Try it

Online IDE: viper-ide.org

Source code: https://github.com/vshymanskyy/ViperIDE

---

Tip

mpremote is a great tool for automation. Learn to use it!

[FK-sauve]

Hi, i test your web ide in M$ Win 10/11
Edge (Microsoft Edge for Business Version 125.0.2535.79 , the most use OS/nav by people. Just a little thing, when i run code via interpreter console i have to submit (enter key) four time. Most command seems to be OK (open/write/modify) is perfect, connect to usb com with Jtag port = OK. So, please tell me what kind of return you need! Thank for this litle IDE, i immediately love it !

while i < 10:
... print(i)
... i = i + 1 (first enter key) (quit loop)
... (second enter key) submit command
... (third -> not need)
... (last-> not need)
0
1
2
3
4
5
6
7
8
9

Other problem:
When i run code , i haven't the return in console:
I make a new file: -> OK
Run.
No return in console (like the console is clear after i ran the code)

Same test directky in console: OK

test.py contains:
print("hello") (line1)
print("hello") (line2)
line(3)
Execute :
no return in console.

Do the same in console mode: OK

[vshymanskyy]

Yes, run button currently clears terminal which is clearly a bug. It's next on my list.

[vshymanskyy]

It's currently unclear why multiple Enter key presses are required in the REPL.
I could replicate it, so I'll try to investigate it when I have some time

[vshymanskyy]

@FK-sauve the Run File function is fixed. I believe

[rkompass]

Very nice project.
Last year I tried the somewhat related esp-fs-webserver which was ported to MPs webserver micropython-aioweb which is slim, async and has websockets.
It also has an impressive appearance. Under the hood the ace web editor is used.
After Robert made the necessary modifications that thing ran on the w600 and I got so exited that I started to learn Javascript for a while. One dream (not realized) was to add a websocket-terminal to it.
Perhaps you like to compare the internals.

[FK-sauve]

To speak 'IDE' for Micropython/esp32. There is a very nice 'IDE' made by a compatriot
French here JcZic -> https://github.com/jczic/ESP32-MPY-Jama/releases.
This (mostly developed in Python) is not integrated into the internet browser. but it could be useful to you as a source of inspiration.

[FK-sauve]

Nothing to say...

[vshymanskyy]

Viperus, i can't accept due to personal reasons

[vshymanskyy]

MPY-Jama is phenomenal ;)

[vshymanskyy]

@rkompass btw, you can try out the WebSocket/WebREPL support in ViperIDE: https://github.com/vshymanskyy/ViperIDE/tree/main/docs

[scruss]

WebSerial is still only supported on Chrome

[vshymanskyy]

Yes, but it's not like.. "only".
Edge, Opera, Brave and other browsers also work on Chrome engine with the "only" exceptions being Firefox, and Safari. Which is OK, the more we use these technologies, the more these Browsers would be incentivized to implement them.

[vshymanskyy]

Also, it's not a showstopper. We can easily implement a bridge server using Python 3. Or even maybe reuse mpremote itself to act as an agent for such IDE. With additional benefits of being able to connect to a remote device.

[mattytrentini]

Related; the Mozilla Connect issue on WebUSB and WebSerial:
Fully support Web USB and Web Serial

[beriberikix]

Note Mozilla recently updated their position on Web Serial: mozilla/standards-positions#720

[vshymanskyy]

ViperIDE is now Open Source: https://github.com/vshymanskyy/ViperIDE 🥳

[vshymanskyy]

ViperIDE is now officially hosted on: https://viper-ide.org

Here are some updates:

• Progressive Web App
• Bluetooth LE support
• WebREPL support
• MIP Package Manager finally works

[rkompass]

A first feedback:
It looks nice. Great achievement!

I didn't manage to unexpand/expand folders (feature not there yet, I suppose).
How can I copy files from my hard disk to the device? I use Thonny a lot, and there it is easy: a right mouse-click and select upload.
Is it possible to enable a second directory tree for the local (PC) data with such a feature? Perhaps make the appearance of the directories/files a bit smaller at the same time?
Are you interested in more feedback? Perhaps as Github issue?

[vshymanskyy]

@rkompass the first objective for me is to make it work conceptually. After the technology is polished, adding UX features is easier and could be contributed by the community as well.
Keep in mind that this IDE is ~1 week old.

Currently there's no way to upload files. you can:

• use the Package Manager
• create a new file using file manager -> drag'n'drop your file into the editor -> save file

Displaying host file system is not currently planned

[rkompass]

Didn't mean to push you, sorry.

[vshymanskyy]

It's OK. I have a list of items to do.
You can expect an improved file management once the ide gets popular enough :)

[vshymanskyy]

@rkompass I fixed the left paned display density on all pages

[vshymanskyy]

Updates:

• WebREPL now works on iOS
• Localization (21 languages), improve accessibility
• Fix crashes with some older MicroPython versions
• Initial support for CircuitPython BLE repl
• Major improvements of the "Run script" function

[samneggs]

This is very cool, congrats. I noticed REPL reported errors are off by one line number. Also, I've found it helpful to have the cursor jump to the error and maybe the line highlighted when the error number is clicked. (version 0.2.4)

[vshymanskyy]

The off-by-one line number is fixed now. Also, the port activity indicator was added ;)

Nice idea about highlighting the errors, added it to the TODO list

[vshymanskyy]

I've been live on The Pi Cast, where I talked about the Viper IDE and Blynk IoT MicroPython Framework.
You can watch the full discussion here: https://www.youtube.com/watch?v=owDVI7z5GAk

Hope you'll enjoy it! ☺️

[FK-sauve]

Thank's for your demo on youtube!

[vshymanskyy]

I'm now exploring some crazy ways to connect a MicroPython board to ViperIDE over the internet 🌎 :
https://github.com/orgs/micropython/discussions/15329

[vshymanskyy]

The initial version of a remote Secure WebSocket Relay connection is now available for public testing.

Full instructions here:
https://github.com/vshymanskyy/ViperIDE/blob/main/docs/Web-REPL-Relay.md

This allows to use ViperIDE with your internet-connected board from anywhere in the world.
Additionally, you can share access to your device via an instant link.

[littlegreenbean33]

Is there a way to sync files with computer ? i.e. I keep file in git repository in my computer. If I am editing on the device directly, from time to time I want to take a snapshot in a git commit. For that I need to do a sync between the device files and the computer SW.

How would I do it with the IDE ?

Thanks.

JCG

[vshymanskyy]

Yes I'm also thinking about it.
It's not available (and not easy), but there are multiple approaches:

• add a function to download everything as a Zip / Tar.GZ
• Add ability to mount a /remote filesystem on the device
• Use File System Access API to sync. It needs some clever ideas on how to to handle it efficiently
• ...?

[badgermedia]

This is excellent - what a superb little IDE. Blazing speed and so easy to use.

Looking forward to file upload but in the meantime I simply create a new file and paste across so no big deal.

Congrats and thank you!

[vshymanskyy]

In addition to direct and remote device connectivity, ViperIDE can now run an emulated device directly in your browser.

This is highly experimental, but you can try it here:
🚧 https://viper-ide.org/?emulator=1 🚧

In fact, this runs the vanilla/official WebAssembly port of MicroPython.

[rkompass]

Congratulations (again:-)). And thanks.
This is a very simple way to try out MP for WebAssembly.

I just used it to benchmark against MP for Linux using my set of crc calculators.
And noticed: I don't have a method to create a directory (inside e.g. /temp), for storing the crc class.
Creation of a directory using Viper-IDE s file manager seems not possible at the moment.
So a suggestion is to add this possibility into Viper-IDE (no hurry, of course). Perhaps with an asterisk as indicating character.
Perhaps all (* + x) also with a pop-up notice 'create dir', 'create file', 'delete'.
Or perhaps add the creation of a directory as a variant of the file creation dialog, which seems more tidy.
One can use os.mkdir() from within MP, of course, and so I did.

In the end I noticed that MP on WebAssembly is about 8-10 times slower than MP on Linux.
Also noted that time.ticks_us() exists and works with the WebAssembly port, but has 1ms resolution there.

[vshymanskyy]

You can create a folder by appending / to its name. I.e. click + alongside /temp, then enter my_dir/ name.

Modal dialogs are planned at for future releases.
Thanks for the feedback on the VM. It uses what MicroPython provides out of the box (the wasm port).
True microsecond resolution is not available in browsers since Spectre/Meltdown, webassembly has nothing to do with it.

[rkompass]

You can create a folder by appending / to its name. I.e. click + alongside /temp, then enter my_dir/ name.

Just tested it (again). It gives an error message on 3 different browsers (Brave, Firefox, Chromium on Linux).

[vshymanskyy]

Can you please register an issue on ViperIDE github? I need more details

[rkompass]

Done

[khanh-tech]

Volodymyr, thank you very much for your work! this is truly promising. Being a ux designer by profession and also a keen programmer I'd love to give you feedback... hope it helps

• it wasn't clear right from the start that "running" (F5) doesn't actually save/upload the file to the board.
• when working with multiple files, switching between them discards any changes!
• using a pico over Serial: hard reset disconnects the device
• I wish there was an option to all at once: 1.stop the device 2.upload any changed file 3. soft reset. Or that saving a file did all this automatically (maybe an option to turn on or off in the settings) i think thats the most common use-case, especially with beginners. modify a file, save it and boom see the result (from scratch) on the device.
  Happy to discuss! also if you're looking for beta testers I'm in. all the best

[vshymanskyy]

Thanks for the feedback.

1. I'll think how to improve that, any ideas?
2. Yes its a known bug
3. That's how it works (the pi pico)
4. Interesting, i'll consider that

[khanh-tech]

1.mmh i would just save the file before you run it .
4.Nice. This is a common development workflow to update a single file and then re-start your program..