Rich Editor

A powerful WYSIWYG editor with multiple variants (Tiptap and Editor.js), fully integrated with Livewire and Alpine.js. Supports image uploads, multiple output formats, and extensive customization options.

Basic Usage

A simple rich text editor that provides common formatting options. By default, it uses the Tiptap variant.

<neura::editor placeholder="Start writing your masterpiece..." />

Editor Variants

Neura Kit supports two powerful editor variants, each with its own strengths and use cases.

Tiptap (Default)

A modern, extensible rich text editor built on ProseMirror. Perfect for traditional WYSIWYG editing with HTML output.

Editor.js

A block-styled editor with JSON output. Ideal for structured content, CMS systems, and when you need clean, structured data.


<neura::editor variant="tiptap" wire:model="content" />


<neura::editor variant="editorjs" wire:model="content" />

Livewire Integration

The editor syncs seamlessly with Livewire properties using `wire:model`. Both variants support real-time synchronization.

<!-- In your blade view -->
<neura::editor wire:model="content" variant="tiptap" />

<!-- In your Livewire component -->
class CreatePost extends Component
{
    public $content = '';
    
    public function save()
    {
        // For Tiptap: $this->content contains HTML
        // For Editor.js: $this->content contains JSON
        
        // Always sanitize HTML content before saving to prevent XSS attacks
        // Use a library like HTMLPurifier or Laravel's built-in sanitization
        
        Post::create(['content' => $this->content]);
    }
}

Output Modes

Tiptap supports both HTML and JSON output modes. Editor.js always outputs JSON.

HTML Mode (Tiptap)

Outputs clean HTML that can be directly rendered in your views.

JSON Mode (Tiptap)

Outputs structured JSON data, useful for processing or transforming content.


<neura::editor variant="tiptap" mode="html" wire:model="content" />


<neura::editor variant="tiptap" mode="json" wire:model="content" />


<neura::editor variant="editorjs" wire:model="content" />

Image Upload (Editor.js)

Editor.js supports image uploads with automatic storage on S3, local filesystem, or any configured Laravel disk. Images are automatically optimized and stored securely.

<neura::editor 
    variant="editorjs" 
    wire:model="content"
    upload-url="https://docs.neuraui.dev/neura-kit/editor/upload-image"
    upload-field="image"
/>

Configuration: Configure image storage in config/neura-kit.php or via environment variables: NEURA_KIT_EDITOR_IMAGE_DISK (s3, local, etc.) and NEURA_KIT_EDITOR_IMAGE_PATH (storage path).

Form Integration

The editor works seamlessly as a regular form input with the `name` attribute, making it compatible with traditional form submissions.

Description

Provide a detailed description of the product.

<form method="POST" action="/posts">
        
    <neura::field>
        <neura::label>Description</neura::label>
        <neura::editor name="description" placeholder="Enter product description..." />
        <neura::description>
            Provide a detailed description of the product.
        </neura::description>
    </neura::field>
    
    <neura::button type="submit">Submit</neura::button>
</form>

Disabled State

Disable the editor to make it read-only. The toolbar is automatically hidden when disabled.

<neura::editor disabled wire:model="content" />

Configuration

Configure default editor settings in config/neura-kit.php or via environment variables.

// config/neura-kit.php
'editor' => [
    'default_variant' => env('NEURA_KIT_EDITOR_VARIANT', 'tiptap'), // 'tiptap' or 'editorjs'
    'max_image_size' => env('NEURA_KIT_EDITOR_MAX_IMAGE_SIZE', 10240), // KB (10MB default)
    'image_disk' => env('NEURA_KIT_EDITOR_IMAGE_DISK', null), // null = use filesystems.default
    'image_path' => env('NEURA_KIT_EDITOR_IMAGE_PATH', 'editor/images'),
],

// .env
NEURA_KIT_EDITOR_VARIANT=editorjs
NEURA_KIT_EDITOR_MAX_IMAGE_SIZE=10240
NEURA_KIT_EDITOR_IMAGE_DISK=s3
NEURA_KIT_EDITOR_IMAGE_PATH=editor/images

Props

Prop	Type	Default	Description
variant	string	'tiptap'	Editor variant: 'tiptap' or 'editorjs'
name	string	null	Name attribute for form submission
value	string\|array	null	Initial content (HTML for Tiptap, JSON for Editor.js)
placeholder	string	'Write something...'	Placeholder text when empty
disabled	boolean	false	Disables editing and hides toolbar
mode	string	'html'	Output format: 'html' or 'json' (Tiptap only, Editor.js always uses JSON)
debounce	number	300	Debounce delay in milliseconds for state updates (Tiptap only)
upload-url	string	auto	Custom upload endpoint URL (Editor.js only)
upload-field	string	'image'	Form field name for image uploads (Editor.js only)

Best Practices

Security

Always sanitize HTML content before saving to prevent XSS attacks. Use libraries like HTMLPurifier or Laravel's built-in sanitization methods.

Choosing a Variant

Tiptap: Use when you need traditional WYSIWYG editing with HTML output, inline formatting, and a familiar editing experience.

Editor.js: Use when you need structured content, block-based editing, JSON output for processing, or when building CMS systems.

Image Storage

Configure image storage based on your needs. Use S3 for production scalability, local storage for development, or any other Laravel filesystem disk. Images are automatically optimized and stored securely.

Performance

Both variants use lazy loading and code splitting. Editor.js tools are loaded dynamically to minimize initial bundle size. Use debounce settings appropriately to balance responsiveness and performance.