Include.js

A simple JavaScript library that allows you to include external HTML files into your pages + possibility to inject variables into your snippets. This works exactly like EJS (for my Node.js fellas) or Jinja (for Python lovers), except that you don't have to set up a complicated server to make it work.

How to use it

First, import the necessary file in the head tag:

<script src="https://cdn.jsdelivr.net/gh/Xeway/includejs@main/include.min.js" defer></script>

^{For production, it's best to download include.js from that repository and load it by changing src attribute to /path/to/file/include.js.}

After that, insert an HTML file (wherever you want in your code):

<include src="<your_file>.html">

Aaaaand that's it 😉

You can also make your HTML files more customizable by injecting variables. For instance:

<include src="<your_file>.html" message="Hello world!">

In <your_file>.html, you can use the variable message by using the following syntax:

[% message %]

This will render message's value: Hello world!.

Showcase/example

You can see a basic showcase/example here.

Why this is useful ?

Because there's sometimes redundant code that you have to write in every HTML file you create (generally it's a footer/header). So it's way simpler and more maintainable to store a same code in 1 file and just including it in all your other files by using 1 line.

Issues

The library doesn't work, the console throws me the error CORS request not HTTP.

↳ This is because Include.js makes requests to get your HTML files you want to include, and it's not allowed by browsers to request to internal files for security reasons. To make it work, you'll have to run your website on localhost (when developing) by using something like Live Server and if your website is already on production, you just have to make your HTML files public.

Browser compatibility

Chrome	Edge	Safari	Firefox	Opera	IE
≥ 45	≥ 14	≥ 10.1	≥ 65	≥ 32	🙈

^{Source: Can I use}