ozi-ui/core

Orquestrador do ecossistema ozi-ui — plugins front-end para Laravel (v2: JS puro, zero dependência de terceiros)
219 1
laravel select blade wysiwyg form-validation livewire ui-components vanilla-js ozi-ui
Install
composer require ozi-ui/core
Latest Version:2.7.0
PHP:^8.2
Laravel:10 – 13
License:MIT
Last Updated:Oct 1, 2026
Links: GitHub  ·  Packagist
Maintainer: thomaz-ozi

ozi-ui

Latest Version Tests Downloads PHP License

UI components for Laravel and Livewire, configured in HTML. Selects, a rich-text editor, form validation, AJAX forms and more, declared with data-ozi-* attributes. No JavaScript to write, no build step, no jQuery, and zero runtime dependencies.

Quick start

composer require ozi-ui/core

<head>
    @oziStyles(['select'])
    @oziScripts(['select'])
</head>

<div data-ozi-select="country" data-ozi-select-value-placeholder="Pick a country"></div>
<script type="application/json" data-ozi-select-options="country">
    [{"value": "br", "label": "Brazil"}, {"value": "ca", "label": "Canada"}]
</script>

That's it. The package registers itself through auto-discovery and serves its own assets through a fallback route, so there is no vendor:publish and no npm install.

With Livewire

Livewire 3 and 4 are supported natively. Wrap the component in wire:ignore and bind it with data-ozi-livewire-model:

@oziScripts(['select', 'editor', 'livewire'])

<div wire:ignore>
    <div data-ozi-select="state"
         data-ozi-select-required="true"
         data-ozi-livewire-model="state"></div>
    <script type="application/json" data-ozi-select-options="state">@json($states)</script>
</div>

<div wire:ignore>
    <textarea data-ozi-editor-html="description"
              data-ozi-livewire-model="description">{{ $description }}</textarea>
</div>

Every component emits the same ozi:change event (detail: { component, name, value, source }), and the Livewire adapter turns it into a model update. Validation with ozi-validate also blocks wire:submit when the form is invalid, without any Livewire-specific code.

Highlights

ozi-select

Single, multiple and grouped selects with search, images, remote options and "create new" entries.

ozi-editor

A rich-text (or Markdown) editor with a configurable toolbar: headings, lists, alignment, links, colors, tables, images, source mode, undo/redo. Output is sanitized.

<textarea data-ozi-editor-html="notes"
          data-ozi-editor-tools="[bold,italic,underline], heading, [ul,ol], [link,color], table, source"></textarea>

ozi-validate

Client-side validation for native fields and ozi components. Put data-ozi-validate on the submit button to block the submission (click or Enter) while the form is invalid.

<form novalidate>
    <input name="email" type="email" data-ozi-required="true">
    <span class="ozi-feedback"></span>

    <button type="submit" data-ozi-validate>Create account</button>
</form>

ozi-loaddata

AJAX without JavaScript: collect fields, validate, send, and render the response.

<div id="product-form">
    <input name="name" data-ozi-required="true">
</div>

<button data-zld-url="/products"
        data-zld-catch-group-id="product-form"
        data-zld-destiny-id="result"
        data-zld-form-busy="true">
    Save
</button>
<div id="result"></div>

All plugins

Components and behaviors you use directly

Plugin What it does
ozi-select Select with search, groups, images, remote options, creatable entries
ozi-editor Rich-text / Markdown editor with a configurable toolbar
ozi-validate Form validation and submit gate
ozi-loaddata Declarative AJAX: collect, validate, send, render
ozi-autocomplete Autocomplete input with remote data
ozi-check Styled checkbox and radio groups
ozi-search Live filtering of page content
ozi-auth Sign-up / password forms: live rule checklist, confirmation, show/hide
ozi-audio Audio recording and playback
ozi-toggle Show/hide and state toggles

Internal modules (loaded automatically as dependencies): ozi-suggest, ozi-actions, ozi-password-rules, ozi-editor-sanitize.

Installation details

Blade directives. @oziStyles and @oziScripts accept plugin keys or groups (forms, auth, livewire, full). With no argument they load everything. Dependencies are resolved for you: @oziScripts(['editor']) also loads the validator and the sanitizer it needs.

Production. Optionally publish the assets so your web server serves them directly:

php artisan vendor:publish --tag=ozi-ui

Health check. php artisan ozi:check verifies the installation and fails if anything is missing or out of sync.

Themes. A theme is data, not code: the same JavaScript serves default, bootstrap5 and tailwind. Link the theme's CSS after @oziStyles and pick it with oziConf():

@oziStyles
<link rel="stylesheet" href="/plugins/ozi-ui/themes/bootstrap5/tokens.css">
<link rel="stylesheet" href="/plugins/ozi-ui/themes/bootstrap5/overrides.css">
<link rel="stylesheet" href="/plugins/ozi-ui/themes/bootstrap5/dark.css">

@oziScripts
<script>oziConf({ theme: 'bootstrap5' });</script>

For a custom theme, copy themes/_template/.

Languages. en, pt-BR and es. The language follows your Laravel locale by default; oziConf({ lang: 'es' }) overrides it.

Without Blade. ozi.js also works on a plain HTML page: include <script src="/plugins/ozi-ui/ozi.js"></script> and it loads the plugins you list in oziConf({ plugins: [...] }).

Requirements

  • PHP 8.2+
  • Laravel 10, 11, 12 or 13. Laravel 10 and 11 are past their security support; ozi-ui still works on them and is tested on them, but upgrading the framework is recommended.
  • Livewire 3 or 4 (optional)

Tested

Every push runs on GitHub Actions:

  • PHPUnit (via Orchestra Testbench) on PHP 8.2–8.4 × Laravel 10–13: asset resolution, Blade directives, the asset route, and ozi:check
  • 34 browser acceptance pages in headless Chrome, one or more per plugin

See tests/aceites/README.md to run them locally.

Documentation

Full documentation: oziui.com/en/docs (also in Português and Español).

Background

ozi-ui started in 2012 as a small helper to cut $.ajax boilerplate and grew, project by project, into a plugin ecosystem. Version 2 (2026) rewrote everything in plain JavaScript and dropped jQuery. One principle has not changed: if you need to write JavaScript, something is wrong.

License

MIT. © 2012–2026 Thomaz Ozi and oziui.com.

Related Packages

victorybiz/laravel-simple-select

Laravel Simple Select inputs component for Blade and Livewire.

25,311 137
alpinejs blade custom select laravel laravel-blade laravel-livewire laravel-simple-select livewire multi select select select-input simple-select victorybiz
nasirkhan/laravel-jodit

Jodit WYSIWYG editor integration for Laravel — works with Blade, Blade Component...

3,005 2
blade editor jodit laravel livewire rich-text wysiwyg
mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

14,303 46
blade ckeditor ckeditor5 content-editor editor html-editor laravel laravel-livewire laravel-package livewire livewire-component rich-text-editor text-editor wysiwyg
vlados/cascader

A cascading dropdown component for Laravel Livewire with Alpine.js

1,195 0
alpinejs blade cascader component dropdown laravel livewire select
kamikx/laravel-jodit

Jodit WYSIWYG editor integration for Laravel — works with Blade, Blade component...

92 0
blade editor filament jodit laravel livewire rich-text wysiwyg

Version History

Version Released PHP Laravel License
2.7.0 ^8.2 ^10.0|^11.0|^12.0|^13.0 MIT
2.6.2 ^8.2 ^10.0|^11.0|^12.0|^13.0 MIT
2.6.1 ^8.2 ^10.0|^11.0|^12.0|^13.0 MIT
2.6.0 ^8.2 ^10.0|^11.0|^12.0|^13.0 MIT
2.5.0 ^8.2 ^10.0|^11.0|^12.0|^13.0 MIT
Pre-releases (2)
Version Released PHP Laravel License
2.0.0-beta.2 ^8.2 ^10.0|^11.0|^12.0|^13.0 MIT
2.0.0-beta.1 ^8.2 ^10.0|^11.0|^12.0|^13.0 MIT