https://github.com/vardumper/extended-htmldocument
Semantic HTML5 elements as PHP classes. Includes a wrapper with convenience methods – built on top of PHP 8.4's DOM\HTMLDocument
https://github.com/vardumper/extended-htmldocument
design-system html html5 php
Last synced: about 1 month ago
JSON representation
Semantic HTML5 elements as PHP classes. Includes a wrapper with convenience methods – built on top of PHP 8.4's DOM\HTMLDocument
- Host: GitHub
- URL: https://github.com/vardumper/extended-htmldocument
- Owner: vardumper
- Created: 2025-02-17T00:24:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-31T07:10:17.000Z (about 1 year ago)
- Last Synced: 2025-03-31T07:31:19.587Z (about 1 year ago)
- Topics: design-system, html, html5, php
- Language: PHP
- Homepage: https://vardumper.github.io/extended-htmldocument/
- Size: 19.5 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Security: SECURITY.md
- Roadmap: docs/roadmap.md
Awesome Lists containing this project
README
Extended HTML Document Library
This library provides a way to work with HTML elements in PHP, offering an object-oriented approach that aligns with the HTML5 specifications.
It also provides a way to automatically transform HTML into different templating engines or code for frontend frameworks.
It also adds autocompletion to PHP for all HTML5 elements, which is especially useful when working with DOM Documents.
It adds additional functionality and a stronger focus on HTML5 while being fully compatible with PHP's DOM\HTMLDocument and DOM\HTMLElement classes.
## Installation
```bash
composer require --dev vardumper/extended-htmldocument
```
## TL;DR
This library adds the HTML5 specification to PHP and is fully compatible with `DOM\HTMLDocument`. You can now instantiate an `Anchor` without passing a document.
```php
use Html\Element\Inline\Anchor;
use Html\Enum\RelEnum;
echo (new Anchor())
->setClass('secondary')
->setRel(RelEnum::NOFOLLOW)
->setHref('https://google.com')
->setTitle('Google it')
->setContent('Click me');
// produces: Click me
```
## Generated Templates
Templates are generated from the HTML5 schema for every HTML element. These allow for better consistency in your design system(s), support all possible HTML attributes and have basic validations for enum attributes.
Files are grouped into inline, block and void elements. For elements with a specific content model, a composed template is generated as well. (eg `Cell`)
### Blade
Blade templates can be found in [`templates/blade`](https://github.com/vardumper/extended-htmldocument/tree/main/templates/blade). The [README](https://github.com/vardumper/extended-htmldocument/blob/main/templates/blade/README.md) has more infos and usage examples. Blade templates can also be installed via `npm` with the [@typesafe-html5/blade](https://www.npmjs.com/package/@typesafe-html5/blade) package.
### React & NextJS
React and NextJS templates can be found in `templates/blade`. See the Blade-specific [README](https://github.com/vardumper/extended-htmldocument/blob/main/templates/blade/README.md) file for details. Blade templates can also be installed via `npm` with the [@typesafe-html5/react](https://www.npmjs.com/package/@typesafe-html5/react) package.
### Storybook
Storybook with atoms for all HTML5 elements can be [seen in the Demo](https://vardumper.github.io/extended-htmldocument/storybook-site/). Files can be found in [`templates/storybook`](https://github.com/vardumper/extended-htmldocument/tree/main/templates/storybook). There's also a [README](https://github.com/vardumper/extended-htmldocument/blob/main/templates/storybook/README.md) with more details.
### Storybook for Twig
TBD
### Storybook for React/NextJS
TBD
### Twig
Twig templates for flexible and performant use with `include`, `embed`, and `use` can be found in [`templates/twig`](https://github.com/vardumper/extended-htmldocument/tree/main/templates/twig). See the [README](https://github.com/vardumper/extended-htmldocument/blob/main/templates/twig/README.md) for more details and usage examples. Twig templates can also be installed via `npm` with the [@typesafe-html5/twig](https://www.npmjs.com/package/@typesafe-html5/twig) package.
### Twig Components Bundle
Generated, typesafe Twig Components for use with Symfony UXs Twig Components can be found in [`templates/twig-component`](https://github.com/vardumper/extended-htmldocument/tree/main/templates/twig-component). See the [README](https://github.com/vardumper/extended-htmldocument/blob/main/templates/twig-component/README.md) for more details and usage examples. Twig templates can also be installed via the Symfony Bundle [vardumper/html5-twig-component-bundle](https://github.com/vardumper/html5-twig-component-bundle) package.
### Typescript
Typescript templates can be found in [`templates/typescript`](https://github.com/vardumper/extended-htmldocument/tree/main/templates/typescript). See the [README](https://github.com/vardumper/extended-htmldocument/blob/main/templates/typescript/README.md) for more details and usage examples. Typescript templates can also be installed via `npm` with the [@typesafe-html5/typescript](https://www.npmjs.com/package/@typesafe-html5/typescript) package.
## Documentation
See the [Documentation](https://vardumper.github.io/extended-htmldocument/) for more.