Improving the default Craft matrix field publishing experience
![Tech chat default image](https://cdn.weareferal.com/assets/uploads/illustrations/tech_chat_default_image.jpg)
Craft matrix fields can be unwieldly once you've added a number of blocks. We've created a plugin to help
For bigger, content-heavy websites it sometimes make sense to create a “content builder” for your clients so that they can create their own page layouts.
There are some great posts on how to create a system like this with Craft but the gist of it is that you use a matrix field with a single “block” for each design element/component you want the client to be able to publish.
For example, here’s how some of our content maps to the blocks in our “content” matrix field used to publish this post:
![Blog Posts image](https://cdn.weareferal.com/assets/uploads/posts/Blog-Posts.png)
The problem is that if you have a lot of these (say 5 or more), it becomes difficult to figure out exactly what each block does. You can name them sensibly (like “hero”, “rich text”, “callout” etc.) but as their numbers grow it gets hard to remember them.
![Screenshot 2020 04 07 at 13 47 23 image](https://cdn.weareferal.com/assets/uploads/posts/Screenshot-2020-04-07-at-13.47.23.png)
![Screenshot 2020 04 07 at 13 46 56 image](https://cdn.weareferal.com/assets/uploads/posts/Screenshot-2020-04-07-at-13.46.56.png)
There are some great plugins already in the Craft Store like MatrixMate and Spoon that help to organise your fields into more managable groups, but as your blocks grow it would help to be able to visualise what they’re going to look like.
That’s where Matrix Field Preview comes in.
![Matrix Field Preview Logo image](https://cdn.weareferal.com/assets/uploads/posts/Matrix-Field-Preview-Logo.png)
Matrix Field Preview lets you configure all of your matrix field blocks in your Craft settings, allowing you to add a description and an image of the rendered block (ideally a screenshot).
![Screenshot 2020 04 07 at 13 47 49 image](https://cdn.weareferal.com/assets/uploads/posts/Screenshot-2020-04-07-at-13.47.49.png)
![Screenshot 2020 04 07 at 14 00 24 image](https://cdn.weareferal.com/assets/uploads/posts/Screenshot-2020-04-07-at-14.00.24.png)
Once you’ve added your descriptions and screenshots, you’ll have a totally new publishing experience when you go to edit your entries.
Instead of the regular dropdown, you’ll now see a modal appear with all the previews.
![Screenshot 2020 04 07 at 14 03 36 image](https://cdn.weareferal.com/assets/uploads/posts/Screenshot-2020-04-07-at-14.03.36.jpg)
As well as the overlay, there’s also a smaller preview inserted to each existing block.
![Screenshot 2020 04 07 at 14 03 47 image](https://cdn.weareferal.com/assets/uploads/posts/Screenshot-2020-04-07-at-14.03.47.jpg)
![Screenshot 2020 04 07 at 14 03 48 image](https://cdn.weareferal.com/assets/uploads/posts/Screenshot-2020-04-07-at-14.03.48.jpg)
With these improvements it should make it easier for clients to add content quickly and confidently and take the guess work out of adding new blocks.
Interested in trying it out?
Head over to the Craft Plugin Store to try it out on your next project.
![Timmy O'Mahony](https://cdn.weareferal.com/assets/uploads/timmy/_200x200_crop_center-center_75_none/timmy-omahony-small.jpg)