PHPackages                             sediqzada/inertia-blueprint - 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. [Utility & Helpers](/categories/utility)
4. /
5. sediqzada/inertia-blueprint

ActiveLibrary[Utility & Helpers](/categories/utility)

sediqzada/inertia-blueprint
===========================

Generate Inertia.js + React + TypeScript pages with shadcn/ui from JSON blueprints

v0.2.0-beta(6mo ago)4161[4 PRs](https://github.com/sediqzada94/inertia-blueprint/pulls)PHPPHP >=8.2CI passing

Since Sep 13Pushed 4mo agoCompare

[ Source](https://github.com/sediqzada94/inertia-blueprint)[ Packagist](https://packagist.org/packages/sediqzada/inertia-blueprint)[ RSS](/packages/sediqzada-inertia-blueprint/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (7)Versions (7)Used By (0)

Inertia Blueprint 🧩
===================

[](#inertia-blueprint-)

**Inertia Blueprint** is a powerful Laravel package that generates beautiful, fully-functional Inertia.js + React + TypeScript pages with **shadcn/ui** components from simple JSON file. Build complete CRUD interfaces in seconds.

✨ Features
----------

[](#-features)

- ⚡ **Rapid Development** - Generate complete CRUD pages in seconds
- 🎨 **Beautiful UI** - Pre-styled with shadcn/ui components
- 🔍 **Smart Search** - Debounced search with URL state management
- 📱 **Responsive Design** - Mobile-first, responsive layouts
- 🛡️ **Type Safety** - Full TypeScript support with proper typing
- 📝 **Form Handling** - Inertia.js `useForm` integration
- ⚙️ **Flexible Configuration** - Customize fields, routes, and behavior
- 🎯 **Customizable Stubs** - Publish and modify templates to fit your needs

### Generated Pages

[](#generated-pages)

- **Index** - Tables with search and actions
- **Create** - Form pages with validation and error handling
- **Edit** - Pre-populated forms with validation and update functionality
- **View** - Detailed view pages with clean layouts

---

📦 Installation
--------------

[](#-installation)

Install via Composer:

```
composer require sediqzada/inertia-blueprint:^0.2@beta --dev
```

### Prerequisites

[](#prerequisites)

Make sure you have the following set up in your Laravel project:

- **Laravel** 10+ with Inertia.js
- **React** 18+ with TypeScript support
- **shadcn/ui** components installed and configured
- **Tailwind CSS** for styling

### Recommended Setup

[](#recommended-setup)

For the best experience, ensure your project has:

```
# Install shadcn/ui if not already installed
npx shadcn-ui@latest init

# Install required shadcn/ui components
npx shadcn-ui@latest add button card input label textarea checkbox select dialog table
```

---

🚀 Quick Start
-------------

[](#-quick-start)

### 1. Create a Blueprint File

[](#1-create-a-blueprint-file)

Create a `blueprint.json` file in your project root:

```
{
    "model": "Post",
    "fields": [
        { "name": "title", "type": "string", "inputType": "text", "searchable": true },
        { "name": "content", "type": "text", "inputType": "textarea", "searchable": true },
        { "name": "published_at", "type": "datetime", "inputType": "text" },
        {
            "name": "category",
            "fieldName": "category_id",
            "type": "string",
            "inputType": "select",
            "options": "categories",
            "valueField": "id",
            "labelField": "name"
        }
    ],
    "pages": ["index", "create", "edit", "view"]
}
```

### 2. Generate Your Pages

[](#2-generate-your-pages)

```
php artisan blueprint:generate
```

### 3. Handle Existing Files

[](#3-handle-existing-files)

If pages already exist, you'll be prompted to choose:

- **ignore** - Skip existing files, only generate new ones
- **override** - Replace existing files with new versions

### 4. That's It!

[](#4-thats-it)

Your pages are now available in `resources/js/pages/Post/` with:

- Full TypeScript support
- shadcn/ui components
- Form validation
- Search functionality
- Responsive design

---

📋 Configuration Reference
-------------------------

[](#-configuration-reference)

### Basic Structure

[](#basic-structure)

```
{
  "model": "ModelName",
  "fields": [...],
  "routes": {...},
  "language": "ts",
  "pages": [...]
}
```

### Field Configuration

[](#field-configuration)

Each field supports the following properties:

```
{
  "name": "fieldName",                    // Required: Database field name
  "type": "string|text|number|boolean|datetime|file|select",  // Required: Data type
  "inputType": "text|textarea|number|checkbox|file|select",   // Required: Input component type
  "searchable": true|false,                // Optional: Include in search functionality
  "options": {...}                         // Required for select fields
}
```

#### Field Types & Input Types

[](#field-types--input-types)

TypeInput TypeGenerated ComponentDescriptionExample`string``text``Input`Single-line text inputName, email, slug`string``textarea``Textarea`Multi-line text areaDescription, content, notes`number``number``Input[type="number"]`Numeric input with validationPrice, quantity, age`boolean``checkbox``Checkbox`Boolean checkboxIs active, published, featured`datetime``text``Input[type="text"]`Date/time inputCreated at, published at`string``file``Input[type="file"]`File upload inputImages, documents, attachments`string``select``Select`Dropdown selectionCategories, status, user roles#### Select Field Configuration

[](#select-field-configuration)

Select fields require additional configuration for data binding:

If the options are provided by controller:

```
{
            "name": "category",
            "fieldName": "category_id",
            "type": "string",
            "inputType": "select",
            "options": "categories",
            "valueField": "id",
            "labelField": "name"
}
```

Or if the options are static:

```
{
    "name": "status",
    "type": "string",
    "inputType": "select",
    "options": [
        { "status": "draft", "label": "Draft" },
        { "status": "published", "label": "Published" },
        { "status": "cancelled", "label": "Cancelled" },
        { "status": "completed", "label": "Completed" }
    ],
    "valueField": "status",
    "labelField": "label"
}
```

#### Field Examples

[](#field-examples)

```
{
    "fields": [
        // Basic text field with search
        {
            "name": "title",
            "type": "string",
            "inputType": "text",
            "searchable": true
        },

        // Large text area
        {
            "name": "description",
            "type": "string",
            "inputType": "textarea",
            "searchable": true
        },

        // Numeric field
        {
            "name": "price",
            "type": "number",
            "inputType": "number"
        },

        // Boolean checkbox
        {
            "name": "is_featured",
            "type": "boolean",
            "inputType": "checkbox"
        },

        // File upload
        {
            "name": "featured_image",
            "type": "string",
            "inputType": "file"
        },

        // Select dropdown
        {
            "name": "status",
            "type": "string",
            "inputType": "select",
            "options": "statuses",
            "valueField": "value",
            "labelField": "label"
        }
    ]
}
```

### Routes Configuration

[](#routes-configuration)

Routes will be generated from the model key, for example if the "model: Post" the generated routes will be:

`posts.index, posts.create, posts.store, posts.show, posts.edit, posts.update, posts.destroy`

You can also define your Laravel route names that correspond to your controller methods:

```
{
    "routes": {
        "index": "posts.index", // GET /posts - List all posts
        "create": "posts.create", // GET /posts/create - Show create form
        "store": "posts.store", // POST /posts - Store new post
        "show": "posts.show", // GET /posts/{id} - Show single post
        "edit": "posts.edit", // GET /posts/{id}/edit - Show edit form
        "update": "posts.update", // PUT/PATCH /posts/{id} - Update post
        "destroy": "posts.destroy" // DELETE /posts/{id} - Delete post
    }
}
```

**Route Requirements by Page:**

PageRequired RoutesOptional Routes`index``index`, `destroy``show`, `edit``create``store`, `index`-`edit``update`, `index`-`view``index``edit`### Pages Configuration

[](#pages-configuration)

Choose which pages to generate. Each page type serves a specific purpose:

```
{
    "pages": ["index", "create", "edit", "view"]
}
```

**Available Page Types:**

PagePurposeFeatures`index`List/table viewSearch, delete confirmation`create`New record formForm validation, file uploads, select dropdowns`edit`Update existing recordPre-populated form, validation, file handling`view`Read-only detail viewClean layout, formatted data display**Language Support:**

- **TypeScript (`ts`)** - Full type safety, interfaces, proper typing (default and currently only supported option)

---

🎯 Advanced Usage
----------------

[](#-advanced-usage)

### Custom Blueprint Files

[](#custom-blueprint-files)

Generate from specific blueprint files:

```
# Use a custom blueprint file
php artisan blueprint:generate custom-blueprint.json

# Generate multiple models
php artisan blueprint:generate posts.json
php artisan blueprint:generate users.json
php artisan blueprint:generate categories.json
```

### Publishing and Customizing Stubs

[](#publishing-and-customizing-stubs)

Customize the generated code templates to match your project's needs:

```
# Publish stub files for customization
php artisan blueprint:publish-stubs

# Force overwrite existing stubs
php artisan blueprint:publish-stubs --force
```

This publishes stub files to `resources/inertia-blueprint-stubs/`:

### Stub Structure

[](#stub-structure)

After publishing, you'll find these customizable templates:

```
resources/inertia-blueprint-stubs/
└── react/
    ├── Index.stub      # List/table view template
    ├── Create.stub     # Creation form template
    ├── Edit.stub       # Edit form template
    └── View.stub       # Detail view template

```

📁 Generated File Structure
--------------------------

[](#-generated-file-structure)

After running the command, your files will be organized as:

```
resources/js/pages/
└── Post/
    ├── Index.tsx    # List view with search & actions
    ├── Create.tsx   # Creation form
    ├── Edit.tsx     # Edit form
    └── View.tsx     # Detail view

```

🛠️ Configuration
----------------

[](#️-configuration)

### Publishing Configuration

[](#publishing-configuration)

Publish the configuration file to customize default settings:

```
php artisan vendor:publish --provider="Sediqzada\InertiaBlueprint\InertiaBluerintServiceProvider"
```

This creates `config/inertia-blueprint.php`:

```