Laravel Integration

SuperDoc works with Laravel + Blade + Vite. Laravel serves the Blade template with PHP, while Vite bundles the SuperDoc JavaScript.

Install

composer install
npm install

Vite config

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Blade template

Create a Blade view that loads the Vite-bundled script and mounts the editor:

resources/views/editor.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperDoc — Laravel</title>
    @vite('resources/js/app.js')
</head>
<body>
    <div style="padding: 1rem; background: #f5f5f5">
        <input type="file" id="file-input" accept=".docx" />
    </div>
    <div id="editor" style="height: calc(100vh - 60px)"></div>
</body>
</html>

JavaScript entry point

resources/js/app.js

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

let superdoc = new SuperDoc({ selector: '#editor' });

document.getElementById('file-input').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;

    superdoc?.destroy();
    superdoc = new SuperDoc({
        selector: '#editor',
        document: file,
    });
});

Route

routes/web.php

Route::get('/', fn () => view('editor'));

File upload handling

To load documents from a backend upload instead of the browser file picker, use a Laravel controller:

app/Http/Controllers/DocumentController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class DocumentController extends Controller
{
    public function upload(Request $request)
    {
        $request->validate(['file' => 'required|file|mimes:docx']);
        $path = $request->file('file')->store('documents');

        return response()->json(['url' => asset("storage/$path")]);
    }
}

Then fetch the document URL in your JavaScript and pass it to SuperDoc:

const superdoc = new SuperDoc({
    selector: '#editor',
    document: '/storage/documents/your-file.docx',
});

Run

# Install dependencies
composer install && npm install

# Start both servers
npm run dev

This runs php artisan serve (port 8000) and Vite’s dev server together. Open http://localhost:8000.

Next steps

Vanilla JS Integration

Plain JavaScript setup and patterns

Configuration

All configuration options

Laravel Example

Working Laravel example on GitHub

Collaboration

Real-time collaboration

Getting Started

Core

Document Engine

Modules

Extensions

Solutions

Guides

Resources

Laravel Integration

Install

Vite config

Blade template

JavaScript entry point

Route

File upload handling

Run

Next steps

Vanilla JS Integration

Configuration

Laravel Example

Collaboration

​Install

​Vite config

​Blade template

​JavaScript entry point

​Route

​File upload handling

​Run

​Next steps

Vanilla JS Integration

Configuration

Laravel Example

Collaboration

Install

Vite config

Blade template

JavaScript entry point

Route

File upload handling

Run

Next steps