PHPackages                             phpgt/domtemplate - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. phpgt/domtemplate

ActiveLibrary[Templating & Views](/categories/templating)

phpgt/domtemplate
=================

Bind dynamic data to reusable HTML components.

v3.5.1(1mo ago)187.1k↓67.9%3[20 issues](https://github.com/PhpGt/DomTemplate/issues)1MITPHPPHP >=8.2CI passing

Since Dec 22Pushed 1mo ago3 watchersCompare

[ Source](https://github.com/PhpGt/DomTemplate)[ Packagist](https://packagist.org/packages/phpgt/domtemplate)[ GitHub Sponsors](https://github.com/sponsors/PhpGt)[ RSS](/packages/phpgt-domtemplate/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (74)Used By (1)

Bind dynamic data to reusable HTML components.
==============================================

[](#bind-dynamic-data-to-reusable-html-components)

Built on top of [PHP.Gt/Dom](https://www.php.gt/dom), this project provides dynamic data binding to DOM Documents, document templating and reusable HTML components.

Directly manipulating the DOM in your code can lead to tightly coupling the logic and view. Binding data using custom elements and data attributes leads to highly readable, maintainable view files that are loosely coupled to the application logic.

---

[ ![Build status](https://camo.githubusercontent.com/77c3e5353730b717d3f5bfb61df91e4656ec479925a4fcfc4525e2d3cf0f35bb/68747470733a2f2f62616467652e7374617475732e7068702e67742f646f6d74656d706c6174652d6275696c642e737667)](https://github.com/PhpGt/DomTemplate/actions)[ ![Code quality](https://camo.githubusercontent.com/aae0fb6424e1af40a8ea3a228dd95bde2948456a175668c80207885a11f0e5d3/68747470733a2f2f62616467652e7374617475732e7068702e67742f646f6d74656d706c6174652d7175616c6974792e737667)](https://app.codacy.com/gh/PhpGt/DomTemplate)[ ![Code coverage](https://camo.githubusercontent.com/c1ca6cb20e8efa0b4118cb7937db639a4eb7eb02c442c0c6ccf7c1ff419a60e3/68747470733a2f2f62616467652e7374617475732e7068702e67742f646f6d74656d706c6174652d636f7665726167652e737667)](https://scrutinizer-ci.com/g/PhpGt/DomTemplate)[ ![Current version](https://camo.githubusercontent.com/14eb50d5a63fc7ee877494aa5e62c37a86467aea915e44979b249a7f77b04566/68747470733a2f2f62616467652e7374617475732e7068702e67742f646f6d74656d706c6174652d76657273696f6e2e737667)](https://packagist.org/packages/PhpGt/DomTemplate)[ ![PHP.G/DomTemplate documentation](https://camo.githubusercontent.com/ef5385fb3feda98b9e41a2314d86e9b905e6d481138aeb2d96929f40d97e4044/68747470733a2f2f62616467652e7374617475732e7068702e67742f646f6d74656d706c6174652d646f63732e737667)](http://www.php.gt/domtemplate)Example usage: Hello, you!
--------------------------

[](#example-usage-hello-you)

Consider a page with a form, with an input element to enter your name. When the form is submitted, the page should greet you by your name.

Without submitting the form, the HTML will be rendered untouched, showing the default message "Hello, you!".

### Source HTML (`name.html`)

[](#source-html-namehtml)

The HTML below shows a basic "Hello, you" message, but due to the `data-bind:text` attribute, when the form is submitted, the PHP code binds the submitted name to the DOM at the correct place, greeting the user.

`greeter.html`:

```

	Hello, you!

	Submit

```

### PHP used to inject your name

[](#php-used-to-inject-your-name)

```