Building a JavaScript Based Configuration UI for OpenWisp

Important Links

The Basic Editor

The Advanced Editor

Given that the netjsonconfig-editor is to be used to edit network configurations data, it will be used by technical people to edit technical data, as such having just a form to edit the data will be limiting the technical users. As such I provided an advanced editor to be used to edit the raw netjson data as json. This advanced editor acts like a fully functional json text editor with syntax and semantics error reporting as well as data validation against the json-schema provided.

Snapshot of the advanced editor UI

The Main Module

The netjsonconfig-editor, mentioned above has the basic editor and the advanced json-editor, i therefore need a module to connect these two parts. That’s where the main module comes to play. This module handles all the interactions between the advanced and basic editor modules. It is also the contact point to the the library functionality to the developer who may intend to use the library. It provides an API for functionalities for the developer to be able to make full use of the editor. The full specs of this API are defined in the project documentation.

Tech Stack

For the development of this library i worked mainly with JavaScript. using HTML and CSS fort he UI design and display. However the various modules of the library make use of various technologies. The summary of the most important technologies used and how they fall into the project can seen below

Dependencies and dev-dependencies

Status of the Project

The project as at the day of this writing is complete as per the project proposal, so I have fully implemented my project before the end of GSOC 17. However there are certain improvements which i intend to implement after this GSOC period on the library to improve both UI/UX and developer ease of use.


During the course of this project i have had to contribute mainly to two repositories in order to get the library to this level.


Contribution to OpenWisp this summer has been an amazing experience. I have gotten to learn a lot working with advanced developers.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store