CSS & JavaScript

Hot Tip!

This guide is intended for apps adding CSS & JavaScript to the Control Panel. If you're building an addon, please see our Vite Tooling guide instead.

Using Vite (recommended)#

Vite is the recommended frontend build tool in the Statamic and Laravel ecosystems.

To set up Vite for the Control Panel, run the setup command:

php please setup-cp-vite

It will install the necessary dependencies, create a vite-cp.config.js file, and publish any necessary stubs.

You can add any CSS to the resources/css/cp.css file, and any JavaScript to the resources/js/cp.js file.

To start Vite, run npm run cp:dev and to build for production, run npm run cp:build.

Using <script> tags in the Control Panel#

For externally-hosted scripts, you may register assets to be loaded in the Control Panel with the externalScript method. This method accepts the URL of an external script.

use Statamic\Statamic;

class AppServiceProvider
{
    public function boot()
    {
        Statamic::externalScript('https://kit.fontawesome.com/5t4t4m1c.js');
    }
}

Otherwise, for inline scripts, you may use the inlineScript method. You should omit the <script> tags.

use Statamic\Statamic;

class AppServiceProvider
{
    public function boot()
    {
        Statamic::inlineScript('window.Beacon("init", "abc123")');
    }
}