Intuitive & reusable HTML components in PHP

A practical component system for PHP – write reusable, class-based UI components with props, children, and safe rendering.

Features

• Components as PHP classes
• Props and children
• Escaped-by-default output
• Self-closing and paired syntax
• No templating engine – 100% native PHP

Installation

composer require nititech/html-components

---

Usage

Creating components

Write components directly using native PHP syntax — similar to how JSX mixes HTML and logic:

<?php

namespace components;

class Message extends \HTML\Component {
  public function render() {
    $style = match ($this->variant) {
      'success'
        => 'background-color: #e6ffed; color: #2f855a; border: 1px solid #c6f6d5;',
      'error'
        => 'background-color: #ffe6e6; color: #c53030; border: 1px solid #feb2b2;',
      'info'
        => 'background-color: #ebf8ff; color: #2b6cb0; border: 1px solid #bee3f8;',
      default
        => 'background-color: #f7fafc; color: #2d3748; border: 1px solid #e2e8f0;',
    }; ?>
    <div style="padding: 1rem; margin-bottom: 1rem; border-radius: 6px; <?= $style ?>">
        <div style="font-weight: bold; margin-bottom: 0.5rem;">
            <?= ucfirst($this->variant ?? 'Note') ?> 🔔
        </div>
        <div>
            <?= $this->children ?>
        </div>
    </div>
<?php
  }
}

Rendering components

<?php $msg = new \components\Message(['variant' => 'success']); ?>
    Your profile was updated successfully.<br />
    <a href="/cool">Continue</a>
<?php $msg->close(); ?>

💡 More convenient component usage

We have written several plugins for Vite.
To use these components more convenient follow the guide of the vite-plugin-php-components plugin.
This plugin allows you to use these components as regular HTML elements and rewrites those up on compilation into real PHP calls:

<component.ButtonComponent class="btn-main">
  Button Label
</component.ButtonComponent>

👇

<?php $c_234546546 = new \components\ButtonComponent(['class' => 'btn-main']); ?>
  Button Label
<?php $c_234546546->close(); ?>

---

Alternative usage

Self-Closing Component

<?php \components\Example::closed(['foo' => 'bar', 'class' => 'test']); ?>

With JSON Props

<?php \components\Example::closed('{"foo":"bar","class":"test"}'); ?>

---

Output Modes

Components can either echo directly or return a string for further processing (e.g. passing into templates or APIs).

With closing tag

<?php $msg = new \components\Message(['variant' => 'success']); ?>
    Your profile was updated successfully.<br />
    <a href="/cool">Continue</a>
<?php $html = $msg->close(true); // Returns HTML string instead of echoing
?>

Self-closing

$html = \components\Message::closed(
  ['variant' => 'success', 'children' => 'Something went wrong.'],
  true, // Set last parameter to return as HTML string
);

---

Notes

• HTML is written inline using regular PHP – no templating language required
• <?= $this->children; ?> is unescaped inner content, other properties are escaped and can be safely used in the HTML context
• You can mix control logic, conditions, and loops directly in PHP

Props & Escaping

Access	Escaped?	Example
$this->foo	✅ Yes	Safe for direct HTML injection
$this->__props__->safe('foo')	✅ Yes	Safe for direct HTML injection
$this->__props__->__toString()	✅ Yes	Formatted and HTML-safe string of attributes, that can be directly injected into the attributes of an element.
$this->__props__->foo or $this->__props__['foo']	❌ No	Use for raw values (e.g. JSON, IDs)
$this->__props__->filter(['*', '!class'])	❌ No	Use for getting an iterable array of raw values (e.g. to pass to child components) (excludes the children prop)
$this->__props__->__toUnsafeString()	❌ No	Formatted and not HTML-safe string of attributes, that can be printed into the attributes of a component.
[...$this->__props__]	❌ No	You can also spread the props into an array - those props are not HTML-safe!
$this->children	❌ No	Direct inner content (slot-like)

Note: Only children is unescaped by default. All other props accessed as $this->prop_name are HTML-escaped for safety.

Utilities

Components

• HTML.Element A ready-to-use component for rendering dynamic standard HTML elements with declarative props.
  Usage:

  <HTML.Element element="button" type="submit" class="container">
      Click me
  </HTML.Element>
  

  or

  <?php \HTML\Element::closed(['element' => 'img', 'src' => '/some-pic.jpg']); ?>
  

  Props:

  • element: string (required) – the HTML tag to render (e.g., "div", "section", "button")
  • other attributes – pass-through attributes/handlers (style, class, data-, aria-, etc.)

  Behavior:

  • Renders a DOM element matching element
  • Forwards additional props to the underlying element
  • Keeps semantics and browser behavior of native HTML tags

Methods

• \HTML\Utils::encode_output($input) Method to escape user-supplied or dynamic text before injecting it into HTML content, preventing XSS vulnerabilities.
  Arguments:

  • $input: mixed (required) – the data to escape

  Behavior:

  • Escapes supplied input
  • If $input is an array it concatenates all elements to a single string

---

Issues

If you encounter any other bugs or need some other features feel free to open an issue.

---

Support

Love open source? Enjoying my project?
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.

via Ko-Fi	Buy me a coffee	via PayPal