About: Make it yourself if you cannot buy one!

This instuctables show how to install NodeMCU WebIDE to ESP8266 board.

It also include several examples to brief how to use the WebIDE.

Step 1: Introduction

ESP8266 Board is a WiFi MCU board and ironically you always connect to a USB serial cable while development.

NodeMCU WebIDE aim to break this situation.

Once you install NodeMCU WebIDE to the ESP board, you can detach the USB serial cable and all development works on WiFi only!


ESP8266 still require a battery for operation :P


Don't throw the USB serial cable away, it still required for upgrading WebIDE or NodeMCU firmware :D

Step 2: Design Overview

Develop ESP web IDE challenge and solution

  • Compiler vs Interpreter
    Web browser (Javascript) unable to compile binary for ESP8266 MCU but it can send and save plain text to HTTP server if it have appropriate AJAX API. So I look forward to the scripting language for ESP8266. I can find 4 options for ESP8266: Lua, BASIC, MicroPython and JavaScript. Lua (NodeMCU) seems have better ESP8266 API support, so I choose NodeMCU.
  • MCU resources
    ESP8266 is very limited in memory and processing power, it is not capable handle all IDE features. Conversely, current mobile is much more powerful. ESP8266 act as a "thin web server", only serve static HTML, Javascript files. And also an AJAX file API for saving edited files from the web browser. All other features such as fancy UI, editor functions, IDE logic, etc, handled by the browser and Javascript. Thanks to the work done of nodemcu-httpserver and codemirror projects, the NodeMCU WebIDE become feasible!
  • WiFi transfer rate
    I found some mobile browser, like iOS Safari, unable to retrieve file over around 50 KB. I guess it is caused by client side request timeout. So it is required to trim, shrink and split all web resources files into not more than 50 KB. But at the same time it still required to reduce the number of files to optimize retrieve round trip. There are various tools I have used, such as CSS Minifier, codemirror compressor and gzip. After the file size arrangement, it still need to arrange Javascript load the resources files one by one in sequence to reduce the chance of ESP8266 memory outage.
  • POST request size limit
    Since ESP8266 is very limited in RAM, it cannot handle the HTTP POST data that over around 1 KB. A normal Lua code file can be around 1 KB ~ 10 KB, save a code file from the web IDE to ESP board flash require split data in multiple POST request. It is handled by Javascript and NodeMCU WebIDE file API.

Step 3: Preparation

ESP8266 Board

ESP-12E or related dev board preferred, since it have 4MB flash and can use option 1 (simple one) install method.

USB Serial Cable

If you are using dev board like NodeMCU or WeMOS, it is already included on the board; If you are using ESP8266 board like ESP-03, ESP-07 or ESP-12E, you may refer my previous instructables (ESP-03, ESP-07 and ESP12E) how to connect ESP board with USB serial cable.

Step 4: Install Option 1: Flash Full Image

The pre-built flash image is extracted from ESP-12E, if you are also using the ESP board with 4 MB flash, you can use this install method:

  • Download NodeMCU WebIDE flash image:

  • Unzip the flash image:
gzip -d nodemcu-webide.bin.gz
  • Flash the image


    1. Download latest ESP8266 Flash Download Tools if not yet:
    2. flash the image to ESP board

    Linux / OSX

    1. Download esptools if not yet:
    2. write flash --port /dev/YOURPORT write_flash 0x0 nodemcu-webide.bin

    Step 5: Install Option 2: Flash NodeMCU, Upload Files

    This is more advanced option for install, it can install in any flash size.

    Here is the summary:

    • Custom build NodeMCU:
      Please select dev branch and here are my selected modules: adc, bit, cjson, coap, crypto, dht, encoder, file, gpio, http, i2c, mdns, mqtt, net, node, ow, pwm, rtcfifo, rtcmem, rtctime, sntp, spi, tmr, u8g, uart, ucg, wifi, ws2812
    • Wait to receive the build finished email and download the integer version firmware
    • Flash NodeMCU firmware to ESP board
    • Upload all nodemcu-webide files in bin folder to ESP board:

    Step 6: Interface Guide

    File list

    Editable files in ESP board flash, click the file item to select.

    Selected file

    Selected file item will be highlighted and loaded to the editor. Selected file can use rename and delete button for further actions.

    New file button

    Create a new file in ESP board flash, default filename is newfile1.txt and then newfile2.txt, etc. The filename can be renamed by select the file and then press the rename button.

    Rename button

    Rename selected file item.

    Delete button

    Delete selected file item.

    Undo button

    Undo last editor changes.

    Save button

    Save the editor changes to ESP board flash.

    Preview button

    Open selected file in a new web browser tab.


    The code editor is powered by Codemirror.

    Step 7: Setup NodeMCU WebIDE

    All NodeMCU WebIDE configurable options stored in config.lua file.

    There are 2 ways to modify the config.lua:

    • ESPlorer or other ESP access tool upload edited config.lua through USB serial cable
    • Use NodeMCU WebIDE edit the config.lua

    It is a good starting point for familiar with NodeMCU WebIDE.

    Here are the steps using NodeMCU WebIDE to edit the config.lua:

    1. Power on the ESP board
    2. Connect to ESP board AP WiFi, SSID is "ESP-XXXX" where XXXX is the ESP chip ID, and the default password is "PassXXXX", it is case sensitive, remember replace XXXX with the chip ID show in SSID
    3. Browse to
    4. Prompt authentication dialog, default user: "login", password: "Passw0rd", case sensitive
    5. Wait a few minutes for initial load all resources files
    6. Select config.lua in file list
    7. Edit parameters in the editor, please refer below parameter list for further details
    8. Press save button
    9. Wait the status bar at the top show save success
    10. Reboot the ESP board
    11. New configuration applied

    Parameter List

      • conf.auth.enabled : enable HTTP basic authentication, default true, set to false if you feel annoying and don't care about security
      • conf.auth.realm : the name show in login dialog
      • conf.auth.user : default "login", change to your user name, case sensitive
      • conf.auth.password : default "Passw0rd", change to your own password, case sensitive
      • conf.wifi.mode : default wifi.SOFTAP, set to wifi.STATIONAP if you would like to connect to your own AP. Please be aware this setting, I found wifi.STATIONAP mode make ESP AP become unstable if your own AP not within the connection area.

      • conf.wifi.stassid : your own AP SSID, case sensitive
      • conf.wifi.stapwd : your own AP password
      • conf.wifi.ap.ssid : ESP AP SSID, default "ESP-XXXX", where XXXX is the ESP chip ID
      • conf.wifi.ap.pwd : ESP AP password, default "PassXXXX", where XXXX is the ESP chip ID
      • conf.wifi.apip.ip : ESP AP IP address, default
      • conf.wifi.apip.netmask : ESP AP IP net mask, default
      • conf.wifi.apip.gateway : ESP AP IP gateway, default, it can avoid mobile phone try to use ESP board access the Internet

      Step 8: Example 1: Hello-world.lua

      Traditional first programming example.

      In order to call from the nodemcu-httserver, all user code must under the return function block.

      return function (connection, req, args)<br>  dofile('')(connection, 200, 'html')
        --insert user code here, return output in HTML format by connection:send(html_output)

      This example simply use a connection:send() function to return the hello world HTML text to the web browser.

      Step 9: Example 2: System-info.lua

      This example shows the ESP board basic system information.

      Step 10: Example 3: Ws-echo.html

      This example show how to use a HTML5 new protocol, WebSocket, make a low latency communication channel between web browser and ESP board.

      In my test with NodeMCU WebIDE platform, Ajax request always have response time over 1 second; using WebSocket can handle up to 6 requests in a second.

      However, please be noted that, my WebSocket code still at a very early stage. It is noticeable memory leakage for every WebSocket connection. The ESP board may reboot after attempt a few WebSocket connection.

      Step 11: Example 4: Led-matrix.html

      This example show how to use a HTML+Javascript fronted (web browser) and a Lua backend (ESP board) to make a simple interaction from the mobile to the ESP board.

      Please refer to my previous instructables for further details:

      Step 12: Example 4: Ws-led.html

      This example show further WebSocket application for low latency communication.

      You may notice it have seconds of latency in previous LED Matrix example. This example replace Ajax logic with WebSocket, the response time is much better.

      Step 13: Example 5: Robot.lua

      This example show how to use Lua timer function to make a sequential time interval operation. You may change the steps string value for designing your steps.

      Please refer to my previous instructables for further details:



        • Stone Concrete and Cement Contest

          Stone Concrete and Cement Contest
        • Barbeque Challenge

          Barbeque Challenge
        • Classroom Science Contest

          Classroom Science Contest

        39 Discussions


        1 year ago

        thanx for sharing such a great work!!!

        when i'm trying to build my NodeMCU i didn't find any cJSON module, Instead i found SJSON module...are the both same?

        plz reply ASAP


        1 reply

        Reply 1 year ago

        Hi souravmae, I found this commit in Godzil's forked repository. I it should be the same thing.


        Reply 2 years ago

        it just a white bluetooth keyboard DIY added a plastic support plate :P


        Reply 2 years ago

        you mean how I add a mobile support plate? this is my old diy, may be post another instructables later.


        2 years ago

        "Since ESP8266 is very limited in RAM, it cannot handle the HTTP POST data that over around 1 KB."

        This sounds solvable. I didn't like the size and feature matrix of nodemcu-httpdserver, so I wrote a very tiny httpd server for nodemcu too: it is less than 4KB in a single file, leaving over 31KB free according to node.heap() (and there's also removable websocket support). I also reused and tweaked the cool ide from the ESPAsyncWebServer project. I can POST over 500KB of data with no problems in a multipart form request: after finding the start boundary the callback function receives all the data continuously in chunks of about 1,5KB stopping at Content-Length bytes. I tested the upload with chrome and firefox. Here's my approach:

        1 reply

        2 years ago

        I got it loaded and working. I had a bit of trouble getting it to load automatically, but solving that helped me learn a bit about Lua and NodeMCU. The only thing I noticed is the icons are not loading. The "New File, Rename, Delete, Undo, Save and Preview" icons are not showing.

        If I drag the mouse across them they darken to show where they are supposed to be, and clicking works. But I already have clicked the wrong one (more than once) and had to reload everything to replace what I damaged. Any idea why they are not showing? Are they loaded in a specific file that maybe I am missing? I loaded all of the ones in the BIN folder.

        Oh, and it is the same on three browsers, so it is not a browser issue.

        Thanks again!

        3 replies

        Reply 2 years ago

        Hi John, I found some compatibility issue on inline SVG background image with some browsers. Chrome and Safari just works well. I have updated all SVG image from plain text to base64 encoding for catering this. You may use the latest code / image to test it again.


        Reply 2 years ago

        That worked! IE and Firefox now show correct. MS Edge still does not load them, but I can work in one of the others. I just like Edge for things like this because then I can use my main browser(s) for other things and switch back and forth quickly.


        Reply 2 years ago

        Never mind. Rebooted and now it works in Edge. Great work! Where can I buy you a beer?


        2 years ago

        I am waiting for my ESP8266 boards to arrive and getting ready. I like the WebIDE concept. What build of NodeMCU/Lua does your 4M download come loaded with?

        Oh, and thanks! This is a great tutorial that should make this easy.

        1 reply

        Reply 2 years ago

        The build come from NodeMCU custom builds website with dev branch options


        2 years ago

        Thanks for the instructable. I cannot flash your included image. I get error

        Error:Set ESP8266 Address timeout.

        Can you suggest modules for the custom build prior of uploading the files from bin directory?

        3 replies

        Reply 2 years ago

        Hi, gkal. I have yet see this error message before, can you give me more details about this error? What tools are you used to flash the image? Which serial port you selected?


        Reply 2 years ago

        I am using the serial port that i use to communicate, the same that the program recognizes and i am using the esp8266flasher that you suggest and i am always using. I can flash nodemcu and micropython with the same method.

        Thank you for fast reply


        Reply 2 years ago

        I have yet encounter this error before. Google tell me it may caused by Vcc not connecting to 3.3 V. Hope it can help you.