> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superdoc.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Laravel Integration
SuperDoc works with Laravel + Blade + Vite. Laravel serves the Blade template with PHP, while Vite bundles the SuperDoc JavaScript.
## Install
```bash theme={null}
composer install
npm install
npm install superdoc @superdoc-dev/fonts
```
## Vite config
```text vite.config.js theme={null}
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:
```html resources/views/editor.blade.php theme={null}
SuperDoc: Laravel
@vite('resources/js/app.js')
```
## JavaScript entry point
```js resources/js/app.js theme={null}
import { SuperDoc } from 'superdoc';
import { superdocFonts } from '@superdoc-dev/fonts';
import 'superdoc/style.css';
let superdoc = new SuperDoc({ selector: '#editor', fonts: superdocFonts });
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
```php routes/web.php theme={null}
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:
```php app/Http/Controllers/DocumentController.php theme={null}
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:
```js theme={null}
const superdoc = new SuperDoc({
selector: '#editor',
document: '/storage/documents/your-file.docx',
});
```
## Run
```bash theme={null}
# 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](http://localhost:8000).
## Next steps
Plain JavaScript setup and patterns
All configuration options
Working Laravel example on GitHub
Real-time collaboration