https://github.com/seanmcp/vanilla-include

A JavaScript implementation of php's include function for HTML templating
https://github.com/seanmcp/vanilla-include

html-template include javascript npm npm-package vanilla-javascript

Last synced: 5 months ago
JSON representation

A JavaScript implementation of php's include function for HTML templating

• Host: GitHub
• URL: https://github.com/seanmcp/vanilla-include
• Owner: SeanMcP
• License: mit
• Created: 2018-09-07T17:03:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-11T11:13:23.000Z (over 7 years ago)
• Last Synced: 2025-07-06T13:50:42.204Z (6 months ago)
• Topics: html-template, include, javascript, npm, npm-package, vanilla-javascript
• Language: JavaScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vanilla-include

[![npm](https://img.shields.io/npm/v/vanilla-include.svg)](https://npmjs.com/package/vanilla-include) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/vanilla-include.svg)](https://npmjs.com/package/vanilla-include) [![npm](https://img.shields.io/npm/dt/vanilla-include.svg)](https://npmjs.com/package/vanilla-include)

A JavaScript implementation of php's include function for HTML templating.

## Why?

php's `include` function is incredibly useful for simple HTML templating. This library seeks to implement a similar functionality with just vanilla JavaScript.

## Install

Get CDN from [UNPKG](https://unpkg.com):

```

```

Install via npm or yarn:

```sh

npm install --save vanilla-include

# or

yarn add vanilla-include

```

## Docs

### Basic

When your document loads, `vanilla-include` will look for all elements that have a `data-include` attribute and **replace** them with the target HTML file.

#### 1. Create your file to include

```

Hello from vanilla-include!

```


#### 2. Add `vanilla-include` and refer to file with `data-include` attribute

```

    


...

```

#### 3. Voila!

`index.html` will render like so:

```

    
Hello from vanilla-include!


```

### Details

The `data-include` attribute can be added to any element in your document. That means you can use `vanilla-include` to add things like `` or `` tags.

In practice, the `
` tag is useful because it is both short and self-closing, but you can use whatever tag best fits your scenario.

Should the resource fail to load, `vanilla-include` will fail "silently" by setting the element's `display` style to `none`.

## License

[MIT](https://github.com/seanmcp/vanilla-include/blob/master/LICENSE)