PHPackages lagdo/ui-builder - 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. [Utility & Helpers](/categories/utility) 4. / 5. lagdo/ui-builder ActiveLibrary[Utility & Helpers](/categories/utility) lagdo/ui-builder ================ A customizable and extensible HTML UI builder. v0.6.0(4mo ago)14006MITPHPPHP >=8.0 Since Jan 20Pushed 4mo ago1 watchersCompare [ Source](https://github.com/lagdo/ui-builder)[ Packagist](https://packagist.org/packages/lagdo/ui-builder)[ Docs](https://github.com/lagdo/ui-builder)[ RSS](/packages/lagdo-ui-builder/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)DependenciesVersions (14)Used By (6) [![Scrutinizer Code Quality](https://camo.githubusercontent.com/066b559f43b064ce6037d6356a33b2bec1f7ea08dd15260e45e21e7ca6761bcc/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6c6167646f2f75692d6275696c6465722f6261646765732f7175616c6974792d73636f72652e706e673f623d6d61696e)](https://scrutinizer-ci.com/g/lagdo/ui-builder/?branch=main)[![StyleCI](https://camo.githubusercontent.com/5f722d8b92f948f1574295becfdebec51ac7f4950055f698ee711b90c7d98f2e/68747470733a2f2f7374796c6563692e696f2f7265706f732f3434393437393130382f736869656c643f6272616e63683d6d61696e)](https://styleci.io/repos/449479108) [![Latest Stable Version](https://camo.githubusercontent.com/70de9bce1c8ae1e9c73d4554273b71c0f56111e2ad410c825ee2a74d7a11666e/68747470733a2f2f706f7365722e707567782e6f72672f6c6167646f2f75692d6275696c6465722f762f737461626c65)](https://packagist.org/packages/lagdo/ui-builder)[![Total Downloads](https://camo.githubusercontent.com/d95ef78606951872d9ee054860c1ea4cb0209a6d883abd8467e042743365bd30/68747470733a2f2f706f7365722e707567782e6f72672f6c6167646f2f75692d6275696c6465722f646f776e6c6f616473)](https://packagist.org/packages/lagdo/ui-builder)[![License](https://camo.githubusercontent.com/36e41691d0ff795a6942df7d7725a3896819b914e7419632c9141e39f82a242a/68747470733a2f2f706f7365722e707567782e6f72672f6c6167646f2f75692d6275696c6465722f6c6963656e7365)](https://packagist.org/packages/lagdo/ui-builder) A customizable and extensible HTML UI builder ============================================= [](#a-customizable-and-extensible-html-ui-builder) This package provides a unified API in PHP to create UI for CSS frameworks like Bootstrap. It takes its inspiration from the [PHP HTML builder](https://github.com/avplab/php-html-builder), with functions to create UI components like menus, forms, tabs and so on. ### Motivation [](#motivation) This UI builder was first created for [Jaxon DbAdmin](https://github.com/lagdo/jaxon-dbadmin), a database admin dashboard that can be inserted in a page of an existing PHP application. Its user interface then needs to adapt to various CSS frameworks, with as little effort as possible. So rewriting all the views for each supported CSS framework was not a satisfying option. Using this UI buider, the UI of the app is written once, and the HTML code for CSS frameworks is generated automatically. Adding support of a given CSS framework is then easier and less error-prone. ### Getting Started [](#getting-started) The `BuilderInterface` in the `src/` directory defines the functions that can be used to build user interfaces. What it actually creates is not only HTML elements, but also UI components as defined by popular CSS frameworks like Bootstrap or Bulma. The classes that generate the final HTML code is provided by a separate package, which must be installed in addition to this one. #### Prerequisites [](#prerequisites) This package requires PHP version 8.0 or greater. #### Installation [](#installation) Install the packages using Composer. In the examples below, we will build simple UI components for the Bootstrap framework. ``` composer require ui-builder ui-builder-bootstrap ``` ### Usage [](#usage) The `BuilderInterface` defines the functions that are use to build the UI components. In this example, it is passed as parameter to the `View` class constructor. ``` use Lagdo\UiBuilder\BuilderInterface; class View { /** * @var BuilderInterface */ protected $html; /** * @param BuilderInterface */ public function __construct(BuilderInterface $html) { $this->html = $html; } /** * Get the HTML code of a simple form * * @param array $formData * @return string */ public function getSimpleForm(array $formData) { return $this->html->build( $this->html->form( $this->html->formRow( $this->html->formCol( $this->html->formLabel($this->html->text('Name')) ->setFor('name') ) ->width(4), $this->html->formCol( $this->html->formInput() ->setType('text') ->setName('name') ->setPlaceholder('Name') ->setValue($formData['name']) ) ->width(8) ), $this->html->formRow( $this->html->formCol( $this->html->formLabel($this->html->text('Description')) ->setFor('description') ) ->width(4), $this->html->formCol( $this->html->formTextarea($this->html->text($formData['description'])) ->setRows('10') ->setName('description') ->setWrap('on') ->setSpellcheck('false') ) ->width(8) ) ) ->responsive(true)->setId('form-id') ); } } ``` Depending on which class instance is passed to the `View` constructor, a different HTML code will be generated. With the following PHP code, ``` use Lagdo\UiBuilder\Bootstrap\Bootstrap3\Builder; $view = new View(new Builder()); ``` the `getSimpleForm()` function will generate code for Bootstrap 3. ``` Name Description ``` And with the following PHP code, ``` use Lagdo\UiBuilder\Bootstrap\Bootstrap4\Builder; $view = new View(new Builder()); ``` the same `getSimpleForm()` function will generate code for Bootstrap 4. ``` Name Description ``` ### Documentation [](#documentation) Coming soon... ### Roadmap [](#roadmap) - Add more components in the interface - Add support of more UI frameworks - Add tests See the [open issues](https://github.com/lagdo/ui-builder/issues) for a full list of proposed features (and known issues). ### Contributing [](#contributing) Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again! 1. Fork the Project 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the Branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ### License [](#license) Distributed under the MIT License. See `LICENSE.txt` for more information. ### Health Score 41 — FairBetter than 89% of packages Maintenance75 Regular maintenance activity Popularity15 Limited adoption so far Community14 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~120 days Recently: every ~1 days Total 13 Last Release 133d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ebb668d7515d81741c86e42cf3194f5623636fbb15dd5412e26ea8320865d229?d=identicon)[lagdo](/maintainers/lagdo) --- Top Contributors [![feuzeu](https://avatars.githubusercontent.com/u/15174329?v=4)](https://github.com/feuzeu "feuzeu (72 commits)") --- Tags uihtmlbuilder ### Embed Badge ![Health badge](/badges/lagdo-ui-builder/health.svg) ``` [![Health](https://phpackages.com/badges/lagdo-ui-builder/health.svg)](https://phpackages.com/packages/lagdo-ui-builder) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9475.0M86](/packages/livewire-flux)[caxy/php-htmldiff A library for comparing two HTML files/snippets and highlighting the differences using simple HTML. 21320.9M15](/packages/caxy-php-htmldiff)[avplab/php-html-builder PHP Html builder simplifies creation of an html code in php scripts. Allows to build (or generate) the html in simple natural way, similarly as create a html page. 189.2k](/packages/avplab-php-html-builder) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)