A lightweight templating solution for HTML that enables dynamic content insertion using a simple {{::variable}} syntax. Keep your HTML clean and maintainable by separating content from structure.
- Simple Syntax: Use
{{::variable}}to insert dynamic content - Clean Separation: Keep HTML structure separate from content data
- Multiple Usage Options: CDN for live preview or Brackets extension for unified file generation
- HTML Support: Accepts HTML expressions within variable values
- Lightweight: Minimal overhead for maximum performance
Variables are defined using the {{::variableName}} syntax and replaced with corresponding values from the JavaScript data object:
<div class="card">
<h1>I'm {{::name}}</h1>
<h2>from {{::planet}}</h2>
</div>For dynamic content replacement in the browser, add the following scripts to your HTML <body>:
<script>
mr_data = {
name: "Arthur Phillip Dent",
planet: "Earth",
};
</script>
<script src="https://arturguedes.github.io/minimal-replace/js/minimalreplace.min.js"></script>The Brackets extension generates a unified HTML file by processing your templates and data files.
- Install the Minimal Replace extension in Adobe Brackets
- Use
Minimal > Setup Minimal Replace structureto create the project structure - Define your data in JavaScript files with the same name as your HTML templates
.
├── mr-structure/
│ ├── example.html # Template with {{::variable}} syntax
│ ├── example.js # Data file with mr_data object
│ └── ...
├── example.html # Generated unified HTML file
└── ...
- The
mr_dataobject supports HTML expressions within variable values - When using HTML with quotes, escape internal quotes with backslashes:
mr_data = { link: '<a href="#">Link</a>', };
This project is licensed under the GNU General Public License v3.0.