PHPackages aponahmed/blockeditor-php-client - 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. aponahmed/blockeditor-php-client ActiveLibrary[Utility & Helpers](/categories/utility) aponahmed/blockeditor-php-client ================================ JSON to Html Builder, JSON Generated by BlockEditor v1.0.3(2y ago)123MITPHPPHP ^7.4 || ^8.0 Since Jan 3Pushed 2y ago1 watchersCompare [ Source](https://github.com/AponAhmed/PHP-Client-for-Block-Editor)[ Packagist](https://packagist.org/packages/aponahmed/blockeditor-php-client)[ RSS](/packages/aponahmed-blockeditor-php-client/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)DependenciesVersions (5)Used By (0) Block Editor PHP Client Documentation ===================================== [](#block-editor-php-client-documentation) The Block Editor PHP Client is a set of PHP classes that facilitate the creation and rendering of HTML elements for a block editor(From JSON data). Json Data generate by a JavaScript App linked Below. It provides an object-oriented approach to building dynamic and customizable layouts. Install ------- [](#install) ``` composer require aponahmed/blockeditor-php-client ``` Uses ---- [](#uses) ``` use Aponahmed\HtmlBuilder\ElementFactory; require_once 'vendor/autoload.php'; //Json String From Generate by Builder(Link Below) $jsonString='[{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"BlockEditor - A Simple and Easy Handle Html Builder","tag":"h2","more":{"customClass":""}},{"type":"P","align":"left","content":"The Block Editor is a versatile web development tool designed for creating dynamic and customizable layouts. Built using  HTML, CSS, and JavaScript, this editor empowers web developers to effortlessly construct content-rich pages with a variety of components.","more":{"customClass":""}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}},{"type":"Area","direction":"row","childs":[{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"Features","tag":"h3","more":{"customClass":""}},{"type":"P","align":"left","content":"Extensibility: The editor is designed with future extensibility in mind, allowing for the seamless addition of new features or specialized methods.Documentation: Ongoing efforts to improve documentation, including comments and JSDoc, to enhance code readability and maintainability.Modularity: Components can be easily added or removed, promoting a modular and scalable approach to building layouts.Customization: The editor allows for the customization of individual components through properties, such as custom classes, padding, background, border, and border radius.Context Menus: Context menus provide quick access to actions like creating new areas, inserting components, deleting areas, changing direction, resizing, and accessing properties.Resizable Layouts: Users can dynamically resize areas, enhancing the flexibility of the editor in adapting to various content needs.Component Browser: A convenient component browser facilitates the insertion of new components, streamlining the development process.","more":{"customClass":""}}],"width":50,"more":{"customClass":"feature-area","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#e8e8e8","padding":"25px","margin":"0px"}}},{"type":"Area","direction":"column","childs":[{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"Components","tag":"h3","more":{"customClass":""}},{"type":"List","align":"left","listType":"ul","items":["Heading H1-H6","Paragraph","List (ul/ol)","Column with some default orientation","Image WordPress","Editor WpEditor"],"more":{"customClass":""}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#a1b56c","padding":"30px"}}},{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"Key Feature","tag":"h3","more":{"customClass":""}},{"type":"List","align":"left","listType":"ol","items":["Easy Create Any layout","Modular Component System","Dynamic HTML Element Creation","Component Icons","User-Friendly Event Handling","HTML Parsing"],"more":{"customClass":""}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#86c1b9","padding":"30px","margin":"10px 0 0"}}}],"width":50,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#e8e8e8"}}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}}]'; echo ElementFactory::json2html($jsonString)//Here Html Will be generated ``` JSON Builder ------------ [](#json-builder) Here is the JSON builder for a block editor : [BlockEditor](https://github.com/AponAhmed/BlockEditor) A quick preview of JSON Builder [Codepen](https://codepen.io/apon22/full/abXPPyB) Table of Contents ----------------- [](#table-of-contents) - [Element Class](#element-class) - [Area Class](#area-class) - [TextElement Class](#textelement-class) - [ListElement Class](#listelement-class) - [createElement Function](#createelement-function) - [JSON Structure](#json-structure) - [Usage](#usage) Element Class ------------- [](#element-class) The `Element` class is an abstract base class that serves as the foundation for specific HTML elements. It includes methods for setting attributes, styles, and classes, as well as rendering the element. ### Methods [](#methods) #### `setAttribute($name, $value)` [](#setattributename-value) Sets the attribute of the element. #### `addStyle($propertyName, $propertyValue)` [](#addstylepropertyname-propertyvalue) Adds a style to the element. #### `addClass($name)` [](#addclassname) Adds a class to the element. #### `setStyleAttribute()` [](#setstyleattribute) Sets the style attribute based on the added styles. #### `setClassAttribute()` [](#setclassattribute) Sets the class attribute based on the added classes. #### `render($indent = 0)` [](#renderindent--0) Abstract method to be implemented by subclasses for rendering the HTML representation of the element. Area Class ---------- [](#area-class) The `Area` class extends the `Element` class and represents a block or container area. It can contain child elements and has additional properties like direction and width. ### Properties [](#properties) - `$childs`: An array of child elements. - `$dir`: The direction of the area ('row' or 'column'). - `$width`: The width of the area. ### Methods [](#methods-1) #### `addChild(Element $child)` [](#addchildelement-child) Adds a child element to the area. #### `render($indent = 0)` [](#renderindent--0-1) Renders the HTML representation of the area. #### `renderMarkdown($indent = 0)` [](#rendermarkdownindent--0) Renders the Markdown representation of the area. TextElement Class ----------------- [](#textelement-class) The `TextElement` class extends the `Element` class and represents a text-based HTML element. ### Properties [](#properties-1) - `$content`: The content of the text element. ### Methods [](#methods-2) #### `render($indent = 0)` [](#renderindent--0-2) Renders the HTML representation of the text element. #### `renderMarkdown($indent = 0)` [](#rendermarkdownindent--0-1) Renders the Markdown representation of the text element. ListElement Class ----------------- [](#listelement-class) The `ListElement` class extends the `Element` class and represents a list HTML element. ### Properties [](#properties-2) - `$listType`: The type of the list ('ul' or 'ol'). - `$items`: An array of child elements representing list items. ### Methods [](#methods-3) #### `addChild(Element $item)` [](#addchildelement-item) Adds a child element (list item) to the list. #### `render($indent = 0)` [](#renderindent--0-3) Renders the HTML representation of the list. createElement Function ---------------------- [](#createelement-function) The `createElement` function is a helper function to create instances of the various element classes based on provided JSON data. JSON Structure -------------- [](#json-structure) The structure of the JSON data used to define the layout and content of the block editor. Usage ----- [](#usage) Example usage of the Block Editor PHP Client to generate HTML output. ### Health Score 23 — LowBetter than 27% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community7 Small or concentrated contributor base Maturity50 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 ~7 days Total 4 Last Release 839d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/dbce5240b2b96ec20bdfe975fb8e96d1b3b78f85979bfa5e51fbde62de9b0cfa?d=identicon)[AponAhmed](/maintainers/AponAhmed) --- Top Contributors [![AponAhmed](https://avatars.githubusercontent.com/u/24431220?v=4)](https://github.com/AponAhmed "AponAhmed (16 commits)") ### Embed Badge ![Health badge](/badges/aponahmed-blockeditor-php-client/health.svg) ``` [![Health](https://phpackages.com/badges/aponahmed-blockeditor-php-client/health.svg)](https://phpackages.com/packages/aponahmed-blockeditor-php-client) ``` ### Alternatives [php-ffmpeg/extras A set of audio/video formats compatible with PHP-FFMpeg 182287.6k1](/packages/php-ffmpeg-extras) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)