Monaco Editor

x-monaco-editor

The VS Code editor as a Blade component — syntax highlighting, themes, auto dark mode, and many languages. Lazy-loads its bundle on demand.

php artisan components:add monaco-editor

Playground

language theme height readOnly wordWrap lineNumbers minimap

Examples

Basic

Syntax highlighting for JavaScript, with auto dark mode.

<div class="flex w-full justify-center">
    <div class="w-full">
        <x-components.monaco-editor language="javascript" :height="220" :content="'function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet(\'DevDojo\'));'" />
    </div>
</div>

Props

Prop	Type	Default	Description
`language`	select html · css · javascript · typescript · json · php · markdown · xml · yaml · sql · python · plaintext	`html`	Language for syntax highlighting.
`content`	textarea	`—`	Initial code in the editor.
`theme`	select light · dark · auto	`auto`	Editor color theme. 'auto' follows the .dark class.
`height`	text	`250`	Editor height in px (or a CSS value).
`readOnly`	boolean	`false`	Make the editor read-only.
`wordWrap`	select off · on	`off`	Soft-wrap long lines.
`lineNumbers`	boolean	`true`	Show the line-number gutter.
`minimap`	boolean	`false`	Show the minimap.