A lightweight client-side library that builds your page's DOM from a JSON array and populates each element by fetching content from a corresponding directory on your server.
j-make reads body.json on DOMContentLoaded, creates each HTML element described in the array, and appends it to <body>. It then fetches the index.html from the corresponding directory on your server and injects it into that element. Nested arrays produce nested elements.
j-make does not generate navigation or any page content. It creates the DOM elements from body.json and injects the index.html from each element's directory verbatim. Every link, heading, and nav item is static HTML you write yourself in the content files.
Every element j-make creates receives two data attributes:
data-key—{tagname}_{siblingIndex}(zero-based among all siblings, e.g.aside_1)data-path—body/{ancestor keys}/{key}(e.g.body/main_1/aside_1)
The sibling index is counted by walking backwards through previousElementSibling in the live DOM. The ancestor chain is built by walking parentNode and collecting each ancestor's data-key until <body> is reached.
For each element, j-make fires a $.get request to {data-path}/index.html. Responses are sanitised with $.parseHTML(..., false) (scripts disabled) before being prepended into the element. All requests run in parallel — there is no waterfall.
See ARCHITECTURE.md for a full technical breakdown.
j-make works on GitHub Pages out of the box — no server configuration required. Because all paths are relative, they resolve correctly whether your site is at user.github.io or user.github.io/repo-name/.
Note: GitHub Pages serves static files only. All element
indexfiles must be.html. Server-side features (PHP, Python, etc.) are not available on GitHub Pages but work on any self-hosted server.
- Fork or use this repo as a template (click Use this template on the repo homepage).
- Enable GitHub Pages in your repo settings (Settings → Pages → Source → GitHub Actions).
- Push to
master— the included Actions workflow deploys automatically.
Reference j-make directly from jsDelivr — no file to copy or host:
<script src="https://cdn.jsdelivr.net/gh/richardkentgates/j-make@master/j-make.js"></script>For a pinned version (recommended for production), use a tagged release:
<script src="https://cdn.jsdelivr.net/gh/richardkentgates/j-make@1.0.0/j-make.js"></script>Download j-make.js and serve it alongside your project.
Leave <body> empty — j-make populates it. Include jQuery before j-make.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/richardkentgates/j-make@master/j-make.js"></script>
</head>
<body></body>
</html>Define your page structure as a nested array of HTML tag names. Strings create elements; arrays nest their contents inside the element named by the preceding string.
[
"header",
"main",
[
"article",
"aside",
[
"section",
"section"
]
],
"footer"
]Create a body/ folder at the root. For each element, add a folder named {tagname}_{index} (zero-based) and an index.html inside it. j-make fetches that file and injects it into the element.
index.html
body.json
body/
header_0/
index.html
main_1/
index.html
article_0/
index.html
aside_1/
index.html
section_0/
index.html
section_1/
index.html
footer_2/
index.html
See the wiki for full documentation including:
- Getting Started
- Architecture
- body.json format
- Directory Structure
- Generated DOM Attributes
- Serving and Hosting
- Troubleshooting
See CONTRIBUTING.md.
See SECURITY.md.