Skip to content

Home

Jump to bottom
Abdulkader Safi edited this page Aug 18, 2026 · 9 revisions

Filament Atelier

A visual page builder for Laravel, built as a Filament plugin.

A developer defines the sections in code. The client builds pages from them in a full-screen editor and watches the real page update as they type. The public site stays server-rendered Blade, bilingual, and fast.

Current version: v0.2.0. Working and installable. The block contract may still change, which is why it is 0.x.

Start here

Page What it covers
Installation Getting it onto a project, and the steps that fail silently
Usage The editor, page settings, and the day-to-day flow
Blocks Writing your own section types, and the five things that bite
Layouts Several shells, picked per page
Design tokens Colour, type and spacing shared by the editor and the site
Bilingual and RTL Two languages in one tree, and mirroring properly
Publishing Drafts, publishing, preview links and revisions
SEO Meta, the sitemap, redirects, and URLs Atelier does not own
Structured data The JSON-LD graph, page types, FAQ, and your own routes
Configuration Every key in config/atelier.php
Troubleshooting Everything that fails quietly, and why
How it works The data model, and the reasoning behind it
Agent quickstart A copy-pasteable brief for an AI coding agent

The idea in one paragraph

A page is stored as a JSON tree of typed blocks and rendered by Blade at request time. A block type is one PHP class plus one Blade view; the class returns a Filament schema, which becomes its settings form. The editor arranges and fills blocks, and the preview renders the real page through the public layout and the public stylesheet, so what you see is what ships.

Requirements

  • PHP 8.3 or newer
  • Laravel 12 or 13
  • Filament 5
  • Tailwind 4 on the front end

Install

composer require safi/filament-atelier

Then follow Installation. Three steps there fail quietly if you skip them, so do not skim it.

What ships today

  • A three-pane editor with a live preview that is the real page
  • Nine blocks: hero, features, logo wall, testimonials, CTA, FAQ, rich text, image, gallery
  • Shared background and spacing controls a block opts into
  • Design tokens read by both the editor and the front end
  • Multiple layouts, picked per page
  • English and Arabic on every page, with dir="rtl" and hreflang
  • Draft and published as separate columns, revision snapshots, signed preview links
  • Per-locale SEO fields, a sitemap, robots.txt, per-page noindex, and 301s on slug changes
  • JSON-LD on every page, generated from blocks or typed per page

What it is not

  • Not a tool for creating block types from the browser. Blocks are code. That is deliberate, and it is what stops a client breaking the design.
  • Not a theme or a design system. You write the markup.
  • Not multi-tenant. One install, one site.

Not built yet

Header, footer, contact form and raw HTML blocks. Drag to reorder, and inserting a section anywhere but the end. A revisions UI. Per-block asset loading and a measured performance budget. Scheduled publishing.

Filament Atelier

Building

Running a site

Reference

Repository · Changelog

Clone this wiki locally