PHPackages darvis/livewire-inline-translation - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Localization & i18n](/categories/localization) 4. / 5. darvis/livewire-inline-translation ActiveLibrary[Localization & i18n](/categories/localization) darvis/livewire-inline-translation ================================== Inline translation editing for Livewire applications with database storage v1.2.0(1mo ago)04MITPHPPHP ^8.2 Since Jan 27Pushed 1mo agoCompare [ Source](https://github.com/ArvidDeJong/livewire-inline-translation)[ Packagist](https://packagist.org/packages/darvis/livewire-inline-translation)[ RSS](/packages/darvis-livewire-inline-translation/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (10)Versions (3)Used By (0) Livewire Inline Translation =========================== [](#livewire-inline-translation) [![Latest Version](https://camo.githubusercontent.com/34e695c6016bc2a934a96bed696e29b2f2ab562a7134d65a55d00653cd506bea/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d626c75652e737667)](https://github.com/darvis/livewire-inline-translation)[![PHP Version](https://camo.githubusercontent.com/e2df0db5111cc996698331f261bf2635d5d982b997163dd61bcd20b2f000f216/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253545382e322d3838393242462e737667)](https://php.net)[![Laravel Version](https://camo.githubusercontent.com/3c742828c5db02bfe4af055a8e6b8120d8352bdf375953828504c561f4d7684e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c61726176656c2d31312e7825323025374325323031322e782d4646324432302e737667)](https://laravel.com)[![Livewire Version](https://camo.githubusercontent.com/18e8de794f691c89998b4bf5ba18e1e391d71bceb502c4b9727a50e93e8aa9af/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c697665776972652d332e78253230253743253230342e782d4642373041392e737667)](https://livewire.laravel.com)[![License](https://camo.githubusercontent.com/8bb50fd2278f18fc326bf71f6e88ca8f884f72f179d3e555e20ed30157190d0d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e737667)](LICENSE) Inline translation editing for Livewire applications with database storage. This package allows authorized users (e.g., staff) to edit translations directly on the website without accessing the CMS. [![Demo](https://camo.githubusercontent.com/2a95dec61c75d067a84e48a8543c2892112accc8c7027b62ef2d835e67ca612e/68747470733a2f2f7669612e706c616365686f6c6465722e636f6d2f383030783430303f746578743d44656d6f2b53637265656e73686f74)](https://camo.githubusercontent.com/2a95dec61c75d067a84e48a8543c2892112accc8c7027b62ef2d835e67ca612e/68747470733a2f2f7669612e706c616365686f6c6465722e636f6d2f383030783430303f746578743d44656d6f2b53637265656e73686f74) ✨ Features ---------- [](#-features) - ✅ **Inline Editing** - Edit translations directly on your website - ✅ **HTML Editor** - Optional ContentEditable WYSIWYG editor for rich text content - ✅ **Database Storage** - Custom translations stored in database with fallback to Laravel language files - ✅ **Flexible Authorization** - Configurable guard system (staff, web, custom) - ✅ **Modern UI** - Alpine.js modal with Tailwind inline styles - ✅ **Framework Agnostic** - No Flux dependencies, works with any Livewire setup - ✅ **No External Dependencies** - Built-in ContentEditable editor, no CDN required - ✅ **Auto-Discovery** - Automatic Livewire component registration - ✅ **Well Tested** - Comprehensive Pest test suite - ✅ **Fully Documented** - Extensive documentation for developers 📋 Requirements -------------- [](#-requirements) - **PHP**: 8.2 or higher - **Laravel**: 11.x or 12.x - **Livewire**: 3.x or 4.x - **Alpine.js**: Any version (for modal functionality) 📚 Documentation --------------- [](#-documentation) - [Installation Guide](docs/installation.md) - Step-by-step installation instructions - [Usage Guide](docs/usage.md) - Learn how to use the package - [Configuration](docs/configuration.md) - All configuration options - [How It Works](docs/how-it-works.md) - Understanding the internals - [API Reference](docs/api-reference.md) - Complete API documentation - [Contributing](CONTRIBUTING.md) - How to contribute to this package 🚀 Quick Start ------------- [](#-quick-start) ### Installation [](#installation) ### 1. Install via Composer [](#1-install-via-composer) ``` composer require darvis/livewire-inline-translation ``` ### 2. Publish and Run Migrations [](#2-publish-and-run-migrations) ``` php artisan vendor:publish --tag=inline-translation-migrations php artisan migrate ``` ### 3. Publish Config (Optional) [](#3-publish-config-optional) ``` php artisan vendor:publish --tag=inline-translation-config ``` This will create `config/inline-translation.php` where you can configure: - Authentication guard (default: `staff`) - Modal container ID ### 4. Publish Views (Optional) [](#4-publish-views-optional) If you want to customize the view: ``` php artisan vendor:publish --tag=inline-translation-views ``` ### 5. Add Modal Container to Layout [](#5-add-modal-container-to-layout) Add this container to your layout file (e.g., `resources/views/components/layouts/website.blade.php`): ``` @livewireStyles {{ $slot }} @livewireScripts ``` Usage ----- [](#usage) ### Basic Usage [](#basic-usage) Use the component in your Blade templates: ``` ``` ### Translation Key Format [](#translation-key-format) The translation key should follow the format: `{group}.{key}` - `group`: The language file name (e.g., `website`, `messages`) - `key`: The translation key within that file Examples: - `website.welcome` → `lang/en/website.php` → `['welcome' => '...']` - `messages.hello` → `lang/en/messages.php` → `['hello' => '...']` ### How It Works [](#how-it-works) 1. **For Visitors**: Shows the translated text normally 2. **For Authorized Users**: - Shows text with blue dashed underline - Click to open edit modal - Edit and save translation - Changes are stored in database - No page reload needed ### Translation Priority [](#translation-priority) 1. **Database** - Custom translations from `translations` table (highest priority) 2. **Language Files** - Laravel's default `lang/{locale}/{file}.php` files (fallback) This means you can override any Laravel translation by editing it inline, and the original files remain untouched. Configuration ------------- [](#configuration) ### Change Authentication Guard [](#change-authentication-guard) In `config/inline-translation.php`: ``` return [ 'guard' => 'web', // Change from 'staff' to 'web' or any other guard ]; ``` Or via environment variable: ``` INLINE_TRANSLATION_GUARD=web ``` ### Customize Modal Container [](#customize-modal-container) In `config/inline-translation.php`: ``` return [ 'modal_container_id' => 'my-custom-container', ]; ``` Then update your layout: ``` ``` Database Structure ------------------ [](#database-structure) The package creates a `translations` table: ColumnTypeDescriptionidbigintPrimary keylocalestring(10)Language code (e.g., 'en', 'nl')groupstring(100)File name (e.g., 'website', 'messages')keystring(255)Translation keyvaluetextTranslation valuecreated\_attimestampCreated timestampupdated\_attimestampUpdated timestampUnique constraint on: `locale`, `group`, `key` Examples -------- [](#examples) ### Example 1: Welcome Message [](#example-1-welcome-message) Language file `lang/en/website.php`: ``` return [ 'welcome' => 'Welcome to our website!', ]; ``` Blade template: ``` ``` ### Example 2: Multiple Translations [](#example-2-multiple-translations) ``` ``` ### Example 3: With HTML Content [](#example-3-with-html-content) The component supports HTML in translations: ``` ``` Language file: ``` return [ 'rich_content' => 'This is bold and italic text.', ]; ``` Important Notes --------------- [](#important-notes) ### Do NOT Use Inside Links or Buttons [](#do-not-use-inside-links-or-buttons) ❌ **Wrong:** ``` ``` ✅ **Correct:** ``` {{ __('website.contact') }} ``` The component generates a clickable span for authorized users, which conflicts with parent clickable elements. ### Alpine.js Required [](#alpinejs-required) The modal uses Alpine.js `x-teleport` directive. Make sure Alpine.js is loaded in your layout: ``` ``` Troubleshooting --------------- [](#troubleshooting) ### Modal Not Showing [](#modal-not-showing) 1. Check if `#inline-translation-modals` container exists in your layout 2. Verify Alpine.js is loaded 3. Check browser console for JavaScript errors ### Translations Not Saving [](#translations-not-saving) 1. Verify database migration ran successfully 2. Check if user is authenticated with correct guard 3. Verify translation key format is correct (`group.key`) ### Authorization Not Working [](#authorization-not-working) 1. Check `config/inline-translation.php` guard setting 2. Verify user is logged in with correct guard 3. Clear config cache: `php artisan config:clear` 🧪 Testing --------- [](#-testing) The package includes a comprehensive test suite using Pest: ``` # Run all tests composer test # Run with coverage composer test-coverage # Run specific test file vendor/bin/pest tests/Unit/TranslationModelTest.php ``` 🤝 Contributing -------------- [](#-contributing) Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details. ### Development Setup [](#development-setup) ``` # Clone the repository git clone https://github.com/darvis/livewire-inline-translation.git cd livewire-inline-translation # Install dependencies composer install # Run tests composer test ``` 📝 Changelog ----------- [](#-changelog) Please see [CHANGELOG.md](CHANGELOG.md) for recent changes. 🔒 Security ---------- [](#-security) If you discover any security-related issues, please email instead of using the issue tracker. 📄 License --------- [](#-license) The MIT License (MIT). Please see [License File](LICENSE) for more information. 👨‍💻 Author ---------- [](#‍-author) **Arvid de Jong** - Email: - GitHub: [@darvis](https://github.com/darvis) 🙏 Credits --------- [](#-credits) - Built with [Laravel](https://laravel.com) - Powered by [Livewire](https://livewire.laravel.com) - UI interactions with [Alpine.js](https://alpinejs.dev) ⭐ Support --------- [](#-support) If you find this package helpful, please consider giving it a star on GitHub! ### Health Score 40 — FairBetter than 87% of packages Maintenance97 Actively maintained with recent releases Popularity4 Limited adoption so far Community6 Small or concentrated contributor base Maturity47 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~55 days Total 2 Last Release 47d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/24c445b7580e09ff72b8340d1423886148c4c8a249d0a828c98285109e7e5663?d=identicon)[darvis](/maintainers/darvis) --- Top Contributors [![ArvidDeJong](https://avatars.githubusercontent.com/u/7394837?v=4)](https://github.com/ArvidDeJong "ArvidDeJong (3 commits)") ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/darvis-livewire-inline-translation/health.svg) ``` [![Health](https://phpackages.com/badges/darvis-livewire-inline-translation/health.svg)](https://phpackages.com/packages/darvis-livewire-inline-translation) ``` ### Alternatives [barryvdh/laravel-translation-manager Manage Laravel Translations 1.7k3.6M17](/packages/barryvdh-laravel-translation-manager)[vluzrmos/language-detector Detect the language for your application using browser preferences, subdomains or route prefixes. 109554.8k3](/packages/vluzrmos-language-detector)[kerigard/laravel-lang-ru Ru lang for Laravel 2116.8k](/packages/kerigard-laravel-lang-ru)[highsolutions/laravel-translation-manager Manage Laravel Translations 1518.8k](/packages/highsolutions-laravel-translation-manager)[amendozaaguiar/laraveles-spanish-for-jetstream Archivos de traducción al español latinoamericano para Laravel con Jetstream (auth, pagination, passwords, validation + todas las cadenas de Jetstream). 1412.1k](/packages/amendozaaguiar-laraveles-spanish-for-jetstream) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)