PHPackages                             linksderisar/clay - 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. [API Development](/categories/api)
4. /
5. linksderisar/clay

AbandonedArchivedLibrary[API Development](/categories/api)

linksderisar/clay
=================

Create Json Blueprints for the Vue.js Clay Renderer

06PHP

Since Jan 10Pushed 7y agoCompare

[ Source](https://github.com/linksderisar/clay)[ Packagist](https://packagist.org/packages/linksderisar/clay)[ RSS](/packages/linksderisar-clay/feed)WikiDiscussions master Synced 3d ago

READMEChangelogDependenciesVersions (1)Used By (0)

Clay
====

[](#clay)

Installation
------------

[](#installation)

```
composer require linksderisar/clay
```

Basic Usage
-----------

[](#basic-usage)

```
\Linksderisar\Clay\Components\Base\Component::make('div')->toJson();

// Or return it directly from the Controller

Route::get('/', function () {
    return \Linksderisar\Clay\Components\Base\Component::make('div');
});
```

### Add Attributes

[](#add-attributes)

You can add all html Attributes like id, class, placeholder... with the attribute() or attributes() function from the `Base/Component`

```
\Linksderisar\Clay\Components\Base\Component::make('div')
    ->attribute('id', 'identifier');

// Or add multiple Attributes at once with attributes(array)

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->attributes(['id' => 'identifier']);
```

### Add Classes

[](#add-classes)

You can add classes to your tag using the `attribute('class','my-css-class')` or you use the `classes()` function. The classes() function excepts strings and arrays.

```
\Linksderisar\Clay\Components\Base\Component::make('div')
    ->classes('my-css-class my-other-css-class');

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->classes(['my-css-class', 'my-other-css-class']);

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->classes([
        'my-css-class' => true,
        'css-class-who-wont-be-added-in-the-dom' => false
    ]);
```

### Add Props

[](#add-props)

You can add vue props using the `prop('class','my-css-class')` function.

```
\Linksderisar\Clay\Components\Base\Component::make('div')
    ->prop('my-Prop', 'prop-value');

\Linksderisar\Clay\Components\Base\Component::make('div')
    ->props(['my-Prop'=> 'prop-value']);
```

### Examples

[](#examples)

#### An overwhelming example

[](#an-overwhelming-example)

PHP Code:

```
 return Page::create(
        Component::make('div')
            ->key('someKey')
            ->ref('ref')
            ->refInFor()
            ->classes('some-class')
            ->prop('staticProp', 'value')
            ->if('a === b')
            ->show('c === b')
            ->loop('array/object')
            ->style('background-color', 'black')
            ->children(
                Component::make('span')->text('Some Text between the Tags'),
                Component::make('some-component')
                    ->scopedSlots(function ($scope) {
                        return [Component::make('div')
                            ->on('someEvent', $scope('scoped.method()'))
                            ->bind(function ($component) use ($scope) {
                                return $component->prop('boundProp', $scope('scoped.value'));
                            })];
                    })
            )
    )
        ->store(['variable' => 'value'])
        ->header([
            'title' => 'Titel der seite',
            'link' => ['rel' => 'stylesheet', 'href' => '/some/css.css']
        ]);
```

Generated Json Blueprint:

```
    {
        "store": {
            "variable": "value"
        },
        "meta": {
            "version": "1.0.0"
        },
        "head": {
            "title": "Titel der seite",
            "link": {
                "rel": "stylesheet",
                "href": "/some/css.css"
            }
        },
        "componentTree": {
            "id": "ERX1cc5HWzDuKUMF",
            "type": "div",
            "attributes": {
                "key": "someKey",
                "ref": "ref",
                "refInFor": true,
                "style": {
                    "background-color": "black"
                },
                "props": {
                    "staticProp": "value"
                },
                "class": [
                    "some-class"
                ]
            },
            "loop": "array/object",
            "if": "a === b",
            "show": "c === b",
            "children": [
                {
                    "id": "nMkHWwpuogLFqZwE",
                    "type": "span",
                    "children": {
                        "id": "Sr6cm4i2ojUH48KW",
                        "type": "$text",
                        "value": "Some Text between the Tags"
                    }
                },
                {
                    "id": "X4XzTHudtT6kxxzi",
                    "type": "some-component",
                    "scopedSlots": [
                        {
                            "id": "lPusFpNEW0LxSsGr",
                            "type": "div",
                            "attributes": {
                                "props": {
                                    ":boundProp": "$_slot_props.X4XzTHudtT6kxxzi.scoped.value"
                                },
                                "on": {
                                    "someEvent": "$_slot_props.X4XzTHudtT6kxxzi.scoped.method()"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    }
```

### Blueprints

[](#blueprints)

- **protected** generateId()
- **public** clone()
- **public static** create(...$attributes)
- **public** toArray()
- **public** toJson()
- **public** \_\_toString()

### ComponentBlueprint

[](#componentblueprint)

### ConditionBlueprint

[](#conditionblueprint)

#### IfConditionBlueprint

[](#ifconditionblueprint)

#### ShowConditionBlueprint

[](#showconditionblueprint)

### TextBlueprint

[](#textblueprint)

### LoopBlueprint

[](#loopblueprint)

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 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/6caaa4ad5c531405e77f53cc9db5e523f267b45a45b3eefeb13560cccaf001aa?d=identicon)[thettler](/maintainers/thettler)

---

Top Contributors

[![thettler](https://avatars.githubusercontent.com/u/12132389?v=4)](https://github.com/thettler "thettler (20 commits)")

### Embed Badge

![Health badge](/badges/linksderisar-clay/health.svg)

```
[![Health](https://phpackages.com/badges/linksderisar-clay/health.svg)](https://phpackages.com/packages/linksderisar-clay)
```

###  Alternatives

[stripe/stripe-php

Stripe PHP Library

4.0k143.3M480](/packages/stripe-stripe-php)[twilio/sdk

A PHP wrapper for Twilio's API

1.6k92.9M272](/packages/twilio-sdk)[knplabs/github-api

GitHub API v3 client

2.2k15.8M187](/packages/knplabs-github-api)[facebook/php-business-sdk

PHP SDK for Facebook Business

90121.9M34](/packages/facebook-php-business-sdk)[meilisearch/meilisearch-php

PHP wrapper for the Meilisearch API

73813.7M114](/packages/meilisearch-meilisearch-php)[google/gax

Google API Core for PHP

263103.1M454](/packages/google-gax)

PHPackages © 2026

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