Skip to main content

Mason

GitHub
Source Dive code for Mason
v3.7.1
248
29,057

A simple block based drag and drop page / document builder field for Filament.

  • filament
  • filament-plugin
Read the docs
Mason thumbnail

Package health

Automated checks of this package

98 / 100
Security 96
Maintenance 100
Ecosystem 100
Powered by Plumb Last scanned 9 hours ago

Compatibility

Version Filament PHP Laravel Latest Docs
3.x (Current) ^4.0|^5.0 ^8.2 ^11.28|^12.0|^13.0 * v3.7.1 3.x docs
2.x ^5.0 ^8.2 ^11.28|^12.0|^13.0 * v2.0.0 —
1.x ^4.3.1 ^8.2 ^11.28|^12.0|^13.0 * v1.0.1 —
0.x ^3.2.139 ^8.2 ^10.45|^11.0|^12.0|^13.0 * v0.1.4 —

* Taken from the Filament versions this release supports, using the newest release of each.

Mason is a drag and drop page builder for Filament. Authors assemble a document from bricks — your own classes, each with a form for its settings and a Blade view for its output — and the result is stored as JSON.

Because the editor renders inside an iframe using your application's own stylesheet, what an author sees while building is what the front end will render.

The Mason editor: a live preview of the page on the left, and the brick sidebar with search on the right The Mason editor: a live preview of the page on the left, and the brick sidebar with search on the right

The pieces

  • A form field — Mason gives you the editor, with a sidebar of available bricks.
  • An infolist entry — MasonEntry renders stored content read-only.
  • Bricks — classes extending Brick, scaffolded with make:mason-brick.
  • A renderer — MasonRenderer, or the mason() helper, turns stored JSON into HTML on the front end.

Where to go next

  • Installation — install the package and import its CSS.
  • Form field — add the editor to a form and give it a preview layout.
  • Creating bricks — scaffold and write your own.
  • Rendering — output stored content on the front end.