Inject and build web files into your sketches.

Arduino Web Inject fills your sketches (*.ino) files with HTML/CSS/JS code from files on your PC. This is useful to work with Web Server and create complex web app around Arduino platform.

This is a list of benefit of using Arduino Web Inject:

• The HTML/CSS/JS code will be minified and cleaned of comments before being loaded into Arduino. This will allow for significant space savings.
• Develop a web application using a natural approach and a web-friendly editor.
• Compile your web files into Arduino without relying on heavy and unnecessary filesystem libraries.
• Organize your web application with variables populated directly from Arduino code and reusable layouts. Additionally, you can maximize the use of JavaScript and create SPAs or PWAs.

Arduino Web Inject is a full-written Python project, choose your OS to for detailed installation instructions

C:\Users\Sam\AppData\Local\Programs\Python\Python310\Scripts\pip install arduino-web-inject

% pip3 install arduino-web-inject  

$ sudo apt install python

$ pip install arduino-web-inject

$ pip install arduino-web-inject

Open a shell and type the following command

$ arduino-web-inject MY_SKETCHES_DIRECTORY

Replace MY_SKETCHES_DIRECTORY with your source code directory. For instances

On Windows (with cmd.exe)

C:\Users\Sam\AppData\Local\Programs\Python\Python310\Scripts\arduino-web-inject C:\Users\SamSepiol\OneDrive\Documents\Arduino

On macOS (with Terminal)

% arduino-web-inject /Users/SamSepiol/Documents/Arduino

On Ubuntu/Debian/Linux

$ arduino-web-inject /home/SamSepiol/Arduino

To load a HTML file into your project type a comment like this

// @inject "index.html"
const String indexPage = "...";

void setup() {
}

When you use the // @inject "filename.html" our tool automatically load and replace the HTML into the string constant declared below the comment

To load a CSS file into your project type a comment like this

// @inject "style.css"
const String style = "...";

void setup() {
}

When you use the // @inject "filename.css" our tool automatically load and replace the CSS code into the string constant declared below the comment

To load a JS file into your project type a comment like this

// @inject "app.js"
const String js = "...";

void setup() {
}

When you use the // @inject "filename.js" our tool automatically load and replace the JavaScript code into the string constant declared below the comment

The @inject comment looks for files inside your sketeches with a relative path starting from the source file (e.g. Arduino/Blink/Blink.ino), we suggest to use a specific sub-directory as example web/ and place all your web files inside it. See examples for inspirations.

To modify your web files, you can use your preferred IDE such as VSCode or WebStorm, but also Notepad++. When our tool detects a change in your web files, it will automatically update your Arduino files.

The MIT License (MIT). Please see License File for more information.