PHPackages                             van-ons/laraberg - 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. [Utility & Helpers](/categories/utility)
4. /
5. van-ons/laraberg

ActiveLibrary[Utility & Helpers](/categories/utility)

van-ons/laraberg
================

A Gutenberg implementation for Laravel

v2.0.4(3y ago)1.4k394.0k↓18.5%13915GPL-3.0-or-laterPHPCI passing

Since Apr 3Pushed 1y ago46 watchersCompare

[ Source](https://github.com/VanOns/laraberg)[ Packagist](https://packagist.org/packages/van-ons/laraberg)[ RSS](/packages/van-ons-laraberg/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (3)Versions (35)Used By (15)

[![logo](./logo-text.svg)](./logo-text.svg)

Laraberg
========

[](#laraberg)

Laraberg aims to provide an easy way to integrate the Gutenberg editor with your Laravel projects. It takes the Gutenberg editor and adds all the communication and data it needs to function in a Laravel environment.

Quick start
-----------

[](#quick-start)

### Requirements

[](#requirements)

DependencyMinimum versionPHP8.1### Installation

[](#installation)

Install the package using Composer:

```
composer require van-ons/laraberg
```

Add the vendor files to your project (CSS, JS & config):

```
php artisan vendor:publish --provider="VanOns\Laraberg\LarabergServiceProvider"
```

#### JavaScript and CSS files

[](#javascript-and-css-files)

The package provides a JS and CSS file that should be present on the page you want to use the editor on:

```

```

#### Dependencies

[](#dependencies)

The Gutenberg editor expects React, ReactDOM, Moment and JQuery to be in the environment it runs in. An easy way to do this would be to add the following lines to your page:

```

```

### Usage

[](#usage)

#### Initializing the Editor

[](#initializing-the-editor)

The Gutenberg editor should replace an existing textarea in a form. On submit, the raw content from the editor will be put in the `value` attribute of this textarea:

```

```

In order to edit the content on an already existing model, we have to set the value of the textarea to the raw content that the Gutenberg editor provided:

```
{{ $model->content }}
```

To initialize the editor, all we have to do is call the initialize method with the ID of the textarea. You probably want to do this inside a `DOMContentLoaded` event.

And that's it! The editor will replace the textarea in the DOM, and on a form submit the editor content will be available in the textarea's value attribute.

```
Laraberg.init('[id_here]')
```

#### Configuration options

[](#configuration-options)

The `init()` function takes an optional configuration object which can be used to change Laraberg's behaviour in some ways:

```
const options = {}
Laraberg.init('[id_here]', options)
```

The `options` object should be an `EditorSettings` object:

```
interface EditorSettings {
    height?: string;
    mediaUpload?: (upload: MediaUpload) => void;
    fetchHandler?: FetchHandler;
    disabledCoreBlocks?: string[];
    alignWide?: boolean;
    supportsLayout?: boolean;
    maxWidth?: number;
    imageEditing?: boolean;
    colors?: Color[];
    gradients?: Gradient[];
    fontSizes?: FontSize[];
}
```

#### Models

[](#models)

In order to add the editor content to a model, Laraberg provides the `RendersContent` trait:

```
use VanOns\Laraberg\Traits\RendersContent;

class MyModel extends Model
{
    use RendersContent;
}
```

This adds the `render` method to your model, which takes care of rendering the raw editor content. By default, the `render` method renders the content in the `content` column. This column can be changed by setting the `$contentColumn`property on your model to the column that you want to use instead:

```
use VanOns\Laraberg\Traits\RendersContent;

class MyModel extends Model
{
    use RendersContent;

    protected $contentColumn = 'my_column';
}
```

You can also pass the column name to the render method:

```
$model->render('my_column');
```

#### Custom Blocks

[](#custom-blocks)

Gutenberg allows developers to create custom blocks. For information on how to create a custom block you should read the [Gutenberg documentation](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/).

Registering custom blocks is fairly easy. A Gutenberg block requires the properties `title`, `icon` and `categories`. It also needs to implement the functions `edit()` and `save()`:

```
const myBlock =  {
  title: 'My First Block!',
  icon: 'universal-access-alt',
  category: 'my-category',

  edit() {
    return Hello editor.
  },

  save() {
    return Hello saved content.
  }
}

Laraberg.registerBlockType('my-namespace/my-block', myBlock)
```

##### Server-side blocks

[](#server-side-blocks)

Server-side blocks can be registered in Laravel. You probably want to create a ServiceProvider and register your server-side blocks in its `boot` method:

```
class BlockServiceProvider extends ServiceProvider
{
    public function boot() {
        Laraberg::registerBlockType(
            'my-namespace/my-block',
            [],
            function ($attributes, $content) {
                return view('blocks.my-block', compact('attributes', 'content'));
            }
        );
    }
}
```

#### WordPress exports

[](#wordpress-exports)

Laraberg uses the WordPress Gutenberg packages under the hood. A lot of these packages expose functionality that lets you customize the editor. You can access these packages in Javascript using the global `Laraberg` object.

- `Laraberg.wordpress.blockEditor`
- `Laraberg.wordpress.blocks`
- `Laraberg.wordpress.components`
- `Laraberg.wordpress.data`
- `Laraberg.wordpress.element`
- `Laraberg.wordpress.hooks`
- `Laraberg.wordpress.serverSideRender`

Contributing
------------

[](#contributing)

Please see [contributing](CONTRIBUTING.md) for more information about how you can contribute.

Changelog
---------

[](#changelog)

Please see [changelog](CHANGELOG.md) for more information about what has changed recently.

Upgrading
---------

[](#upgrading)

Please see [upgrading](UPGRADING.md) for more information about how to upgrade.

Security
--------

[](#security)

Please see [security](SECURITY.md) for more information about how we deal with security.

Credits
-------

[](#credits)

We would like to thank the following contributors for their contributions to this project:

- [All Contributors](../../contributors)

License
-------

[](#license)

The scripts and documentation in this project are released under the [GPL-3.0 License](LICENSE.md).

---

 [ ![Logo of Van Ons](https://camo.githubusercontent.com/f233e4b012f8d6bded619dbeb286cf4d9c5fbe2789456e8c4495d3c0fae66b1f/68747470733a2f2f6f70656e736f757263652e76616e2d6f6e732e6e6c2f66696c65732f636f772e706e67) ](https://van-ons.nl/)

###  Health Score

53

—

FairBetter than 97% of packages

Maintenance31

Infrequent updates — may be unmaintained

Popularity61

Solid adoption and visibility

Community39

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 93.9% 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.

###  Release Activity

Cadence

Every ~45 days

Recently: every ~61 days

Total

32

Last Release

1210d ago

Major Versions

v0.0.7-beta → v1.0.0-rc2019-07-30

v1.1.1 → v2.0.0-rc12021-12-01

v1.x-dev → v2.0.02022-05-24

### Community

Maintainers

![](https://www.gravatar.com/avatar/debbcd85681a52cac4d7a2757a16694a503337e891582928cd86b698ae26e845?d=identicon)[vanons](/maintainers/vanons)

![](https://www.gravatar.com/avatar/3ad84a5c4c4e1873137925fd52c8e0388076791672018519c404c2c53bd086e2?d=identicon)[mauricewijnia](/maintainers/mauricewijnia)

---

Top Contributors

[![mauricewijnia](https://avatars.githubusercontent.com/u/8679682?v=4)](https://github.com/mauricewijnia "mauricewijnia (275 commits)")[![dnwjn](https://avatars.githubusercontent.com/u/57711725?v=4)](https://github.com/dnwjn "dnwjn (8 commits)")[![IsraelOrtuno](https://avatars.githubusercontent.com/u/1769417?v=4)](https://github.com/IsraelOrtuno "IsraelOrtuno (4 commits)")[![shaunluedeke](https://avatars.githubusercontent.com/u/77498048?v=4)](https://github.com/shaunluedeke "shaunluedeke (1 commits)")[![szepeviktor](https://avatars.githubusercontent.com/u/952007?v=4)](https://github.com/szepeviktor "szepeviktor (1 commits)")[![AlexVanderbist](https://avatars.githubusercontent.com/u/6287961?v=4)](https://github.com/AlexVanderbist "AlexVanderbist (1 commits)")[![winkelco](https://avatars.githubusercontent.com/u/57962651?v=4)](https://github.com/winkelco "winkelco (1 commits)")[![arman-arif](https://avatars.githubusercontent.com/u/26881817?v=4)](https://github.com/arman-arif "arman-arif (1 commits)")[![mikebronner](https://avatars.githubusercontent.com/u/1791050?v=4)](https://github.com/mikebronner "mikebronner (1 commits)")

---

Tags

gutenberglaravel

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/van-ons-laraberg/health.svg)

```
[![Health](https://phpackages.com/badges/van-ons-laraberg/health.svg)](https://phpackages.com/packages/van-ons-laraberg)
```

###  Alternatives

[craftcms/ckeditor

Edit rich text content in Craft CMS using CKEditor.

48359.1k52](/packages/craftcms-ckeditor)[verbb/hyper

A user-friendly links field for Craft.

24130.9k9](/packages/verbb-hyper)[sheadawson/silverstripe-linkable

A couple of handy form fields and objects for managing external and internal links on DataObjects

39316.2k24](/packages/sheadawson-silverstripe-linkable)[sylvainjule/embed

Embed field for Kirby

7812.8k](/packages/sylvainjule-embed)[mikestecker/craft-videoembedder

Craft plugin to generate an embed URL from a YouTube or Vimeo URL.

1799.3k1](/packages/mikestecker-craft-videoembedder)[ericlagarda/nova-embed

Embed field for Laravel Nova

1220.1k](/packages/ericlagarda-nova-embed)

PHPackages © 2026

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