README

Layr is a TypiCMS page builder package that installs into the stock pages module and adds a block-based visual editor for fully composed pages.

What the package owns

page builder UI inside the TypiCMS page form
a configurable layr page template for public rendering
migrations for the builder payload fields on pages
package-served built assets, so the host app does not need custom Vite entries
configurable dynamic content sources for CMS-powered cards and carousels

Install

Preferred once the package is published to Packagist:

composer require layr/builder:^0.1
php artisan migrate

If you are installing from the GitLab repository before the first public release, use the VCS workflow below.

Install From GitLab Before Packagist

composer require layr/builder:dev-main
php artisan migrate

Compatibility:

TypiCMS Core 16.1.7+

Optional:

php artisan vendor:publish --tag=layr-config

When upgrading an existing install, run php artisan migrate so the compiled public payload fields are added to pages.

Composer VCS example:

{
    "repositories": [
        {
            "type": "vcs",
            "url": "https://gitlab.com/blestonbandeira/layr.git"
        }
    ],
    "require": {
        "layr/builder": "dev-main"
    }
}

If you tag releases, prefer a version constraint such as ^0.1.

Once the package is public on Packagist, you can remove the custom repositories entry and require the tagged version directly.

After install:

Open a page in TypiCMS admin.
Set the page template to Layr.
Build the page in the Layr panel.
Save the page.

Host app contract

This package is intended to be drop-in for a stock TypiCMS installation with the standard pages module views.

The package overrides the pages view namespace to provide:

pages::admin._form
pages::public.visual

If the host app already overrides either of those views, the app override will still win. In that case, one manual merge is required to include the package partials.

Layr keeps the editable builder HTML and CSS as authoring source, and compiles a sanitized public payload for frontend rendering. The builder should still only be exposed to trusted page editors, especially if you configure fixed sections that render host-defined Blade views.

Dynamic content sources

Dynamic cards and dynamic carousels are driven by config/layr.php.

Example:

'dynamic_sources' => [
    'books' => [
        'label' => 'Books',
        'permission' => 'read books',
        'model' => \TypiCMS\Modules\Books\Models\Book::class,
        'with' => ['image'],
        'public_scope' => 'published',
        'title_field' => 'title',
        'subtitle_field' => 'summary',
        'translated_title' => true,
        'translated_subtitle' => true,
        'image_relation' => 'image',
        'image_attribute' => 'url',
        'url_method' => 'url',
        'edit_url_method' => 'editUrl',
        'browse_route' => '{locale}::index-books',
        'sort_column' => 'updated_at',
    ],
],

Fields:

label: source label shown in the editor
permission: optional additional admin permission for that source; Layr already requires update pages before the builder APIs can access any source
model: Eloquent model class
with: relations to eager load
public_scope: optional scope applied when rendering public-facing dynamic blocks
title_field / subtitle_field: fields used in picker cards
translated_title / translated_subtitle: whether to use TypiCMS translations when available
image_relation / image_attribute: how preview images are resolved
url_method: public URL method for rendered cards
edit_url_method: admin edit URL method for picker actions
browse_route: optional route name, with {locale} placeholder support
sort_column: column used for recent ordering

Public Sanitization

Layr sanitizes the compiled public HTML and CSS before rendering:

dangerous tags like script, style, object, embed, and form are removed
inline event handlers are removed
links, media sources, and iframe sources are scheme-checked
inline styles and stylesheets are filtered to remove dangerous CSS tokens such as expression(...), javascript:, and @import

For iframe-based embeds, configure the allowed hosts in config/layr.php:

'sanitizer' => [
    'allowed_iframe_hosts' => [
        'www.youtube.com',
        'youtube.com',
        'www.youtube-nocookie.com',
        'youtube-nocookie.com',
        'player.vimeo.com',
    ],
],

Frontend build

End users do not need Node or a host-app Vite entry. The package serves its own built assets from dist/.

When maintaining the package:

npm install
npm run build

That produces:

dist/admin.js
dist/admin.css
dist/public.css

Smoke Test

To verify Layr against a fresh stock TypiCMS app:

./scripts/ci/smoke-typicms.sh

That script creates a temporary TypiCMS install, requires Layr through a local path repository, migrates, and checks the install, page form integration, save request binding, and public render path.

Note: the stock TypiCMS bootstrap currently expects the PHP redis extension during package discovery, so the smoke app should run in an environment where ext-redis is available.

layr / builder

Maintainers

Package info

Statistics

Security