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")');
    }
}