https://github.com/arturguedes/minimalreplace
Keep the HTML super clean, dynamically insert to content into your HTML and generate a unified file with Minimal Replace.
https://github.com/arturguedes/minimalreplace
brackets brackets-extension livepreview
Last synced: about 2 months ago
JSON representation
Keep the HTML super clean, dynamically insert to content into your HTML and generate a unified file with Minimal Replace.
- Host: GitHub
- URL: https://github.com/arturguedes/minimalreplace
- Owner: ArturGuedes
- License: gpl-3.0
- Created: 2018-11-22T04:46:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-18T08:37:33.000Z (almost 3 years ago)
- Last Synced: 2025-04-12T03:09:58.259Z (11 months ago)
- Topics: brackets, brackets-extension, livepreview
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Minimal Replace
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.
## Features
- **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
## Installation & Usage
### Basic Syntax
Variables are defined using the `{{::variableName}}` syntax and replaced with corresponding values from the JavaScript data object:
```html
I'm {{::name}}
from {{::planet}}
```
### Option 1: CDN (Live Preview)
For dynamic content replacement in the browser, add the following scripts to your HTML ``:
```html
mr_data = {
name: "Arthur Phillip Dent",
planet: "Earth",
};
```
### Option 2: Brackets Extension (Unified File Generation)
The Brackets extension generates a unified HTML file by processing your templates and data files.
1. Install the Minimal Replace extension in Adobe Brackets
2. Use `Minimal > Setup Minimal Replace structure` to create the project structure
3. Define your data in JavaScript files with the same name as your HTML templates
#### Project Structure
```
.
├── mr-structure/
│ ├── example.html # Template with {{::variable}} syntax
│ ├── example.js # Data file with mr_data object
│ └── ...
├── example.html # Generated unified HTML file
└── ...
```
## Important Notes
- The `mr_data` object supports HTML expressions within variable values
- When using HTML with quotes, escape internal quotes with backslashes:
```javascript
mr_data = {
link: 'Link',
};
```
## License
This project is licensed under the [GNU General Public License v3.0](LICENSE).