Wilson's Blog

Rise, the great work must be done!


HDL Editor Setup


The project intends to provide a simple solution for those who wish to generate structured Verilog HDL code from a GUI and is suitable for those who just start working with FPGA and Verilog HDL.

The implementation intends to use both the rich ecosystem of JavaScript and the feature of static typing. The Electron framework is used for generating a nice GUI and the Fable compiler is used to transpile F# to JavaScript.

Software Needed:

Install the following software first. The OS used is Windows 10. Development under other OS is possible while the software needed may be different. Check https://dotnet.microsoft.com/download for more information.

  • Microsoft Visual Studio. It is used for arranging files in F# projects and provides intellisense support. F# file ordering is one-directional. Note the IDE is NOT used to build projects.

  • Visual Studio Code or any text editor of your choice. It is used to edit any files that are not part of any F# projects.

  • Git Bash or any other command line interface of your choice.

  • Node.js: JavaScript runtime.

  • Paket: F# package manager.

The following software is included in package.json and can be installed via npm install. Note the list below is NOT an exhaustive listing of the npm packages used in the project. Those packages are worth looking at before starting the project.

  • Electron.

  • Webpack.

  • fable-loader.

  • fable-compiler.


app/ : the folder contains the HTML and CSS files for setting and styling the GUI. The CSS files are put in a separate folder called css/. The transpiled JavaScript code is put in js/, as configured in webpack.config.js.

src/: the folder contains F# projects. Each F# project is put in a subfolder. The structure of each subfolder is auto-generated by Visual Studio.

Link to the development log

Link to the project website

Link to the project GitHub repository

Welcome to my other publishing channels