PHPackages                             devdojo/refine - 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. [Templating & Views](/categories/templating)
4. /
5. devdojo/refine

ActiveLibrary[Templating & Views](/categories/templating)

devdojo/refine
==============

A developer-only Chrome extension and Laravel package for live-editing Blade templates directly in the browser

106308↓50%3[2 PRs](https://github.com/thedevdojo/refine/pulls)PHPCI passing

Since Dec 7Pushed 5mo ago1 watchersCompare

[ Source](https://github.com/thedevdojo/refine)[ Packagist](https://packagist.org/packages/devdojo/refine)[ RSS](/packages/devdojo-refine/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (8)Used By (0)

[![Refine Artwork](https://raw.githubusercontent.com/thedevdojo/refine/refs/heads/main/image.png?updated=1)](https://raw.githubusercontent.com/thedevdojo/refine/refs/heads/main/image.png?updated=1)

Refine Your Blade Views
=======================

[](#refine-your-blade-views)

Refine is a live [Blade](https://laravel.com/docs/blade) editor. It enables instant, in-browser editing of Blade templates. Right-click any element, click "Edit Code", and modify the source code directly.

Warning

This is still actively being developed so there may be a few issues. I have tested this with Blade Includes and Components; however, more testing is needed for Livewire and Volt.

Features
--------

[](#features)

- **One-Click Editing**: Right-click any element and edit its Blade source instantly
- **Automatic Source Tracking**: Automatically instruments Blade views with source metadata
- **Zero Configuration**: Works out of the box after installation
- **Smart DOM Traversal**: Finds the originating Blade file even in nested components
- **Instant Saves**: Write changes directly to disk and hot-reload affected regions
- **Backup System**: Automatically backs up files before making changes
- **Dev-Only**: This package should not be installed in production.

Installation
------------

[](#installation)

### Step 1: Install the Laravel Package

[](#step-1-install-the-laravel-package)

```
composer require devdojo/refine --dev
```

The package will auto-register via Laravel's package discovery.

### Step 2: Load the Chrome Extension

[](#step-2-load-the-chrome-extension)

Download the code from this repo and put the `extension` folder somewhere permanent on your computer. This could be your Documents folder or a folder in your home directory.

1. Open Chrome and navigate to `chrome://extensions/`
2. Enable "Developer mode" (toggle in top-right corner)
3. Click "Load unpacked"
4. Navigate to the **extension**\*\* folder you saved to your computer
5. Select the folder and click "Open"

### Step 3: Verify Installation

[](#step-3-verify-installation)

1. Start your Laravel development server (`php artisan serve` or Valet/Herd)
2. Visit any page in your application
3. Open the browser console - you should see: "Refine: Content script loaded and ready"
4. Visit `http://your-app.test/refine/status` - you should see a JSON response confirming Refine is enabled

Usage
-----

[](#usage)

1. **Right-click any element** on your page
2. **Click "Edit Code"** from the context menu
3. **Edit the Blade source code** in the floating editor
4. **Press Cmd/Ctrl+S or click Save** to write changes
5. **Page auto-reloads** to show your changes

### Keyboard Shortcuts

[](#keyboard-shortcuts)

- `Cmd/Ctrl + S` - Save changes
- `Escape` - Minimize editor
- `Tab` - Insert 4 spaces (proper indentation)

How It Works
------------

[](#how-it-works)

### Backend (Laravel)

[](#backend-laravel)

1. **Blade Instrumentation**: A Blade compiler hook automatically injects `data-source` attributes into rendered HTML elements containing the view path and line number
2. **API Endpoints**: Two endpoints handle fetching source code and saving changes
3. **File Resolution**: Automatically resolves view paths to absolute file paths
4. **Cache Clearing**: Runs `php artisan view:clear` after saves to ensure changes are reflected

### Frontend (Chrome Extension)

[](#frontend-chrome-extension)

1. **Context Menu**: Registers a "Edit Code" option in the right-click menu
2. **DOM Traversal**: Finds the nearest parent element with a `data-source` attribute
3. **API Communication**: Fetches source code from Laravel and sends updates back
4. **Floating UI**: Renders a dark-themed code editor overlay with save/cancel actions

Configuration
-------------

[](#configuration)

Publish the configuration file:

```
php artisan vendor:publish --tag=refine-config
```

This creates `config/refine.php` where you can customize:

- **Enabled State**: Force enable/disable Refine
- **Route Prefix**: Change the API route prefix (default: `/refine`)
- **Middleware**: Add additional middleware to Refine routes
- **Instrumentation**: Customize which HTML tags get source attributes
- **Backups**: Configure automatic backup behavior

Security
--------

[](#security)

Refine is **strictly for local development**. It includes multiple safety layers:

1. Only activates when `APP_ENV=local`
2. Middleware blocks all requests in non-local environments
3. Routes only register when enabled
4. Extension only works on localhost/`.test` domains

**Never deploy Refine to production.** Install it as a dev dependency only.

Architecture
------------

[](#architecture)

### Package Structure

[](#package-structure)

```
vendor/devdojo/refine/
├── extension/              # Chrome extension (load this folder)
│   ├── manifest.json      # Extension configuration
│   ├── background.js      # Service worker for context menu
│   ├── content.js         # Content script with DOM logic & UI
│   └── icons/             # Extension icons
├── src/
│   ├── RefineServiceProvider.php
│   ├── Http/
│   │   ├── Controllers/
│   │   │   └── RefineController.php
│   │   └── Middleware/
│   │       └── RefineMiddleware.php
│   └── Services/
│       └── BladeInstrumentation.php
├── config/
│   └── refine.php
└── composer.json

```

### API Endpoints

[](#api-endpoints)

#### GET /refine/status

[](#get-refinestatus)

Returns Refine status and version.

#### GET /refine/fetch?ref={encoded}

[](#get-refinefetchrefencoded)

Fetches source code for a given reference.

**Response:**

```
{
  "success": true,
  "data": {
    "file_path": "/path/to/file.blade.php",
    "view_path": "components.alert",
    "line_number": 12,
    "full_contents": "...",
    "total_lines": 45
  }
}
```

#### POST /refine/save

[](#post-refinesave)

Saves updated source code.

**Request:**

```
{
  "ref": "encoded-source-reference",
  "contents": "updated file contents"
}
```

**Response:**

```
{
  "success": true,
  "message": "File saved successfully"
}
```

Supported Blade Features
------------------------

[](#supported-blade-features)

- Standard Blade views
- Blade components (x-component syntax)
- Nested components and partials
- Layout inheritance
- View composers and creators

Troubleshooting
---------------

[](#troubleshooting)

### "No source reference found" error

[](#no-source-reference-found-error)

**Cause**: The clicked element doesn't have a `data-source` attribute.

**Solutions**:

- Ensure `config('refine.enabled')` returns `true`
- Check that `APP_ENV=local` in your `.env` file
- Clear view cache: `php artisan view:clear`
- Verify the element's parent tags are in the `target_tags` config array

### Extension not loading

[](#extension-not-loading)

**Solutions**:

- Check Chrome's extension page for errors
- Reload the extension after making changes
- Check browser console for JavaScript errors

### Changes not reflecting

[](#changes-not-reflecting)

**Solutions**:

- Hard refresh the page (Cmd/Ctrl + Shift + R)
- Clear view cache: `php artisan view:clear`
- Check file permissions on the view file
- Verify the backup directory is writable

### CSRF token errors

[](#csrf-token-errors)

**Solutions**:

- Ensure your layout includes ``
- Or include `@csrf` in a form on the page

Limitations
-----------

[](#limitations)

- Only works on local development domains (localhost, \*.test)
- Requires the CSRF token to be present in the page
- Cannot edit compiled PHP files, only Blade templates
- Page reload required to see changes (no true hot-reload)

Roadmap
-------

[](#roadmap)

Future enhancements being considered:

- Syntax highlighting in the editor
- Line number gutter
- Find and replace
- Multiple file tabs
- Diff view before saving
- Undo/redo history
- Component preview
- Hot module replacement (no page reload)

Contributing
------------

[](#contributing)

This is an initial release. Contributions, bug reports, and feature requests are welcome.

License
-------

[](#license)

MIT License. This is a developer tool provided as-is with no warranties.

Credits
-------

[](#credits)

Created by DevDojo for the Laravel community.

###  Health Score

29

—

LowBetter than 59% of packages

Maintenance49

Moderate activity, may be stable

Popularity31

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity20

Early-stage or recently created project

 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/cbf9537394d6d9f5570b2ac75d039fe87ff5a37ce2c0504908790d04dc82c3f1?d=identicon)[devdojo](/maintainers/devdojo)

---

Top Contributors

[![tnylea](https://avatars.githubusercontent.com/u/601261?v=4)](https://github.com/tnylea "tnylea (8 commits)")

### Embed Badge

![Health badge](/badges/devdojo-refine/health.svg)

```
[![Health](https://phpackages.com/badges/devdojo-refine/health.svg)](https://phpackages.com/packages/devdojo-refine)
```

###  Alternatives

[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)[symfony/ux-icons

Renders local and remote SVG icons in your Twig templates.

555.8M69](/packages/symfony-ux-icons)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)