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.

TL;DR

This library adds the HTML5 specification to PHP and is fully compatible with DOM\HTMLDocument. You can create an Anchor() object and append it to any DOM\Document.

use Html\Delegator\HTMLDocumentDelegator as HTMLDocument;
use Html\Element\Inline\Anchor;

$dom = HTMLDocument::createEmpty()
echo (string) Anchor::create($dom)
    ->setClass('secondary')
    ->setRel(RelEnum::NOFOLLOW)
    ->setHref('https://google.com')
    ->setTitle('Google it');
// output is:
// <a class="secondary" href="https://google.com" rel="nofollow" title="Google it"></a>

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 <table><tr><td>Cell</td><tr></table>)

Twig

They are compatible with different ways of using Twig (include, embed and use).

$twig->path('vendor/vardumper/extended-htmldocument/templates', 'html'); /** register template path with or without namespace */

Example

{% include '@html/inline/a.twig' with {
  href: 'https://example.com',
  title: 'Some info about the link'
  rel: 'nofollow',
  role: 'button',
  content: '<strong>Click here</strong>'
} %}

React & NextJS

Type-safe, auto-generated React components for all HTML5 elements with full ARIA support. Work in both Next.js (Server Components, Client Components) and regular React applications (CRA, Vite, etc.). They use pure functional React patterns without hooks or browser-specific APIs. Example:

import { Button, Div, H1 } from './index';

export default function Page() {
  return (
    <Div className="container">
      <H1>Welcome</H1>
      <A
        href="/contact"
      >
        Contact us
      </A>
    </Div>
  );
}

Storybook

Inside templates/storybook you can find a fully working Storybook boilerplate that includes all HTML5 elements.

Start it with:

cd templates/storybook
yarn && yarn storybook

It is supposed to help you as a starting point - helpful when creating a design system. Instead of starting from scratch, you would use the pre-made 'atoms' and thus ensure great consistrncy.

Twig Components Bundle

Symnfony introduced Twig Components as part of the much larger Symfony UX ecosystem.

While maintained and published from the templates/twig-components directory, there is a separate package to install it from.

You will find a Symfony Bundle that brings typesafe, schema-first

Documentation

See the Documentation for more.

Installation

composer require --dev vardumper/extended-htmldocument

vardumper / extended-htmldocument

Maintainers

Details