PHPackages                             fe3dback/kx-draw - 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. fe3dback/kx-draw

AbandonedArchivedLibrary

fe3dback/kx-draw
================

PHP/JS handlebars wrapper with reactive update

117PHP

Since Oct 9Pushed 8y ago1 watchersCompare

[ Source](https://github.com/fe3dback/kx-draw)[ Packagist](https://packagist.org/packages/fe3dback/kx-draw)[ RSS](/packages/fe3dback-kx-draw/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependenciesVersions (1)Used By (0)

[![Build Status](https://camo.githubusercontent.com/159518e095c225fee609cd94ecab5bd0a0b174af91c0d14b048eaa42640ea4e9/68747470733a2f2f7472617669732d63692e6f72672f666533646261636b2f6b782d647261772e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/fe3dback/kx-draw)[![Coverage Status](https://camo.githubusercontent.com/2534b5f755525e250fe894d78252714f4911680b078c96c80c96b24bb9da66be/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f666533646261636b2f6b782d647261772f62616467652e7376673f6272616e63683d6d6173746572)](https://coveralls.io/github/fe3dback/kx-draw?branch=master)

Handlebars Render (PHP/JS)
==========================

[](#handlebars-render-phpjs)

This is reactive two side template library for handlebars. One template you can render on both sides:

- backend \[PHP\]
- frontend \[JS\] (optional)

Lib is wrapper of fastest handlebars implementation, based on: [zordius/lightncandy](https://github.com/zordius/lightncandy)

[![Unit testing](https://camo.githubusercontent.com/20e17fcb2f0b10c80027159cd4bed7a14a376a271007d2581900444f53b40d6d/68747470733a2f2f7472617669732d63692e6f72672f7a6f72646975732f6c696768746e63616e64792e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/zordius/lightncandy)[![Regression testing](https://camo.githubusercontent.com/6eb54e036baec6d0be234901d79e2a29038cef90df5c62012d6ff1918dd327f6/68747470733a2f2f7472617669732d63692e6f72672f7a6f72646975732f48616e646c6562617273546573742e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/zordius/HandlebarsTest)[![License](https://camo.githubusercontent.com/0b2a7e49e271c0cc3d404eff69c17b2572c3bd17f6d05accaf82df8375467167/68747470733a2f2f706f7365722e707567782e6f72672f7a6f72646975732f6c696768746e63616e64792f6c6963656e73652e737667)](https://github.com/zordius/lightncandy/blob/master/LICENSE.md)[![Total Downloads](https://camo.githubusercontent.com/5954a2793b7ff105be4263c784913d17f1f841d409440218800ad92d345f0a13/68747470733a2f2f706f7365722e707567782e6f72672f7a6f72646975732f6c696768746e63616e64792f646f776e6c6f616473)](https://packagist.org/packages/zordius/lightncandy)

Install
-------

[](#install)

```
$ composer require fe3dback/kx-draw
```

##### Requirements \[PHP side\]:

[](#requirements-php-side)

- php >= 7.0
- [composer](https://getcomposer.org/)

Use
---

[](#use)

### Prepare directories

[](#prepare-directories)

- First of all you need to make tmp folder inside your project, kxdraw will be store all cache data to optimize render speed. Check RWO access to this directory.
- Also you need some folder for templates.

Something like this:

```
- my_project_root
|- example.php              // some php script
|- tmp/draw                 // any cache will be here
|- public/templates/*.hbs   // templates folder

```

### Require lib

[](#require-lib)

*code from example.php*

```
use KX\Template\Builders\EngineFactory;
use KX\Template\Draw;

require_once 'vendor/autoload.php';

$draw = new Draw
(
    (new EngineFactory())
        ->setExt('hbs')                         // templates file extension (*.hbs)
        ->setCacheDirReal($cacheDir)            // cache directory (we can safely delete dir, and cache will be rebuild)
        ->setTemplatesDirReal($templatesDir)    // where our templates live
        ->setUseCache(true)                     // recommend to turn ON this feature (compile only first time)
        ->setUseMemCache(true)                  // recommend to turn ON this feature (helpful for loops)
        ->build()
);
```

Ok, we got $draw class, so we can render some template:

*code from public/templates/hello.hbs*

```
Hello {{name}}!
```

*code from example.php*

```
$html = $draw->render('hello', 1, [
    'name' => 'world'
]);
```

What we use:

- **'hello'** - this is template file name (without extension)
- **1** - unique render id. Good idea to use EntityID (productId, userId, articleId, etc..) for that.
- **\['name'=>'world'\]** - data used in template

Result will be in *$html*:

```
Hello world!
```

### Global scope use

[](#global-scope-use)

In some case we want to use DrawLib from any application place:

Put this code in any shared file, executed from every other script (common.php, etc..)

```
/**
 * Get draw object
 * global scope wrapper
 *
 * @return Draw
 */
function KXDraw(): Draw
{
    global $__kxDrawEntity;

    if (is_null($__kxDrawEntity))
    {
        $cacheDir = '/'; // todo replace to your dir
        $templatesDir = '/'; // todo replace to your dir

        // make draw object, we can use only this class directly
        $__kxDrawEntity = new Draw
        (
            (new EngineFactory())
                ->setExt('hbs')                         // templates file extension (*.hbs)
                ->setCacheDirReal($cacheDir)            // cache directory (we can safely delete dir, and cache will be rebuild)
                ->setTemplatesDirReal($templatesDir)    // where our templates stored
                ->setUseCache(true)                     // recommend to turn ON this feature (compile only first time)
                ->setUseMemCache(true)                  // recommend to turn ON this feature (helpful for loops)
                ->build()
        );
    }

    return $__kxDrawEntity;
}
```

Use:

```
$html = KXDraw()->render('hello', 1, [
    'name' => 'world'
]);
```

### Partials

[](#partials)

Before use partials in our templates, we need to mark some templates (or entire folders as partials).

```
// mark /templates/common/header.hbs
KXDraw()->addPartial('/common/header');

// mark /templates/shared/*/*
KXDraw()->addPartialsDirectory('shared');
```

Now any marked templates can be used as partials:

*code from public/templates/hello.hbs*

```
Hello {{> shared/name}}!
```

*code from public/templates/shared/name.hbs*

```
{{name}}
```

*code from example.php*

```
$html = KXDraw()->render('hello', 1, [
    'name' => 'world'
]);
```

Result will be in *$html*:

```
Hello world!
```

### Templates and Reactivity

[](#templates-and-reactivity)

- All templates should have only one parent. (like in react). For example:

*This is OK*:

```
..some_content..
```

*This will be broken*:

```
..some_content1..
..some_content2..
```

In case when template have many nodes, we can wrap with some another div/span/etc..

*This is OK*:

```

    ..some_content1..
    ..some_content2..

```

#### Export to JS

[](#export-to-js)

##### Requirements \[JS side\]:

[](#requirements-js-side)

- [jquery](https://developers.google.com/speed/libraries/) >= 2.\*
- handlebars.js

Handlebars can be installed with many variants:

- [list handlebars.min-latest.js](http://builds.handlebarsjs.com.s3.amazonaws.com/bucket-listing.html?sort=lastmod&sortdir=desc)
-

##### Include

[](#include)

- place JQ and handlebars.js anywhere in markup (for example before < / body> tag closing)
- **AFTER** place js draw implementation and exported data:

```

exportToJS()?>
```

JS Usage
--------

[](#js-usage)

Go to page with templates and lib, and try in console:

```
KXDraw
// KXDrawRender {templates: Object, data: Object, partials: Object}
```

If lib included correctly, this object should contain all data, templates and partials from backend

### Methods:

[](#methods)

#### KXDraw.getRawData()

[](#kxdrawgetrawdata)

Return all data used in backend

```
KXDraw.getRawData()
// Object {hello: Object}
```

#### KXDraw.getRawPartials()

[](#kxdrawgetrawpartials)

Return all partials

```
KXDraw.getRawPartials()
// Object {shared/name: "{{name}}"}
```

#### KXDraw.getRawTemplates()

[](#kxdrawgetrawtemplates)

Return all raw templates from backend files

```
KXDraw.getRawTemplates()
// Object {hello: "Hello {{> shared/name}}!"}
```

#### KXDraw.update(templateName, uniqueId, data = {}, assign = true)

[](#kxdrawupdatetemplatename-uniqueid-data---assign--true)

Update html template on page, and template data.

- string **templateName** - path to templateFile (relative without extension)
- string **uniqueId** - id from backend
- object **data** - object with fields
- bool **assign** *DEF: TRUE* - if true, update will combine old data with new data

```
KXDraw.update('hello', 1, {name:"KXRender"});
// true
```

**Assign example**

```
// old data:
{
    a: 1,
    b: 2
}

// new data:
{
    b: 4
}

// RESULT WITH ASSIGN:
{
    a: 1,
    b: 4
}

// RESULT WITHOUT ASSIGN:
{
    b: 4
}
```

#### KXDraw.getDataByUniqId(templateName, uniqueId)

[](#kxdrawgetdatabyuniqidtemplatename-uniqueid)

Get stored data from used template

- string **templateName** - path to templateFile (relative without extension)
- string **uniqueId** - id from backend

```
KXDraw.getDataByUniqId('hello', 1);
// Object {
// name: "world",
// _kx_draw_template_name: "hello",
// _kx_draw_unique_id: "1"
// }
```

#### KXDraw.getNodeByUniqId(templateName, uniqueId)

[](#kxdrawgetnodebyuniqidtemplatename-uniqueid)

Get Jquery node object

- string **templateName** - path to templateFile (relative without extension)
- string **uniqueId** - id from backend

```
KXDraw.getNodeByUniqId('hello', 1);
// [b, prevObject: r.fn.init(1)]
// > 0: b
// > length: 1
```

Examples
--------

[](#examples)

see examples folder.

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity41

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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/e6fad0f59a23c50af19966a2cd9351a5b70be5511831b7ce7f7e6dac52942e5b?d=identicon)[fe3dback](/maintainers/fe3dback)

---

Top Contributors

[![fe3dback](https://avatars.githubusercontent.com/u/2073883?v=4)](https://github.com/fe3dback "fe3dback (19 commits)")

---

Tags

declarativehandlebarshbsjslightncandypartialsphp7reactivetemplate

### Embed Badge

![Health badge](/badges/fe3dback-kx-draw/health.svg)

```
[![Health](https://phpackages.com/badges/fe3dback-kx-draw/health.svg)](https://phpackages.com/packages/fe3dback-kx-draw)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)