DEV Community

Cover image for HTML Node Templating System
johnaweiss
johnaweiss

Posted on • Originally published at github.com

HTML Node Templating System

Check out this lightweight, robust HTML node-layout templating system. It enables HTML programmer to more easily control the layout of an arbitrary number of identical HTML sibling nodes, each containing different data, pulled from a hidden table. Designed to minimize effort and reduce keystrokes for the HTML programmer, and protect live HTML from content admins.

https://github.com/johnaweiss/HTML-Micro-Templating

Image description

This system isn't for templating an entire website or webpage. It's for repeated HTML nodes within a page.

Benefits

  • There's just one copy of the HTML layout to edit.
  • Content admins never need to touch the HTML of the node-series. They just edit a plain-text list of records.
  • All dynamic assets can be contained within a single HTML file.
  • Supports any number of templates, datasets, and insertion-points on the same webpage.
  • Optionally, for safer content-management, data can be stored in a separate file from the webpage. (Requires PHP.)
  • No database needed.
  • Built using vanilla Javascript. No library or framework needed. Extremely lightweight Javascript.
  • HTML templates and data can be mixed and switched on the same webpage with the same ease as CSS styles, as long as the fields match up.
  • Variable data can be inserted anywhere in the template's HTML, including element metadata.
  • Clean, resilient code.

https://github.com/johnaweiss/HTML-Micro-Templating

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

ACI image

ACI.dev: Fully Open-source AI Agent Tool-Use Infra (Composio Alternative)

100% open-source tool-use platform (backend, dev portal, integration library, SDK/MCP) that connects your AI agents to 600+ tools with multi-tenant auth, granular permissions, and access through direct function calling or a unified MCP server.

Check out our GitHub!

AWS Security LIVE!

Join AWS Security LIVE! streaming from AWS Partner Summit Hamburg

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️