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

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay