<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Danil Shutsky</title>
    <description>The latest articles on DEV Community by Danil Shutsky (@cutcode).</description>
    <link>https://dev.to/cutcode</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2894252%2F2badcc9a-0758-47b4-93bf-93ed3b266e15.jpg</url>
      <title>DEV Community: Danil Shutsky</title>
      <link>https://dev.to/cutcode</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/cutcode"/>
    <language>en</language>
    <item>
      <title>AI Factory: Automating AI Agent Project Setup</title>
      <dc:creator>Danil Shutsky</dc:creator>
      <pubDate>Thu, 12 Feb 2026 05:44:01 +0000</pubDate>
      <link>https://dev.to/cutcode/ai-factory-automating-ai-agent-project-setup-45g</link>
      <guid>https://dev.to/cutcode/ai-factory-automating-ai-agent-project-setup-45g</guid>
      <description>&lt;p&gt;I'll tell you about a tool I created to speed up project configuration for effective work with AI agents (in my case, Claude Code). I worked with SpecKit for a long time - a great project . It helped me a lot and gave me understanding of working with LLMs. But over time, I started noticing drawbacks that became increasingly frustrating.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;Before starting work with an AI agent on a project, my standard scenario looked like this:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Work Organization&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Topic research&lt;/li&gt;
&lt;li&gt;Planning (I worked with SpecKit): explaining project structure to the agent, describing the stack and work rules, creating plans and checking them&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Skills Setup&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Search for suitable skills on skills.sh&lt;/li&gt;
&lt;li&gt;Copy to &lt;code&gt;.claude/skills/&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;If needed skill doesn't exist - write from scratch (well, generate to be precise)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. MCP Server Configuration&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open &lt;code&gt;.claude/settings.local.json&lt;/code&gt; and configure MCP servers&lt;/li&gt;
&lt;li&gt;Add environment variables&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Result:&lt;/strong&gt; 30-60 minutes of setup before starting real work (I mean vibe-coding). Gradually, I started automating processes and this evolved into the AI Factory project.&lt;/p&gt;

&lt;h2&gt;
  
  
  What AI Factory Solves
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Setup Automation:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;ai-factory init&lt;/code&gt; → interactively configures everything in 2-3 minutes&lt;/li&gt;
&lt;li&gt;Scans existing project (package.json, composer.json, requirements.txt)&lt;/li&gt;
&lt;li&gt;Determines stack and downloads appropriate skills from skills.sh&lt;/li&gt;
&lt;li&gt;Generates missing skills for your project&lt;/li&gt;
&lt;li&gt;Configures MCP servers by choice&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Result:&lt;/strong&gt; from 30-60 minutes of setup to 5-10 minutes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unified Context:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;.ai-factory/DESCRIPTION.md&lt;/code&gt; - always up-to-date project specification for agent context - no need to repeat explanations about what we're working on in each chat&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Structured Workflow:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Clear commands: &lt;code&gt;/task&lt;/code&gt; for quick tasks, &lt;code&gt;/feature&lt;/code&gt; for big features, &lt;code&gt;/fix&lt;/code&gt; for bugs&lt;/li&gt;
&lt;li&gt;Automatic plans and checkpoints&lt;/li&gt;
&lt;li&gt;Conventional commits out of the box&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Learning System:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Each fix creates a patch with problem description&lt;/li&gt;
&lt;li&gt;Next tasks account for past mistakes&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/evolve&lt;/code&gt; improves skills based on project experience&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  AI Factory
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The idea is simple:&lt;/strong&gt; minimal setup, advantage of using specifications for LLM context and code quality with MCP+sub-agents with skills. And work comfort - everything you need is at hand!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/lee-to/ai-factory" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What prompted its creation? Experience working with &lt;strong&gt;SpecKit&lt;/strong&gt; and &lt;strong&gt;OpenSpec&lt;/strong&gt;. Both tools are good, but in my opinion have drawbacks.&lt;/p&gt;

&lt;h3&gt;
  
  
  Experience with SpecKit and OpenSpec
&lt;/h3&gt;

&lt;p&gt;I actively used both tools and encountered specific problems:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SpecKit&lt;/strong&gt; (from GitHub):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Excessive documentation&lt;/strong&gt;: generates hundreds of lines of specifications, plans and checklists. For small tasks this is overhead&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rigid workflow&lt;/strong&gt;: hard to skip steps like testing, even when it's not needed&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Context problems&lt;/strong&gt;: many tokens spent on work&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Refactoring complexity&lt;/strong&gt;: when you need to quickly fix a bug, you have to go through the whole cycle &lt;code&gt;/specify&lt;/code&gt; → &lt;code&gt;/plan&lt;/code&gt; → &lt;code&gt;/tasks&lt;/code&gt; → &lt;code&gt;/implement&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;OpenSpec&lt;/strong&gt; (simpler):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Validation bugs&lt;/strong&gt;: often shows validation errors even when everything is correct. &lt;code&gt;openspec validate&lt;/code&gt; and &lt;code&gt;openspec show&lt;/code&gt; return contradictory results&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Control problems&lt;/strong&gt;: AI sometimes ignores workflow and starts implementation without &lt;code&gt;/openspec:apply&lt;/code&gt; command&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Complexity for large projects&lt;/strong&gt;: unclear how to apply for existing large codebases&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Common problem for both:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Require manual setup for each project&lt;/li&gt;
&lt;li&gt;Require preliminary topic research&lt;/li&gt;
&lt;li&gt;Insufficient automation of skills generation and MCP connection&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AI Factory takes these moments into account and solves them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; ai-factory
ai-factory init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;During initialization:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Interactive questions about project and agent&lt;/li&gt;
&lt;li&gt;Automatic MCP server setup&lt;/li&gt;
&lt;li&gt;Creating &lt;code&gt;.ai-factory.json&lt;/code&gt; config&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For a new project - will ask about stack. For existing - will analyze code itself and pick what's needed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Main Commands
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Command&lt;/th&gt;
&lt;th&gt;Usage&lt;/th&gt;
&lt;th&gt;Branch?&lt;/th&gt;
&lt;th&gt;Plan?&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/ai-factory.task&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Quick tasks&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;&lt;code&gt;.ai-factory/plan.md&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/ai-factory.feature&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Big features&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;&lt;code&gt;.ai-factory/features/&amp;lt;name&amp;gt;.md&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/ai-factory.fix&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Bugs and errors&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/ai-factory.implement&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Execute plan&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/ai-factory.evolve&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Improve skills&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Workflow
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;For small tasks:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/ai-factory.task → plan → /ai-factory.implement → done
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;For features:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/ai-factory.feature → branch + plan → /ai-factory.implement → commits → done
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;For bugs:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/ai-factory.fix → fix + logging + patch → done
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Key Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;code&gt;/ai-factory&lt;/code&gt; - Context Setup
&lt;/h3&gt;

&lt;p&gt;Analyzes project, determines stack, picks skills from skills.sh or generates new ones, configures necessary MCP.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Feature and Task Planning
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;/ai-factory.feature&lt;/code&gt; - for large tasks with branch and full plan.&lt;br&gt;
&lt;code&gt;/ai-factory.task&lt;/code&gt; - for quick changes without branch.&lt;/p&gt;

&lt;p&gt;Both analyze requirements, study codebase, create tasks with dependencies.&lt;/p&gt;
&lt;h3&gt;
  
  
  3. &lt;code&gt;/ai-factory.implement&lt;/code&gt; - Executing Created Plan
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;/ai-factory.implement 5      &lt;span class="c"&gt;# work on task #5 if we want to do something specific&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Before starting, agent will read all patches from &lt;code&gt;.ai-factory/patches/&lt;/code&gt; - learns from past mistakes.&lt;/p&gt;
&lt;h3&gt;
  
  
  4. &lt;code&gt;/ai-factory.fix&lt;/code&gt; - Quick Fixes
&lt;/h3&gt;

&lt;p&gt;Use when it's clear the problem is small. Agent studies problem, applies fix with logging, creates patch for self-learning. No plans - immediate solution and learning.&lt;/p&gt;
&lt;h3&gt;
  
  
  5. &lt;code&gt;/ai-factory.evolve&lt;/code&gt; - Skills Self-Learning
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;/ai-factory.evolve           &lt;span class="c"&gt;# All skills&lt;/span&gt;
/ai-factory.evolve fix       &lt;span class="c"&gt;# Specific skill&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Analyzes all patches, finds error patterns, improves skills with your approval.&lt;/p&gt;
&lt;h3&gt;
  
  
  6. &lt;code&gt;/ai-factory.skill-generator&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Learning mode&lt;/strong&gt; - pass URL to generate skills from documentation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;/ai-factory.skill-generator https://fastapi.tiangolo.com/tutorial/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Studies sources, enriches through search, generates full-fledged custom skills.&lt;/p&gt;

&lt;h2&gt;
  
  
  Self-Learning System
&lt;/h2&gt;

&lt;p&gt;Each fix creates a &lt;strong&gt;patch&lt;/strong&gt; - a document that helps avoid similar errors in the future.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Learning cycle:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/fix → bug → fix → patch → 
next /fix or /implement → reads patches → better code
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Patch structure:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Problem and cause&lt;/li&gt;
&lt;li&gt;Applied solution&lt;/li&gt;
&lt;li&gt;Prevention recommendations&lt;/li&gt;
&lt;li&gt;Search tags&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Periodically run &lt;code&gt;/ai-factory.evolve&lt;/code&gt; - the tool will analyze accumulated patches and improve skills for your project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Project Structure
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;project/
├── .claude/skills/          # Skills
├── .ai-factory/
│   ├── DESCRIPTION.md       # Specification
│   ├── PLAN.md             # Current plan
│   ├── features/           # Feature plans
│   ├── patches/            # Learning patches
│   └── evolutions/         # Improvement logs
└── .ai-factory.json        # Config
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  MCP Servers
&lt;/h3&gt;

&lt;p&gt;GitHub, Postgres, Filesystem are supported. Configuration in &lt;code&gt;.claude/settings.local.json&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Best Practices
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Logging&lt;/strong&gt;: DEBUG/INFO/WARN/ERROR levels, control via &lt;code&gt;LOG_LEVEL&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Commits&lt;/strong&gt;: checkpoints every 3-5 tasks, conventional commits format&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tests&lt;/strong&gt;: always asked before plan, not added without consent&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Tool Development
&lt;/h2&gt;

&lt;p&gt;After active use over several days, I made two releases (v1.1 and v1.2):&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;v1.1:&lt;/strong&gt; improved Skill Generator, learning mode&lt;br&gt;&lt;br&gt;
&lt;strong&gt;v1.2:&lt;/strong&gt; patch system, &lt;code&gt;/ai-factory.evolve&lt;/code&gt;, feature organization&lt;br&gt;&lt;br&gt;
&lt;strong&gt;v1.3. Security First!&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Critically important update - protection system against prompt-injection. When downloading skills from skills.sh, we trust external sources with access to your project. Now each skill undergoes mandatory scanning for 10 threat categories - from injections and data leaks to social engineering. Two-level verification (regex + LLM intent analysis) filters out malicious code. &lt;code&gt;/skill-generator scan&lt;/code&gt; allows manual file checking.&lt;br&gt;&lt;br&gt;
Also added new skill &lt;code&gt;/ai-factory.improve&lt;/code&gt; for refining already created plans - when you understand the plan is good but something is missing.&lt;/p&gt;

&lt;p&gt;Of course, I used AI Factory to develop AI Factory).&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;AI Factory solves specific AI development problems:&lt;/p&gt;

&lt;p&gt;✅ Automatic project setup&lt;br&gt;&lt;br&gt;
✅ Spec-driven approach with control&lt;br&gt;&lt;br&gt;
✅ Self-learning from mistakes&lt;br&gt;&lt;br&gt;
✅ Simple workflow&lt;/p&gt;

&lt;h3&gt;
  
  
  Perfect If You:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Tired of setup before each project&lt;/li&gt;
&lt;li&gt;Want structured approach when working with AI&lt;/li&gt;
&lt;li&gt;Work on real projects&lt;/li&gt;
&lt;li&gt;Have experience with Claude Code or similar tools&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  About the Future
&lt;/h3&gt;

&lt;p&gt;I now have a team of assistants - experts in different areas. I'm doing projects I wouldn't have taken on before due to lack of stack knowledge.&lt;/p&gt;

&lt;p&gt;This is a tool. Developer experience matters - often need to correct proposed solutions. AI is an assistant for specialists, not a replacement for developers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/lee-to/ai-factory" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The library is free. Contributions and feedback are welcome.&lt;/p&gt;

&lt;p&gt;Do you have experience with spec-driven approach? Share in the comments.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>programming</category>
      <category>llm</category>
      <category>opensource</category>
    </item>
    <item>
      <title>MoonShine 4: AI-Powered Admin Panel Revolution</title>
      <dc:creator>Danil Shutsky</dc:creator>
      <pubDate>Tue, 06 Jan 2026 08:30:14 +0000</pubDate>
      <link>https://dev.to/cutcode/moonshine-4-ai-powered-admin-panel-revolution-43h9</link>
      <guid>https://dev.to/cutcode/moonshine-4-ai-powered-admin-panel-revolution-43h9</guid>
      <description>&lt;p&gt;November 11, 2025 at 11:11 - this important date will go down in MoonShine history. Four ones = fourth version. Symbolism? Perhaps. But behind these numbers is something more - 11 months of continuous work, with the last 6 in super intensive development mode. In this article, we'll break down all the changes in MoonShine 4: from the new palette and token system to AI-generated interfaces. MoonShine 4 truly changes the rules for working with admin panels. I wrote this article for those interested in open-source/Laravel/Filament/admin panels. Enjoy reading.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;MoonShine is an open source admin panel for Laravel projects. And not just for Laravel.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  History and Context
&lt;/h1&gt;

&lt;h2&gt;
  
  
  The Story of One Decision
&lt;/h2&gt;

&lt;p&gt;When I started working on version four, I could have taken the easy path: a small refactoring, updating dependencies to current versions, updating Tailwind to version 4 - and calling it MoonShine 4. Safe. Planned. Boring.&lt;/p&gt;

&lt;p&gt;But deep down, I didn't want such a release. I wanted to do something cool. Each MoonShine release has been a challenge for me, and I want to maintain this trend. And then the decision was made to create a new design. Despite the fact that crowdfunding for the new design raised only a small portion of what was needed. Despite the fact that the main contributors couldn't actively participate. Despite everything.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Came of It
&lt;/h2&gt;

&lt;p&gt;MoonShine 4 is not just an update. It's a serious transformation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;New design&lt;/strong&gt; - UI work, taking into account all past mistakes&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;New architecture&lt;/strong&gt; - CRUD extracted into a separate module for use outside Laravel with any data type&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Design token system&lt;/strong&gt; - ability to customize every interface element&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI integration&lt;/strong&gt; - MoonShine Forty-Five - generator for working with Claude Code&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Telegram Mini App&lt;/strong&gt; - quick integration&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;20+ ready-made palettes&lt;/strong&gt; - and a generator for creating your own&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Comprehensive documentation&lt;/strong&gt; - documentation almost entirely prepared by the community&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything in order.&lt;/p&gt;

&lt;h2&gt;
  
  
  Thanks to Sponsors
&lt;/h2&gt;

&lt;p&gt;I want to immediately say a big thank you again to everyone who supports MoonShine on GitHub, through direct donations and on Boosty. I estimated the design and layout update for MoonShine at $3,000, but we raised much less. The rest had to be added from my own funds. But I'm confident the situation will change for the better.&lt;/p&gt;

&lt;h2&gt;
  
  
  Release Date 11.11
&lt;/h2&gt;

&lt;p&gt;As for the date 11.11 - it happened by accident. But there's an interesting moment I'd like to share with you. I didn't associate this number with MoonShine in any way, but probably for the last year, I've been periodically looking at the time and seeing 11:11.&lt;/p&gt;

&lt;p&gt;Initially, the release was planned for November 1st. But I had to think about a postponement date. I'm choosing a date in the calendar. I look: 11.11. And I think: "How cool! That's 4 ones - that's exactly MoonShine 4!"&lt;/p&gt;

&lt;p&gt;We added 4 stripes-sticks to the artwork. And many people wrote: "But those aren't Roman numerals! You wrote it wrong!" But actually, it's 4 ones. And I posted in Telegram with the promo video at 11.11 at 11:11. Such moments are cool. Surely, this will bring great success 😄&lt;/p&gt;

&lt;h1&gt;
  
  
  What is MoonShine
&lt;/h1&gt;

&lt;p&gt;MoonShine is a convenient and multifunctional admin panel that helps developers quickly create administrative interfaces for their web applications based on the Laravel framework (one of the most popular tools for creating websites in PHP), as well as other frameworks.&lt;/p&gt;

&lt;p&gt;Brief overview of MoonShine capabilities:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ultra-Fast Development (Time Saving):&lt;/strong&gt;&lt;br&gt;
MoonShine is a ready-made constructor for an admin panel. You don't need to write forms, tables, and buttons for data management from scratch. You use ready-made components, which dramatically speeds up project creation. You can use MoonShine components not only inside the admin panel - with their help, you can build a personal cabinet or an entire project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Simple Data Management (CRUD):&lt;/strong&gt;&lt;br&gt;
The main task of an admin panel is to manage information. MoonShine allows you to easily perform all CRUD operations (Create, Read, Update, Delete) for users, orders, articles, and other data in your database or through an API. Everything is intuitive and doesn't require complex code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI Assistant (Forty-Five) - Creating Interfaces in One Prompt:&lt;/strong&gt;&lt;br&gt;
The built-in AI agent MoonShine Forty-Five is your personal assistant. You can literally ask it to create an entire page in one prompt (request), for example: "Make a page with a list of users, a filter, and an add button." This incredibly speeds up work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Branding and Appearance in 1 Minute:&lt;/strong&gt;&lt;br&gt;
With the new Palette and Design Token system, you can instantly change the color scheme, fonts, and panel spacing so it looks like your brand. There are 20+ ready-made palettes and a special generator that simplifies this process.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Admin Panel Always With You (Telegram Mini App):&lt;/strong&gt;&lt;br&gt;
Thanks to Telegram Mini App integration, your admin panel opens right inside Telegram. This means that to work from a mobile phone, you don't need a separate, complex to develop mobile app.&lt;/p&gt;
&lt;h2&gt;
  
  
  MoonShine vs Competitors
&lt;/h2&gt;

&lt;p&gt;Quickly evaluate the differences between the most popular admin panels for Laravel:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Criteria / Feature&lt;/th&gt;
&lt;th&gt;MoonShine&lt;/th&gt;
&lt;th&gt;Filament&lt;/th&gt;
&lt;th&gt;Orchid&lt;/th&gt;
&lt;th&gt;Nova&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Performance*&lt;/td&gt;
&lt;td&gt;Medium&lt;/td&gt;
&lt;td&gt;Low&lt;/td&gt;
&lt;td&gt;Medium&lt;/td&gt;
&lt;td&gt;Medium&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Free&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Highly Customizable&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+/-&lt;/td&gt;
&lt;td&gt;+/-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Detailed Documentation&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Frequently Updated&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;- (Aug 13)&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Beginner Friendly&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Color Palette Customization&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Video Guides&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Stack&lt;/td&gt;
&lt;td&gt;TAL&lt;/td&gt;
&lt;td&gt;TALL&lt;/td&gt;
&lt;td&gt;LBH&lt;/td&gt;
&lt;td&gt;VILT&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Any Data Type&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;Eloquent&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;Eloquent&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ability to Use Components&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+/-&lt;/td&gt;
&lt;td&gt;+/-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Convenient for MVP Development&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ecosystem&lt;/td&gt;
&lt;td&gt;+/-&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+/-&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Online Demo Availability (quantity)&lt;/td&gt;
&lt;td&gt;+ (3)&lt;/td&gt;
&lt;td&gt;+ (1)&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ready-Made Solutions Marketplace&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;* No admin panel received high performance. Not because they're all bad, but because admin panels aren't about performance, they're about speed of implementation.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In fact, MoonShine has a lot in common with Filament. And here everyone chooses a tool to their liking - if you want a lot of sugar and like to use ready-made elements, then Filament is closer to you, but one step to the left - and you already face problems and run to the chat for help. If you consider yourself a developer, then MoonShine will be better here - there are ready-made solutions for popular tasks, and if you need something custom, it's convenient to do it yourself. That was yesterday. And today MoonShine has Forty-Five, and any component can be made in one prompt.&lt;/p&gt;

&lt;p&gt;A small advertisement. Here's the result of executing one prompt:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Make a field with Yandex Maps integration":&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0u1x0kzmxxsffztpfhd4.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0u1x0kzmxxsffztpfhd4.jpeg" width="800" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And one more difference - MoonShine has already gone beyond Laravel. There's a basic admin panel &lt;a href="https://github.com/moonshine-software/symfony" rel="noopener noreferrer"&gt;MoonShine for Symfony&lt;/a&gt;, there's the possibility to make an implementation for Yii and other frameworks! If you're interested - write, we'll discuss!&lt;/p&gt;


&lt;h1&gt;
  
  
  Main Features
&lt;/h1&gt;
&lt;h2&gt;
  
  
  New Structure: Order in Code
&lt;/h2&gt;
&lt;h3&gt;
  
  
  What are Resources, Pages, Components and Fields (basics for beginners)
&lt;/h3&gt;

&lt;p&gt;Any page opened in a browser within the MoonShine admin panel is called just that - a page. It consists of a template (Layout) which can be different for each page. By default, there's a template for the login page, for CRUD pages, and a template for error pages. And the content of the page is MoonShine components. In MoonShine, everything is broken down into components, each HTML tag is a component, and you can configure your templates and pages with them.&lt;/p&gt;

&lt;p&gt;CRUD pages operate with data. By default, data is based on Eloquent models, and pages created for CRUD operations within a specific model are combined into a resource. A resource groups a set of pages with a common data type, helps retrieve data, save and delete: a complete CRUD set. The basis for CRUD pages is, of course, a form for editing them and a table for displaying the entire list. The table and form are also MoonShine components. And how to display data inside is the task of fields, by analogy with fields in tables. With fields, we configure what we display: a text field or a field with an image.&lt;/p&gt;
&lt;h3&gt;
  
  
  CRUD Module
&lt;/h3&gt;

&lt;p&gt;Everything related to CRUD has been extracted into a separate module. This was done so that CRUD modules can be used outside Laravel. This idea came when I was making an implementation of &lt;a href="https://github.com/moonshine-software/symfony" rel="noopener noreferrer"&gt;MoonShine for Symfony&lt;/a&gt;. You can take this CRUD module and make it for any framework. Or use it in Laravel for any data type other than Eloquent.&lt;/p&gt;
&lt;h3&gt;
  
  
  The Problem with the Old Structure (MoonShine 3)
&lt;/h3&gt;

&lt;p&gt;Before version 4, you had to configure the set of fields for all pages from the resource. You could move to separate pages, but that was already an option. With this approach, the resource itself grew, there was a lot of logic about which fields to display on which page. In chats, there were many questions: how do I check which page I'm currently on to properly configure fields? And it seemed convenient - everything in one place, but in fact, it wasn't.&lt;/p&gt;
&lt;h3&gt;
  
  
  Solution in MoonShine 4
&lt;/h3&gt;

&lt;p&gt;By default, when creating a resource, three pages are also created for the data list, editing/creation, and detailed display. Now this is not an option, and each page has responsibility for everything that happens on it. Also, the main page components - on the index - table, for creation/editing - form, and table on the detail page are extracted into separate layers and can also be overridden and customized.&lt;/p&gt;
&lt;h2&gt;
  
  
  Tailwind 4 and Design Tokens: Customization Without Limits
&lt;/h2&gt;
&lt;h3&gt;
  
  
  What Changed
&lt;/h3&gt;

&lt;p&gt;A lot of work was done to upgrade Tailwind to version 4. Done by &lt;a href="https://github.com/MrVACO" rel="noopener noreferrer"&gt;Artem Vaco&lt;/a&gt;. This is not just a new number in the metrics - the appearance of Tailwind 4 gave great opportunities for working with color schemes and layout. A design token system was created, with which you can quickly customize the appearance.&lt;/p&gt;

&lt;p&gt;Design tokens are the basic components of a design system: variables that store colors, sizes, spacing, and typography. In our case, they allow you to quickly make global changes to the layout by changing just one token value.&lt;/p&gt;

&lt;p&gt;For example, there's spacing. You can simply override spacing through the main template - and instead of 1.5, set 1.0. And the entire theme will become more compact, since everything here is implemented on spacing.&lt;/p&gt;

&lt;p&gt;Any color, any border radius, any padding - everything is implemented on design tokens. You can generally override anything you want.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;assets&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kt"&gt;array&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="nc"&gt;InlineCss&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="sh"&gt;&amp;lt;&amp;lt;&amp;lt;CSS
                :root {
                    --spacing: 0.25rem;
                    --text-xs: 14px;
                    --text-sm: 14px;
                    --ms-btn-icon-size:16px;
                }
                CSS&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Palettes: Branding in 1 Minute
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Problem and Solution
&lt;/h3&gt;

&lt;p&gt;Branding is an important part of an admin panel. And replacing the logo doesn't solve all needs. But if the admin panel uses brand colors, it gives the feeling that the entire panel was written from scratch for business needs, the client will feel maximally comfortable in it! Previously, you had to manually work with styles. Now, using design tokens, you can override all template parameters at once through a separate layer, which we called &lt;strong&gt;Palettes&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Palettes - Default and Brand
&lt;/h3&gt;

&lt;p&gt;For the new design, we initially wanted to make a black-and-white palette the default. Since many complained: "MoonShine is a bad admin panel - we don't like the purple color." But later we decided that after all, it's MoonShine - it's already a certain brand that we want to initially demonstrate. And we left the default palette in familiar colors.&lt;/p&gt;

&lt;p&gt;But you can switch to another palette in a second or create your own.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;final&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MoonShineLayout&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;AppLayout&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="kt"&gt;?string&lt;/span&gt; &lt;span class="nv"&gt;$palette&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;NeutralPalette&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Palette Generator
&lt;/h3&gt;

&lt;p&gt;A &lt;a href="https://getmoonshine.app/palette-generator" rel="noopener noreferrer"&gt;palette generator&lt;/a&gt; appeared on getmoonshine.app. Here you can see all the box palettes. When you install MoonShine, it will offer you a palette to choose from. Here's the neutral theme, it looked like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Forxqsy0rx05tfcchwp6o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Forxqsy0rx05tfcchwp6o.png" width="800" height="380"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are more unusual color schemes, for example, Halloween.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz18vr5e2ewli6v4u3ain.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz18vr5e2ewli6v4u3ain.png" width="800" height="366"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Notably, the palette generator is implemented on MoonShine. There's no additional JS here, no additional CSS, no additional components - completely on MoonShine.&lt;/p&gt;

&lt;p&gt;The feature of this generator is that you can customize the palette to the necessary colors, see how it will look and export it for your project. Simple and convenient.&lt;/p&gt;

&lt;h3&gt;
  
  
  Generating Palettes with Forty-Five
&lt;/h3&gt;

&lt;p&gt;And with Forty-Five, you can generate a color scheme in one prompt and the LLM itself will create a class, put it in the right directory and connect it to the system. But I won't get ahead of myself, I'll tell you about Forty-Five below.&lt;/p&gt;

&lt;h2&gt;
  
  
  New Design: Creation History
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Design History
&lt;/h3&gt;

&lt;p&gt;Often in comments people wrote to me that MoonShine's design is bad, looks scary. But I understood that design is a matter of taste - you can't please everyone. But there were many reviews about weak design of MoonShine 3 and I decided. I wrote to the same person (a cool specialist who made the landing page for Yii3) who last time made the default design for MoonShine 1.5, only now taking into account all the shortcomings. We collected feedback and rolled up our sleeves.&lt;/p&gt;

&lt;p&gt;In the end, we succeeded. My opinion - it's fire. But already in the MoonShine chat I saw that again people write: "The design is not very good, we should have used shadcn." But essentially this will always be the case, there will always be people who don't like something.&lt;/p&gt;

&lt;h2&gt;
  
  
  New Template Capabilities
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Layout Customization
&lt;/h3&gt;

&lt;p&gt;In the third version of MoonShine, the sidebar was always pressed to the left side of the screen. And the content area was pressed to it. And you couldn't add a second sidebar (without CSS dances). Now there's the ability to make any sidebar combinations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9heg01xhuu7eo3k0ohby.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9heg01xhuu7eo3k0ohby.png" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here are sidebars both on the left and right.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7yf7l6dpydy9qrvmtx20.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7yf7l6dpydy9qrvmtx20.png" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now let's return to customizing the content block. If you need to center the content block, just change the template property:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;final&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MoonShineLayout&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;AppLayout&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="kt"&gt;bool&lt;/span&gt; &lt;span class="nv"&gt;$contentCentered&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;// …&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By default false. If we set true, we get the content area in the center.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4121731vu9ukcxszyma.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4121731vu9ukcxszyma.png" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can remove the Sidebar and this view is perfect for working with MVPs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0eoxwq1dvgvry8mv97ac.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0eoxwq1dvgvry8mv97ac.png" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  MoonShine Forty-Five: AI Changes the Game
&lt;/h1&gt;

&lt;h2&gt;
  
  
  What It Is and Why
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;MoonShine Forty-Five&lt;/strong&gt; - LLM-powered admin panel creation assistant.&lt;/p&gt;

&lt;p&gt;Why such a name? MoonShine translates as moonshine. Standard 40 proof, and this is a stronger thing - 45. More advanced, stronger - from which there's more pleasure.&lt;/p&gt;

&lt;p&gt;The package was created so that your AI agent works with MoonShine at level 80. For now it only supports Claude Code, but I'm sure it has a big future ahead. Taylor Otwell, Nuno Maduro will immediately make reviews and start contributing.&lt;/p&gt;

&lt;h2&gt;
  
  
  How It Works (Step by Step)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Installation:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; @moonshine-software/forty-five
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And then the principle of operation is like with GitHub SpecKit.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Adding strong MoonShine to the project:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;forty-five init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Forty-five will download all necessary guidelines and add its custom commands to Claude Code for work.&lt;/p&gt;

&lt;p&gt;Then you call Claude Code, write a Forty-Five command and give a task.&lt;/p&gt;

&lt;h2&gt;
  
  
  Forty-Five Commands
&lt;/h2&gt;

&lt;p&gt;Currently five commands are available. Let's break them down.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. /forty-five.palettes
&lt;/h3&gt;

&lt;p&gt;Here, I think, everything is clear. You can generate palettes based on AI. I didn't tell you this, but all those 20 palettes that are in the box were generated in Forty-Five. And then we approved them as MoonShine directors. Plus we fine-tuned them a bit.&lt;/p&gt;

&lt;p&gt;Let's strain the agent, let it make us a palette in Batman colors.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo4le89brt212f9v0ehii.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo4le89brt212f9v0ehii.png" width="800" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's what we got. Well, so-so result, probably the idea about Batman wasn't very successful. Or Claude didn't watch Batman.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. /forty-five.layout
&lt;/h3&gt;

&lt;p&gt;Well, making color schemes isn't the most useful thing. The Layouts command allows you to do more serious tasks. You can use a component approach and build pages with Forty-Five. Under the hood, it has a huge guideline on components with detailed rules for their correct use, which the LLM follows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you need a sidebar - Forty-Five will wrap it in &lt;code&gt;&amp;lt;x-wrapper&amp;gt;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;If you ask for a "button in the center" - it will add &lt;code&gt;.justify-center&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;If you say "without borders" - it will apply &lt;code&gt;.border-none&lt;/code&gt; to the needed component&lt;/li&gt;
&lt;li&gt;Everything with icons, colors and spacing works according to rules understandable to the LLM agent&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And you'll get ready-made pages according to your prompt. For example, I simply wrote:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"make a page with a list of users, with a filter and an add button"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbnbwnzt91xf1xio3i0nx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbnbwnzt91xf1xio3i0nx.png" width="800" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is in one prompt, friends! Everything as ordered. It's possible that if the task wasn't stated very precisely (or the result wasn't quite what you wanted), then you'll need to work additionally on this task together with Forty-Five. For example, add dividers somewhere, play with spacing, and so on.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. /forty-five.components
&lt;/h3&gt;

&lt;p&gt;This command allows you to quickly generate ready-made UI interface elements based on MoonShine blade components. Tables, modal windows, forms, lists - everything needed to build a user interface.&lt;/p&gt;

&lt;p&gt;Under the hood of the command is a huge guideline on the entire MoonShine blade component library:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Correct HTML structure without tag duplication&lt;/li&gt;
&lt;li&gt;All necessary wrappers and CSS classes in place&lt;/li&gt;
&lt;li&gt;Correct use of slots (slot-based patterns)&lt;/li&gt;
&lt;li&gt;All logic for working with icons, badges, buttons&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And you'll get ready-made Blade templates as a result, for example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"create a user table with avatars, name, email, status badges, and action buttons"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  4. /forty-five.field
&lt;/h3&gt;

&lt;p&gt;This command allows you to create custom fields for MoonShine. If you need something specific that's not in the standard field set - Forty-Five will generate everything necessary.&lt;/p&gt;

&lt;p&gt;Under the hood of the command are detailed guidelines on MoonShine field structure:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Correct PHP class structure with Field inheritance&lt;/li&gt;
&lt;li&gt;Blade view with correct wrappers and CSS classes&lt;/li&gt;
&lt;li&gt;Alpine.js integration for interactivity&lt;/li&gt;
&lt;li&gt;Support for fluent methods for configuration&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And you'll get ready-made custom fields according to your prompt. For example, I simply wrote:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"create a rating field with stars from 1 to 5, with the ability to click on a star and select a rating"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Result: PHP class, Blade view with Alpine.js, correct saving to database.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. /forty-five.component
&lt;/h3&gt;

&lt;p&gt;The last command is for creating custom components. Unlike fields, components are used to decorate the interface and are not directly related to model data.&lt;/p&gt;

&lt;p&gt;Under the hood of the command is knowledge about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The difference between components and fields&lt;/li&gt;
&lt;li&gt;Correct component structure&lt;/li&gt;
&lt;li&gt;Working with slots and nested components&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And you'll get ready-made UI components as a result, for example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"create a 'statistics card' component - with icon, value, and label"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We get: PHP class with fluent methods, beautiful layout, and icon support.&lt;/p&gt;

&lt;h3&gt;
  
  
  Using Forty-Five
&lt;/h3&gt;

&lt;p&gt;Forty-Five doesn't just generate code - it understands MoonShine best practices. If the result wasn't quite what you wanted, just clarify the details in the next prompt: "add mass delete capability" or "make the content field mandatory only for published articles". Forty-Five understands the context of your previous generation and makes targeted changes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Time Saving is Reality
&lt;/h3&gt;

&lt;p&gt;Imagine: instead of an hour of manual work setting up fields, filters, and relationships, you get a ready result in a couple of minutes. Moreover, a result that follows all MoonShine rules, uses the correct components, and is optimized for your needs. Forty-Five is an excellent tool, but it can't guess your thoughts. Everything depends on how well you set the task for it. And you still need to know the documentation. But with the appearance of such tools, the rules of the development game are changing. You can simply connect Forty-Five and get a personal cabinet in one prompt. Or you can make full MVPs.&lt;/p&gt;

&lt;h1&gt;
  
  
  Telegram Mini App: Admin in Your Pocket
&lt;/h1&gt;

&lt;p&gt;Since the middle of the year, I've been working on one project (Task Manager). Its feature is integration with Telegram Mini App. As it turned out, it's very convenient! Developing such an application is much easier than writing an app for mobile applications. Sometimes I had the idea to make an application for the admin panel, and this is just a suitable elegant solution! And I made a package with Telegram Mini App integration into MoonShine. It's simple to use. Install it, specify the bot token, Mini App URL, user's Telegram ID in the admin panel. That's it! The admin panel can be used in Telegram Mini App. Of course, this doesn't replace the web interface, but surely you've had the need to do something in the admin panel from your phone. With Telegram Mini App, it's much more convenient to do this.&lt;/p&gt;

&lt;h1&gt;
  
  
  Documentation from the Community
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Working on MoonShine 4 Documentation
&lt;/h2&gt;

&lt;p&gt;This time there was a super cool team for documentation, the guys really pleased me. If last time I gathered about 10 volunteers from the community for documentation. But I did about 90% myself.&lt;/p&gt;

&lt;p&gt;This time I practically didn't touch the documentation. I wrote that there's a task to make documentation, 11 people volunteered. But all the work was done by &lt;a href="https://github.com/shevl-dev" rel="noopener noreferrer"&gt;Anatoliy&lt;/a&gt;, &lt;a href="https://github.com/warete" rel="noopener noreferrer"&gt;Egor&lt;/a&gt;, and &lt;a href="https://github.com/Vladislav009" rel="noopener noreferrer"&gt;Vladislav&lt;/a&gt;. And we managed with the documentation exactly on schedule. Plus, the guys not only wrote documentation, they also updated packages for MoonShine 4, offered practical advice - in general, a huge contribution. And I'll have gifts for them: it will be merch and all kinds of useful things. I motivate from my side as I can!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8pfcsmtqg52ek9kdj7wg.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8pfcsmtqg52ek9kdj7wg.jpeg" width="800" height="368"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9zzltg1e839y38x7qu1u.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9zzltg1e839y38x7qu1u.jpeg" width="800" height="600"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmyle37gcr9afa2c8zitc.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmyle37gcr9afa2c8zitc.jpeg" width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  MoonShine School
&lt;/h3&gt;

&lt;p&gt;MoonShine is constantly evolving and everyone can participate in it.&lt;/p&gt;

&lt;p&gt;If you ask the guys in the MoonShine chat who helped with documentation, most of them will say that for them it was a very cool experience. Working in a team on MoonShine is like taking a course in teamwork. And writing code is just one of the tasks - the most diverse skills are needed - documentation, design, layout, promotion. I, in turn, will continue to work with the team. Some guys admitted that when there's routine and boredom at work, the hobby of working on MoonShine captivated them, plus they're developing well as specialists. And I myself as a developer have greatly leveled up precisely on MoonShine.&lt;/p&gt;

&lt;h1&gt;
  
  
  PHPStorm Plugin: Automating Routine
&lt;/h1&gt;

&lt;p&gt;A plugin for PHPStorm by &lt;a href="https://github.com/xepozz" rel="noopener noreferrer"&gt;Dima Derepko&lt;/a&gt;. Created specifically for working with MoonShine.&lt;/p&gt;

&lt;p&gt;Main features:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Provides smart autocompletion for classes, fields, and components.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fja8npskm3s7zd6k65ttd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fja8npskm3s7zd6k65ttd.png" width="800" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Simplifies navigation through the project via special icons in the editor - you can quickly navigate between related elements, for example from resources to Eloquent models and back.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjrrfbpeja4qn7bs4s2vy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjrrfbpeja4qn7bs4s2vy.png" width="779" height="301"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;In the "New" context menu, a separate MoonShine menu appears for quick creation of typical files: resources, pages, fields, components, layouts, etc. Each file type is generated through a dialog box with corresponding parameters based on a template.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4cazha9dzy8925bsxknj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4cazha9dzy8925bsxknj.png" width="438" height="345"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpq66mz9bat5a1weizxhn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpq66mz9bat5a1weizxhn.png" width="800" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And New Project will immediately create a clean project on Laravel+MoonShine.&lt;/p&gt;

&lt;p&gt;For those who work in PHPStorm - I highly recommend trying it!&lt;/p&gt;

&lt;h1&gt;
  
  
  What's More?
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Upgrade Guide: Migration from Version Three
&lt;/h2&gt;

&lt;p&gt;A convenient tool for updating from the third to the fourth version. Egor made an &lt;a href="https://github.com/warete/moonshine-upgrade" rel="noopener noreferrer"&gt;Upgrade Script&lt;/a&gt; with Rector under the hood. It will do most of the routine work, and you'll need to manually finish your customizations. If you're planning to upgrade a project from version three to four, I recommend using the script. Then familiarize yourself with the &lt;a href="https://getmoonshine.app/docs/4.x/upgrade-guide" rel="noopener noreferrer"&gt;Upgrade Guide&lt;/a&gt; - it's not that big.&lt;/p&gt;

&lt;p&gt;In general, when preparing the release, we tried as much as possible to maintain compatibility between versions 3 and 4. Somewhere previous versions of classes remain, which are marked as Deprecated. They still work for now, but you should gradually get rid of them - they will be removed in MoonShine 5.&lt;/p&gt;

&lt;h2&gt;
  
  
  Add-ons Store - Ready-Made Solutions
&lt;/h2&gt;

&lt;p&gt;MoonShine 4 has an &lt;a href="https://getmoonshine.app/plugins" rel="noopener noreferrer"&gt;official marketplace&lt;/a&gt;. This is a section where ready-made solutions for typical tasks are placed.&lt;/p&gt;

&lt;p&gt;Imagine: you need a file manager integration. You can spend several hours a day writing from scratch, or you can install a ready-made package in 5 minutes that's already used on hundreds of projects and works like clockwork. That's what the marketplace was created for - so you don't waste time on what someone has already solved before you.&lt;/p&gt;

&lt;h3&gt;
  
  
  What's Interesting There?
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;File Manager&lt;/strong&gt; - file manager with drag-and-drop, image previews, file organization.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MoonShine Roles-Permissions&lt;/strong&gt; - if you need a system of roles and access rights, this is your choice. Built on the basis of the famous Spatie Laravel Permissions. 12,000+ downloads - one of the most popular packages. Mass role assignment, custom rights - all out of the box.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MoonShine Spatie MediaLibrary&lt;/strong&gt; - integrates the functionality of the popular Laravel-MediaLibrary package from Spatie, for managing media files in the admin panel.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Two-Factor Authentication&lt;/strong&gt; - two-factor authentication for the admin panel.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;User Impersonation&lt;/strong&gt; - a cool thing for support. Need to reproduce a client's bug? Log in under their account and see everything with your own eyes. Debugging is much easier.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sortable tree resource&lt;/strong&gt; - adds the ability to create and manage tree structures with sorting function (drag-and-drop), for organizing hierarchical data such as categories or menus.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CKEditor or TinyMCE&lt;/strong&gt; - powerful visual editors.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Language Packs&lt;/strong&gt; - localization packages for the admin panel interface itself. Russian, Ukrainian, German, Chinese, Romanian - choose any.&lt;/p&gt;

&lt;p&gt;The marketplace is growing. People are constantly adding new packages for different tasks. There's a monetization opportunity.&lt;/p&gt;

&lt;p&gt;In general, the marketplace is not for show. It's a really useful thing that saves a ton of time on typical tasks. And time in development is money.&lt;/p&gt;

&lt;h1&gt;
  
  
  Where to Start Working with MoonShine
&lt;/h1&gt;

&lt;p&gt;The answer is simple - with the documentation. We tried to make the documentation friendly for beginners and detailed. Quick start here:&lt;br&gt;
&lt;a href="https://getmoonshine.app/docs/4.x/quick-start" rel="noopener noreferrer"&gt;https://getmoonshine.app/docs/4.x/quick-start&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Development Plans: What's Next
&lt;/h1&gt;

&lt;p&gt;In the near future, I'll make another panel. In addition to the sidebar, there will be an internal panel. Also, most likely nested menus will be improved so they drop not down but to the side (upd.: already added in MoonShine 4.1).&lt;/p&gt;

&lt;p&gt;I'll continue to develop Telegram Mini App. Most likely some components in Telegram style will be added for it. Perhaps there will be a menu at the bottom with main sections to make it even more convenient to use the admin panel from the phone.&lt;/p&gt;

&lt;p&gt;Well, I'll develop all kinds of AI integrations - this is already a mandatory tool for a modern developer.&lt;/p&gt;

&lt;p&gt;Abundant feedback and suggestions for MoonShine development are welcome!&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;I really hope that after reading this article you'll try MoonShine in action. And that after this you won't want to use other admin panels. 😊 That's the minimum program. 😊 And perhaps you'll be so inspired that you'll donate, work with the code, or help promote MoonShine, which is especially important. Thanks for your attention! I'm waiting for you in the MoonShine chat.&lt;/p&gt;

&lt;h2&gt;
  
  
  MoonShine 4 Promo Video
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=oj6bzm1fKtw" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6rvc1l7vp02btqetev2u.jpg" alt="MoonShine 4 Promo" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;🌐 Website: &lt;a href="https://getmoonshine.app" rel="noopener noreferrer"&gt;https://getmoonshine.app&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📖 Documentation: &lt;a href="https://getmoonshine.app/docs/4.x/index" rel="noopener noreferrer"&gt;https://getmoonshine.app/docs/4.x/index&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;🎨 Palette Generator: &lt;a href="https://getmoonshine.app/palette-generator" rel="noopener noreferrer"&gt;https://getmoonshine.app/palette-generator&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;💻 GitHub: &lt;a href="https://github.com/moonshine-software/moonshine" rel="noopener noreferrer"&gt;https://github.com/moonshine-software/moonshine&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Community:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;💬 Telegram: &lt;a href="https://t.me/MoonShine_Laravel" rel="noopener noreferrer"&gt;https://t.me/MoonShine_Laravel&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;💬 Discord: &lt;a href="https://discord.gg/jH6RFXGcy8" rel="noopener noreferrer"&gt;https://discord.gg/jH6RFXGcy8&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>laravel</category>
      <category>webdev</category>
      <category>ai</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Poor Time Management — The Official Sponsor of Your Burnout</title>
      <dc:creator>Danil Shutsky</dc:creator>
      <pubDate>Fri, 13 Jun 2025 11:16:34 +0000</pubDate>
      <link>https://dev.to/cutcode/poor-time-management-the-official-sponsor-of-your-burnout-4575</link>
      <guid>https://dev.to/cutcode/poor-time-management-the-official-sponsor-of-your-burnout-4575</guid>
      <description>&lt;p&gt;&lt;strong&gt;Friends, hello everyone!&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;In this article, I want to share my experience and observations on time management—how to get everything done without burning out in the vast jungle of endless tasks, projects, and communication.  &lt;/p&gt;

&lt;p&gt;I should probably start by saying that when I was employed, I didn’t have any issues with time management. My work was organized by project managers and team leads. My job was simply to show up and complete tasks from the task manager. Ah, those were the days!  &lt;/p&gt;

&lt;p&gt;But I wanted more and started forging my own path. I transitioned from employment to working for myself, and now I have multiple projects and responsibilities:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://getmoonshine.app/" rel="noopener noreferrer"&gt;MoonShine&lt;/a&gt;&lt;/strong&gt;, an open-source project where, in addition to being involved in development, I also mentor core developers, set up organizational processes, and engage with the community.
&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;&lt;a href="https://www.youtube.com/@MoonShine-video-guides" rel="noopener noreferrer"&gt;YouTube channel&lt;/a&gt;&lt;/strong&gt; that needs to be developed and maintained.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consulting and temporary outsourced projects&lt;/strong&gt;—what keeps me financially afloat.
&lt;/li&gt;
&lt;li&gt;And, of course, articles where I share my experience with you (writing articles, as it turns out, is a very labor-intensive process).
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Juggling all these things is incredibly challenging, and it took me a long time to adapt, studying different techniques and applying them in practice. I believe everyone has their own unique work organization system that suits only them. In this article, I’ll share the core principles of my current time management system.  &lt;/p&gt;

&lt;p&gt;I’ve divided the article into small sections, each highlighting a key rule. To make reading (and later applying these techniques) more engaging, I’ll narrate from the perspective of Mowgli (a modern, fearless developer) hunting (successfully completing tasks) in the jungle (work projects).  &lt;/p&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffbgxhfc8bmwnvj4t012l.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffbgxhfc8bmwnvj4t012l.jpg" alt="Image description" width="740" height="807"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1. Don’t Try to Hunt in Different Parts of the Jungle at Once—Otherwise, You’ll Waste Time Moving Between Them&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Most of these rules are simple truths that don’t always click right away. The first rule, in my opinion, is the most important—and the hardest habit to break.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Don’t multitask!&lt;/strong&gt; When my responsibilities across different projects started piling up, I’d switch between tasks throughout the day. I’d be recording a YouTube video, then spot a GitHub issue for MoonShine and immediately jump to that, then hop on a call, then dive into a chat discussion. In the end, these constant switches come at a high cost. By the end of the day, I’d be completely drained, lying in bed thinking, &lt;em&gt;"I worked so much, but barely finished anything."&lt;/em&gt; It felt like I was running in place! I’d mastered the marathon of task-switching, but nothing actually got done.  &lt;/p&gt;

&lt;p&gt;The problem was clear. My solution? &lt;strong&gt;Divide the week into dedicated focus areas.&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Monday&lt;/strong&gt;: Ease into the week with lighter (but important) tasks—organizing tasks for other developers, communicating in chats, preparing YouTube content. Basically, administrative work that actually starts brewing on Saturday (more on that later).
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tuesday&lt;/strong&gt;: Dedicated to recording YouTube content. If I finish early and have energy left, I’ll tackle a task from another day. If something urgent comes up, I’ll check messages—but only if I have the bandwidth.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Wednesday&lt;/strong&gt;: Open-source day, all things MoonShine. Since MoonShine is a priority, I place it mid-week when I’m fully warmed up and ready for complex tasks. It’s a tough day but the most satisfying.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Thursday&lt;/strong&gt;: Wrap up unfinished tasks from earlier in the week. Mornings are for family—we have a relaxed breakfast together. Thursday is a chance to catch my breath and tie up loose ends.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Friday&lt;/strong&gt;: Creativity day—writing articles, planning next steps, and handling outsourced work.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Weekends&lt;/strong&gt;: You’d think I’d just binge shows or stare at the ceiling, but no. I review the week, spend an hour organizing and planning (tying back to Monday), and then fully relax with family.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This structure is a game-changer. Of course, unplanned sprints, urgent projects, or looming releases sometimes force adjustments (more work, less rest). But knowing what each day holds helps me adapt—I know when to push hard and when to ease up. It’s like a workout split: leg day, back day, chest day.  &lt;/p&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fih32ktmu7rrbv8cv9s5b.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fih32ktmu7rrbv8cv9s5b.jpg" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;2. Chew Your Prey Slowly—Better for Digestion&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;One of my early mistakes was rushing through tasks (probably to "earn" more rest time). I’d hurry to finish something just to move to the next problem—after all, the queue was always full!  &lt;/p&gt;

&lt;p&gt;But this often backfired: quick solutions usually meant cutting corners, leading to revisiting "finished" tasks later. If you’re lucky, someone else handles the fallout. But if it boomerangs back to you? Hello, &lt;em&gt;Problem #1&lt;/em&gt;—more context-switching, re-adapting, and wasted energy.  &lt;/p&gt;

&lt;p&gt;So remember: &lt;em&gt;Measure twice, cut once.&lt;/em&gt; Check everything, take your time, and only then move to the next target in the time-management jungle. Spending a little extra time upfront to nail a task means never circling back to it.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hasten slowly!&lt;/strong&gt;  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;3. The Jungle Is Hot—Don’t Forget to Rest in the Shade&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;This might be Rule #3, but it’s the toughest. You must learn to listen to yourself and recognize when you’re depleted—whether you need a few days off or even a full week.  &lt;/p&gt;

&lt;p&gt;The tricky part? Your brain often lies. It whispers in the morning: &lt;em&gt;"Stay in bed an extra hour. Push it to tomorrow—you’re exhausted!"&lt;/em&gt; This is an ancient survival trick: &lt;em&gt;"Conserve energy—what if predators attack tomorrow?"&lt;/em&gt;  &lt;/p&gt;

&lt;p&gt;But once you realize your brain can deceive you, it’s like &lt;em&gt;The Boy Who Cried Wolf&lt;/em&gt;. We &lt;em&gt;are&lt;/em&gt; tired, yet we keep working. Eventually, the brain resorts to extreme measures—your immune system crashes, and you’re bedridden with the flu. Now you’re forced into downtime, which leads back to Rules #1 and #2: scrambling through the jungle, half-chewed prey everywhere!  &lt;/p&gt;

&lt;p&gt;The solution? &lt;strong&gt;Experience.&lt;/strong&gt; Learn to distinguish laziness from genuine fatigue. Switch to sports, friends, or family time. It’s vital for health and productivity.  &lt;/p&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb7nxcn8cxttqhlty3vfh.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb7nxcn8cxttqhlty3vfh.jpg" alt="Image description" width="800" height="526"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;4. A Good Hunter Needs Good Sleep&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;I won’t preach bedtimes here. Instead, let’s talk about the &lt;em&gt;"brain at night"&lt;/em&gt; problem—when you’re solving tasks in your head until dawn, and whether you’re actually sleeping is debatable. Often, you’re just trying to &lt;em&gt;remember&lt;/em&gt; solutions.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The fix?&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Wind down 3 hours before bed.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Keep a notebook or app (like Obsidian or Notion) nearby. Dump ideas there—don’t mentally chew on them. The goal is a clear mind by bedtime.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The proverb &lt;em&gt;"Morning is wiser than evening"&lt;/em&gt; is real. Sleep brings clarity—what seemed unsolvable yesterday often clicks effortlessly in the morning.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;5. Mowgli Rules the Jungle (Because He Uses Tools)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Humans dominate the jungle not by brute strength but by using tools. Let’s talk time-management tools:  &lt;/p&gt;

&lt;p&gt;Notebooks, Google/iPhone Notes, Outlook, Trello, Evernote, Asana, Obsidian, Notion… You’ve probably tried some. I used &lt;em&gt;many&lt;/em&gt; at once:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Quick notes in iPhone Notes (later migrated to Obsidian).
&lt;/li&gt;
&lt;li&gt;Personal tasks in Trello/TickTick.
&lt;/li&gt;
&lt;li&gt;Work tasks in JetBrains Space.
&lt;/li&gt;
&lt;li&gt;Blog drafts in Obsidian.
&lt;/li&gt;
&lt;li&gt;Calendar reminders.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each tool has perks, but over time, this clutter became stressful—I’d waste time just &lt;em&gt;finding&lt;/em&gt; where I noted something. Now, I’m streamlining my system around &lt;strong&gt;Notion and Obsidian&lt;/strong&gt;.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key takeaway&lt;/strong&gt;: We’re bombarded with information. Relying on memory is futile. Use digital tools to:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Capture thoughts and notes from books/courses (&lt;em&gt;A dull pencil beats a sharp memory&lt;/em&gt;).
&lt;/li&gt;
&lt;li&gt;Store ideas, links, and tasks—then process and organize them. No more lost ideas!
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fph4t7phd0k6ox1awjson.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fph4t7phd0k6ox1awjson.jpg" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;6. Deal with the Monkeys—They’ll Scare Off Your Prey&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Distractions are everywhere. My arch-nemesis? &lt;strong&gt;Telegram.&lt;/strong&gt; With endless chats and constant notifications, focus is impossible:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Notification pops up.
&lt;/li&gt;
&lt;li&gt;Read, ponder a reply, respond.
&lt;/li&gt;
&lt;li&gt;Lose seconds/minutes.
&lt;/li&gt;
&lt;li&gt;Reorient to the original task.
&lt;/li&gt;
&lt;li&gt;Repeat.
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;The fix?&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Mute notifications temporarily.&lt;/strong&gt; My phone has a 30-minute "focus mode" (only critical calls allowed).
&lt;/li&gt;
&lt;li&gt;Disable notifications on my laptop.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This creates a distraction-proof barrier—a tweaked version of the Pomodoro technique.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Time to Hunt&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Time management is crucial in today’s multitasking world. As my experience shows, it demands discipline and adaptability. Simple rules can boost efficiency and prevent burnout. I hope these tips help you manage tasks better and balance work with life. Remember: &lt;strong&gt;Your time is your most valuable resource—only you decide how to spend it.&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;Do you have your own techniques? Share them in the comments!  &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>timemanagement</category>
    </item>
    <item>
      <title>MoonShine v3: Key Changes and New Features in the Open-Source Admin Panel for Laravel</title>
      <dc:creator>Danil Shutsky</dc:creator>
      <pubDate>Sun, 09 Mar 2025 16:22:02 +0000</pubDate>
      <link>https://dev.to/cutcode/moonshine-v3-key-changes-and-new-features-in-the-open-source-admin-panel-for-laravel-11dg</link>
      <guid>https://dev.to/cutcode/moonshine-v3-key-changes-and-new-features-in-the-open-source-admin-panel-for-laravel-11dg</guid>
      <description>&lt;p&gt;&lt;a href="https://getmoonshine.app" rel="noopener noreferrer"&gt;MoonShine&lt;/a&gt; is an open-source admin panel for Laravel, and on December 10, 2024, the release of MoonShine v3 took place. I have already published an article about the history of the project and discussed the new features.&lt;br&gt;
In this material, I will explain what exactly has changed in MoonShine itself. We will explore improvements in installation and configuration, support for different configuration approaches, enhancements in field management, new integration opportunities with APIs, and better work with components and menus. We will also focus on new front-end capabilities through Alpine.js and the introduction of new systems such as JSON responses and OpenAPI specifications.&lt;br&gt;
Let's take a closer look!&lt;/p&gt;
&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/installation#install" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's start with the installation. What has changed? Firstly, during the installation, there will be a lot more questions, allowing you to configure the admin panel according to your needs right away. Now, during the installation, you specify whether migrations and notifications are needed and which driver they will work on:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj7qt9h5bpnbmiwr9vhzz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj7qt9h5bpnbmiwr9vhzz.png" alt="Image description" width="640" height="129"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmjujofac3nsmebeemf3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmjujofac3nsmebeemf3.png" alt="Image description" width="624" height="118"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2r9v150875dh7lc3j8xj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2r9v150875dh7lc3j8xj.png" alt="Image description" width="622" height="112"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg1b68l1c79vpiudc4s9t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg1b68l1c79vpiudc4s9t.png" alt="Image description" width="631" height="109"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft83drmt58nzt24ksrggv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft83drmt58nzt24ksrggv.png" alt="Image description" width="627" height="111"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw0i2pbrjplw86o4w9fed.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw0i2pbrjplw86o4w9fed.png" alt="Image description" width="630" height="112"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have installed MoonShine before and need the default configuration, you can run the installation command with the &lt;code&gt;-Q&lt;/code&gt; option to skip the questions during installation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;php artisan moonshine:install -Q
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Notifications
&lt;/h2&gt;

&lt;p&gt;Previously, MoonShine used a hardcoded database driver for notifications, but now there is the ability to switch it to any other driver.&lt;/p&gt;

&lt;p&gt;If you don't want to use database notifications and prefer, for example, broadcast or another driver, you can replace the default implementation with your own (details are in the &lt;a href="https://moonshine-laravel.com/ru/docs/3.x/advanced/notifications#custom" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;).&lt;/p&gt;

&lt;p&gt;Let's take the &lt;a href="https://moonshine-laravel.com/plugins/rush" rel="noopener noreferrer"&gt;Rush package&lt;/a&gt; as an example. In Rush, notification handling is based on WebSockets, and Rush is not tied to MoonShine. It is simply a service container that injects its notification implementation, using the broadcast driver in this case.&lt;/p&gt;

&lt;h2&gt;
  
  
  Configuration: Array/Object
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/configuration" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In MoonShine v3, two configuration approaches have been introduced to provide flexibility for different preferences: using an array and using an object.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Array-based Configuration
This is the familiar Laravel-style approach, where settings are stored in the &lt;code&gt;moonshine.php file&lt;/code&gt;.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;return [
    'title' =&amp;gt; env('MOONSHINE_TITLE', 'MoonShine'),
    'logo' =&amp;gt; '/assets/logo.png',
    'domain' =&amp;gt; env('MOONSHINE_DOMAIN'),
    'prefix' =&amp;gt; 'admin',
    'auth' =&amp;gt; [
        'enabled' =&amp;gt; true,
        'guard' =&amp;gt; 'moonshine',
    ],
    // …
];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Object-based Configuration
This approach is implemented via the &lt;code&gt;MoonShineServiceProvider&lt;/code&gt;.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$config
    -&amp;gt;title('My Application')
    -&amp;gt;logo('/assets/logo.png')
    -&amp;gt;guard('moonshine')
    -&amp;gt;authEnable();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The object-based approach was introduced because array-based configuration has certain drawbacks. For example, if there's a typo in the configuration (e.g., writing &lt;code&gt;enable&lt;/code&gt; instead of &lt;code&gt;enabled&lt;/code&gt; in the auth section), and the project has insufficient test coverage, such an error could make it to production, leaving the project running without authentication.&lt;/p&gt;

&lt;p&gt;With the object-based approach, such errors are significantly reduced, as the code can leverage IDE autocompletion, making configuration management more convenient. For instance, you can use the &lt;code&gt;authDisable&lt;/code&gt; method to disable authentication, making it easier to control.&lt;/p&gt;

&lt;p&gt;Note: Object-based configuration takes higher precedence over settings in the configuration file.&lt;/p&gt;

&lt;p&gt;In MoonShine v3, a new parameter called &lt;code&gt;resource_prefix&lt;/code&gt; has been introduced, which affects the URL structure. By default, the URL will look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/admin/resource/{resourceUri}/{pageUri}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If &lt;code&gt;resource_prefix&lt;/code&gt; is set to an empty value, the URL will look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/admin/{resourceUri}/{pageUri}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Documentation Updates
&lt;/h2&gt;

&lt;p&gt;The documentation for MoonShine v3 has been completely rewritten and is now in Markdown format, hosted on its own platform. A new feature has been added to the documentation: tabs. When multiple approaches are available (e.g., for configuration), you can easily compare how to achieve the same task using the Config approach versus the Provider approach.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fov3gsvvomsab4pzetibc.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fov3gsvvomsab4pzetibc.gif" alt="Image description" width="846" height="298"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Documentation in MoonShine v3 Has Improved Significantly. Here’s What I’d Like to Highlight:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;More Examples&lt;br&gt;
Every section of the documentation now includes detailed code examples. Whether it's configuring the menu, working with tables, or adding assets, you can quickly implement these features by copying and adapting the provided examples.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Recipes for Common Tasks&lt;br&gt;
The documentation now features recipes — ready-made solutions for common tasks. This saves time and helps users better understand the system.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://moonshine-laravel.com/ru/docs/3.x/recipes/async-remove-on-click" rel="noopener noreferrer"&gt;How to implement asynchronous deletion of an item on button click&lt;/a&gt; in the background.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://getmoonshine.app/ru/docs/3.x/recipes/dashboard-settings" rel="noopener noreferrer"&gt;Saving site settings via the Dashboard&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  English Out of the Box
&lt;/h2&gt;

&lt;p&gt;If you need another localization, you can install the required package from the &lt;a href="https://getmoonshine.app/plugins" rel="noopener noreferrer"&gt;marketplace&lt;/a&gt;. Currently, Russian, Ukrainian, German, and recently added Chinese localizations are available. There are also other localization packages, but some of them have not yet been updated for version 3.&lt;/p&gt;

&lt;h2&gt;
  
  
  Layout
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/appearance/layout" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;br&gt;
In MoonShine v3, the layout system has been completely revamped. It has become more flexible and developer-friendly, allowing for easy customization of the appearance and behavior of the admin panel. Let's break down the key changes and benefits.&lt;/p&gt;

&lt;p&gt;The layout system from MoonShine v2 has been entirely removed. Instead, a new, more flexible and modular system has been introduced, which allows you to easily override the layout on any page.&lt;/p&gt;
&lt;h3&gt;
  
  
  Default Layout
&lt;/h3&gt;

&lt;p&gt;By default, the layout is set in the MoonShine configuration. However, you can now override it for any page, making the system more flexible:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\MoonShine\Layouts;

use App\MoonShine\Resources\PackageCategoryResource;
use App\MoonShine\Resources\PackageResource;
use App\MoonShine\Resources\UserResource;
use MoonShine\ColorManager\ColorManager;
use MoonShine\Contracts\ColorManager\ColorManagerContract;
use MoonShine\Laravel\Components\Layout\{Locales, Notifications, Profile, Search};
use MoonShine\Laravel\Layouts\CompactLayout;
use MoonShine\MenuManager\MenuGroup;
use MoonShine\MenuManager\MenuItem;
use MoonShine\UI\Components\{Breadcrumbs,
    Components,
    Layout\Assets,
    Layout\Div,
    Layout\Body,
    Layout\Burger,
    Layout\Content,
    Layout\Favicon,
    Layout\Flash,
    Layout\Footer,
    Layout\Head,
    Layout\Header,
    Layout\Html,
    Layout\Layout,
    Layout\Logo,
    Layout\Menu,
    Layout\Meta,
    Layout\Sidebar,
    Layout\ThemeSwitcher,
    Layout\Wrapper,
    When}; 

final class MoonShineLayout extends CompactLayout
{
    public function build(): Layout
    {
        return Layout::make([
            Html::make([
                Head::make([
                    Meta::make()-&amp;gt;customAttributes([
                        'name' =&amp;gt; 'csrf-token',
                        'content' =&amp;gt; csrf_token(),
                    ]),
                    Favicon::make()-&amp;gt;bodyColor($this-&amp;gt;getColorManager()-&amp;gt;get('body')),
                    Assets::make(),
                ])
                    -&amp;gt;bodyColor($this-&amp;gt;getColorManager()-&amp;gt;get('body'))
                    -&amp;gt;title($this-&amp;gt;getPage()-&amp;gt;getTitle()),
                Body::make([
                    Wrapper::make([
                        Sidebar::make([
                            Div::make([
                                Div::make([
                                    Logo::make(
                                        $this-&amp;gt;getHomeUrl(),
                                        $this-&amp;gt;getLogo(),
                                        $this-&amp;gt;getLogo(small: true),
                                    )-&amp;gt;minimized(),
                                ])-&amp;gt;class('menu-heading-logo'),

                                Div::make([
                                    Div::make([
                                        ThemeSwitcher::make(),
                                    ])-&amp;gt;class('menu-heading-mode'),

                                    Div::make([
                                        Burger::make(),
                                    ])-&amp;gt;class('menu-heading-burger'),
                                ])-&amp;gt;class('menu-heading-actions'),
                            ])-&amp;gt;class('menu-heading'),

                            Div::make([
                                Menu::make(),
                                When::make(
                                    fn(): bool =&amp;gt; $this-&amp;gt;isAuthEnabled(),
                                    static fn(): array =&amp;gt; [Profile::make(withBorder: true)],
                                ),
                            ])-&amp;gt;customAttributes([
                                'class' =&amp;gt; 'menu',
                                ':class' =&amp;gt; "asideMenuOpen &amp;amp;&amp;amp; '_is-opened'",
                            ]),
                        ])-&amp;gt;collapsed(),

                        Div::make([
                            Flash::make(),
                            Header::make([
                                Breadcrumbs::make($this-&amp;gt;getPage()-&amp;gt;getBreadcrumbs())-&amp;gt;prepend(
                                    $this-&amp;gt;getHomeUrl(),
                                    icon: 'home',
                                ),
                                Search::make(),
                                When::make(
                                    fn(): bool =&amp;gt; $this-&amp;gt;isUseNotifications(),
                                    static fn(): array =&amp;gt; [Notifications::make()],
                                ),
                                Locales::make(),
                            ]),

                            Content::make([
                                Components::make(
                                    $this-&amp;gt;getPage()-&amp;gt;getComponents(),
                                ),
                            ]),

                            Footer::make()
                                -&amp;gt;copyright(static fn(): string
                                    =&amp;gt; sprintf(
                                    &amp;lt;&amp;lt;&amp;lt;'HTML'
                                        © 2021-%d Made with ❤️ by                                      
                                            CutCode                                        
                                        HTML,
                                    now()-&amp;gt;year,
                                ))
                                -&amp;gt;menu([
                                    'https:                                ]),
                        ])-&amp;gt;class('layout-page'),
                    ]),
                ])-&amp;gt;class('theme-minimalistic'),
            ])
                -&amp;gt;customAttributes([
                    'lang' =&amp;gt; $this-&amp;gt;getHeadLang(),
                ])
                -&amp;gt;withAlpineJs()
                -&amp;gt;withThemes(),
        ]);
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;MoonShine v3 is a full-fledged UI kit&lt;/strong&gt;, and you can use its components anywhere. Here’s an &lt;a href="https://moonshine-laravel.com/ru/docs/3.x/appearance/layout#blade" rel="noopener noreferrer"&gt;example&lt;/a&gt; of a Blade template:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;x-moonshine::layout&amp;gt;
   &amp;lt;x-moonshine::layout.html :with-alpine-js="true" :with-themes="true"&amp;gt;
       &amp;lt;x-moonshine::layout.head&amp;gt;
           &amp;lt;x-moonshine::layout.meta name="csrf-token" :content="csrf_token()"/&amp;gt;
           &amp;lt;x-moonshine::layout.favicon /&amp;gt;
           &amp;lt;x-moonshine::layout.assets&amp;gt;
               @vite([
                   'resources/css/main.css',
                   'resources/js/app.js',
               ], 'vendor/moonshine')
           &amp;lt;/x-moonshine::layout.assets&amp;gt;
       &amp;lt;/x-moonshine::layout.head&amp;gt;

       &amp;lt;x-moonshine::layout.body&amp;gt;
           &amp;lt;x-moonshine::layout.wrapper&amp;gt;
               &amp;lt;x-moonshine::layout.sidebar :collapsed="true"&amp;gt;
                   &amp;lt;x-moonshine::layout.div class="menu-heading"&amp;gt;
                       &amp;lt;x-moonshine::layout.div class="menu-heading-logo"&amp;gt;
                           &amp;lt;x-moonshine::layout.logo href="/" logo="/logo.png" :minimized="true"/&amp;gt;
                       &amp;lt;/x-moonshine::layout.div&amp;gt;

                       &amp;lt;x-moonshine::layout.div class="menu-heading-actions"&amp;gt;
                           &amp;lt;x-moonshine::layout.div class="menu-heading-mode"&amp;gt;
                               &amp;lt;x-moonshine::layout.theme-switcher/&amp;gt;
                           &amp;lt;/x-moonshine::layout.div&amp;gt;
                           &amp;lt;x-moonshine::layout.div class="menu-heading-burger"&amp;gt;
                               &amp;lt;x-moonshine::layout.burger/&amp;gt;
                           &amp;lt;/x-moonshine::layout.div&amp;gt;
                       &amp;lt;/x-moonshine::layout.div&amp;gt;

                   &amp;lt;/x-moonshine::layout.div&amp;gt;

                   &amp;lt;x-moonshine::layout.div class="menu" ::class="asideMenuOpen &amp;amp;&amp;amp; '_is-opened'"&amp;gt;
                       &amp;lt;x-moonshine::layout.menu :elements="[['label' =&amp;gt; 'Dashboard', 'url' =&amp;gt; '/'], ['label' =&amp;gt; 'Section', 'url' =&amp;gt; '/section']]"/&amp;gt;
                   &amp;lt;/x-moonshine::layout.div&amp;gt;

               &amp;lt;/x-moonshine::layout.sidebar&amp;gt;

               &amp;lt;x-moonshine::layout.div class="layout-page"&amp;gt;

                   &amp;lt;x-moonshine::layout.header&amp;gt;
                       &amp;lt;x-moonshine::breadcrumbs :items="['#' =&amp;gt; 'Home']"/&amp;gt;
                       &amp;lt;x-moonshine::layout.search placeholder="Search" /&amp;gt;
                       &amp;lt;x-moonshine::layout.locales :locales="collect()"/&amp;gt;
                   &amp;lt;/x-moonshine::layout.header&amp;gt;

                   &amp;lt;x-moonshine::layout.content&amp;gt;
                       &amp;lt;article class="article"&amp;gt;
                           Ваш контент
                       &amp;lt;/article&amp;gt;
                   &amp;lt;/x-moonshine::layout.content&amp;gt;

               &amp;lt;/x-moonshine::layout.div&amp;gt;
           &amp;lt;/x-moonshine::layout.wrapper&amp;gt;
       &amp;lt;/x-moonshine::layout.body&amp;gt;
   &amp;lt;/x-moonshine::layout.html&amp;gt;
&amp;lt;/x-moonshine::layout&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Themes
&lt;/h2&gt;

&lt;p&gt;Instead of manually specifying colors and classes for theme switching (as was the case in version 2), now it’s enough to specify which Layout to use. For example, you can choose CompactLayout or AppLayout. In the future, adding new themes (e.g., BatmanLayout) will be just as simple — you only need to specify its name.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;final class MyLayout extends AppLayout
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;or&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;final class MyLayout extends CompactLayout
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Integration of Menu, Assets, and Colors
&lt;/h2&gt;

&lt;p&gt;With the new Layout system, not only visual elements are tied to it, but also the menu, assets, colors, and a set of components. This allows for centralized management of all aspects of the admin panel.&lt;/p&gt;

&lt;p&gt;Unlike version 2, where menus and other elements had to be overridden via callback functions inside the Service Provider, now everything is in one place. This simplifies development and makes the code more readable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Provider as Configuration
&lt;/h2&gt;

&lt;p&gt;In the new system, the Provider is used solely for configuration. You declare the settings, and that’s it — no extra callback functions or complex overrides.&lt;/p&gt;

&lt;p&gt;This is especially convenient when you need to create a unique Layout for a specific page or section of the admin panel.&lt;/p&gt;

&lt;p&gt;Imagine This: every page of your admin panel can, if desired, have its own template, complete with its own menu, set of assets, and a custom order and list of components. This level of flexibility allows for highly tailored and dynamic admin interfaces.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class CustomPage extends Page
{
   protected ?string $layout = AppLayout::class;

   // ...
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Components
&lt;/h2&gt;

&lt;p&gt;With the release of MoonShine v3, the number of components has significantly increased, thanks to the new Layout system. Now, each Layout is not just a configuration of the sidebar or topbar, but a full-fledged page customization. You can change any element, starting from the  tag, to setting a Favicon or connecting assets for each page individually. All of this is done through classes, without the need to move files into Blade, which simplifies the process and makes it more flexible.&lt;/p&gt;

&lt;p&gt;While this approach might seem a bit unusual at first, it opens up endless possibilities for interface customization. Each Layout can have its own design, eliminating the need to use Blade templates for customizations and making the process convenient and intuitive.&lt;/p&gt;

&lt;p&gt;Creating a new Layout is simple: you create a template, and during the setup, you’ll be prompted to make it the default. If you agree, this template will automatically be set as the main one in the configuration. Each Layout can have its own assets, and the sidebar and topbar panels can be quickly configured: they can be enabled or disabled as needed, or both can be used simultaneously.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function build(): Layout
{
   return Layout::make([
       Html::make([
           $this-&amp;gt;getHeadComponent(),
           Body::make([
               Wrapper::make([
                   // $this-&amp;gt;getTopBarComponent(),
                   $this-&amp;gt;getSidebarComponent(),
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Menu
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/appearance/menu" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First, all elements that were previously "hardcoded" are now flexible. For example, the &lt;code&gt;ActionButton&lt;/code&gt; is now a separate entity that you can customize. You can change its attributes, such as the &lt;code&gt;background&lt;/code&gt;, or completely replace it with another button.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Innovations
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Unlimited Menu Nesting&lt;br&gt;
The menu now supports unlimited nesting levels. No matter how many levels you create, the system will handle and display them correctly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Full Customization of Menu Elements&lt;br&gt;
If you need to replace standard elements, such as the &lt;code&gt;ActionButton&lt;/code&gt;, with something completely different, it’s now possible. You can create your own custom view and use it instead of the default elements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Integration with Packages and Service Providers&lt;br&gt;
If you develop Laravel packages, you can use service providers and the &lt;code&gt;boot&lt;/code&gt; method, which supports Dependency Injection (DI). This allows you to inject core components from MoonShine, such as &lt;code&gt;AssetManager&lt;/code&gt; or &lt;code&gt;MenuManager&lt;/code&gt;, and configure them globally. For example, you can add menu items for all users directly from your package.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Unique Menu for Each Page&lt;br&gt;
Each page can now have its own Layout, and therefore, a unique menu. This allows you to create specialized navigation for different sections, making the interface more intuitive and adaptive.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Icons
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/appearance/icons" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Basic Icon Setup&lt;/strong&gt;
Icons can now be specified in a simplified format. For example, to add an icon to a button, you only need to specify its name, such as &lt;code&gt;"users"&lt;/code&gt;. This works the same as before, but now without the need to use the &lt;code&gt;heroicons&lt;/code&gt; prefix:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'cog'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;However, the real breakthrough in working with icons in MoonShine comes with the &lt;a href="https://github.com/xepozz/meta-storm-idea-plugin" rel="noopener noreferrer"&gt;&lt;strong&gt;MetaStorm&lt;/strong&gt; plugin for PHPStorm&lt;/a&gt;, which provides autocomplete for all system icons:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flbb5iy5f0tlpoao4o1uq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flbb5iy5f0tlpoao4o1uq.png" alt="MetaStorm Plugin" width="800" height="217"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This allows you to quickly find and insert the desired icons, saving time and simplifying the development process. Special thanks to Dmitry Derepko, the author of this amazing plugin, which has already been highly appreciated by all MoonShine users. Working with icons is just the tip of the iceberg.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Custom Icon Mode&lt;/strong&gt;
You can now use custom icons, including SVGs, via the &lt;code&gt;custom&lt;/code&gt; mode. This is especially useful if you want to use icons from third-party packages, such as Blade Icons, or load your own. You can specify the path to the directory with icons so that they are loaded from your project, not from the MoonShine vendor.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nf"&gt;svg&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'path-to-icon-pack'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;toHtml&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
    &lt;span class="n"&gt;custom&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Using Icon Packages&lt;/strong&gt;
You can use packages like Blade Icons, which provide convenient helpers for working with SVGs. This makes it easy to connect icons from such packages and display them in the interface. There is also a package by JeRabix for integrating the &lt;a href="https://github.com/JeRabix/moonshine-iconify" rel="noopener noreferrer"&gt;&lt;strong&gt;Iconify&lt;/strong&gt; service&lt;/a&gt; (200,000 Open Source icons). &lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Asset Manager
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/appearance/assets" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Asset Manager has been significantly redesigned, becoming a more flexible and powerful tool for managing assets (CSS, JS, and other resources).&lt;/p&gt;

&lt;p&gt;Now, the Asset Manager allows you to easily connect and use CSS and JS files. The &lt;code&gt;link&lt;/code&gt; and &lt;code&gt;script&lt;/code&gt; tags support attributes like &lt;code&gt;defer&lt;/code&gt;, as well as "sugar" for simplifying their addition. This makes the process of connecting assets faster and more convenient, minimizing the amount of code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;MoonShine\AssetManager\Js&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nc"&gt;Js&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/js/app.js'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nc"&gt;Js&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/js/app.js'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;defer&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nc"&gt;Js&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/js/app.js'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;customAttributes&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
    &lt;span class="s1"&gt;'data-module'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'main'&lt;/span&gt;
&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Added the ability to embed JS and CSS directly into the code (inline), which is useful for small code snippets that do not require a separate file. You can also now add arbitrary HTML code, such as meta tags or custom links, expanding customization possibilities.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nc"&gt;InlineJs&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;&amp;lt;&amp;lt;&amp;lt;'JS'
   document.addEventListener("DOMContentLoaded", function() {
       console.log("Loaded");
   });
JS&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;MoonShine\AssetManager\Raw&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nc"&gt;Raw&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'&amp;lt;link rel="preconnect" href="https://fonts.googleapis.com"&amp;gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The Asset Manager has become more flexible: assets can be added, modified, and their priorities managed through the add, prepend, and the new &lt;code&gt;modifyAssets&lt;/code&gt; methods. The latter allows, for example, adding or removing GET parameters, which is useful for fine-tuning in complex projects.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$assetManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;modifyAssets&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$assets&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;array_filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$assets&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$asset&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nf"&gt;str_contains&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$asset&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;getLink&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="s1"&gt;'remove-this'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Integration with DI (Dependency Injection) allows the Asset Manager to be used anywhere in the application, including service providers and packages. This makes it universal and convenient for modular development.&lt;/p&gt;

&lt;p&gt;For local asset management, the &lt;code&gt;assets&lt;/code&gt; method and the &lt;code&gt;onLoad&lt;/code&gt; hook have been added, which load assets only for the active resource or page. This optimizes performance, as resources are loaded only where they are actually needed. You can also set conditions for loading, for example, only for form or edit pages, making the Asset Manager more adaptive.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;MoonShine\AssetManager\Css&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;MoonShine\AssetManager\Js&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;onLoad&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kt"&gt;void&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;parent&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;onLoad&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;getAssetManager&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
        &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;Css&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/css/app.css'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
        &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;Js&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/js/app.js'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Added &lt;a href="https://getmoonshine.app/ru/docs/3.x/appearance/assets#versioning" rel="noopener noreferrer"&gt;support for asset versioning&lt;/a&gt;, which simplifies cache management and updates. This is especially important for projects where resources change frequently, as it helps avoid issues with outdated file versions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Color Manager
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/appearance/colors" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Color Manager allows you to easily manage the color scheme of your application. It can customize the interface to suit your needs.&lt;/p&gt;

&lt;p&gt;The Color Manager is integrated into the system in such a way that it can be used both through DI and directly in the Layout. This makes it a universal tool that can be applied anywhere in your application. For example, if you need to change the color of a button or another interface element, you can easily do so through the Color Manager.&lt;/p&gt;

&lt;p&gt;You can set custom colors for various elements, such as buttons, text, or backgrounds, and they will be applied globally. For example, if you want to change the primary color, just set a new value, and all elements using this color will automatically update. This is especially convenient if you want to quickly adapt the interface to a new design or brand.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;primary&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'120, 67, 233'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;secondary&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'236, 65, 118'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;successBg&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'0, 170, 0'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;successText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'255, 255, 255'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;warningBg&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'255, 220, 42'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;warningText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'139, 116, 0'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;errorBg&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'224, 45, 45'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;errorText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'255, 255, 255'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;infoBg&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'0, 121, 255'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$colorManager&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;infoText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'255, 255, 255'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The Color Manager also supports default color settings. This means you can set a base color scheme that will be used throughout the application, but easily override it for individual elements if needed. For example, you can change the button color on just one page without affecting the rest of the application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Model Resource
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/model-resource/index" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Model Resource has become more flexible and user-friendly.&lt;/p&gt;

&lt;h4&gt;
  
  
  Simplified Base Structure
&lt;/h4&gt;

&lt;p&gt;The basics of working with resources remain the same: fields, tables, and basic methods. However, some features, such as import-export, have been moved to separate packages to avoid overloading the core system. This has made MoonShine more lightweight and modular.&lt;/p&gt;

&lt;h4&gt;
  
  
  TinyMCE and Markdown Fields
&lt;/h4&gt;

&lt;p&gt;Fields like &lt;code&gt;TinyMCE&lt;/code&gt; and Markdown have also been moved to separate packages. This allows developers to connect only the features they actually need in their project. The documentation provides detailed instructions on how to install and use these fields, making the process quick and convenient.&lt;/p&gt;

&lt;h4&gt;
  
  
  Changes in Button and Action Confirmation Handling
&lt;/h4&gt;

&lt;p&gt;In version 3, the mechanism for handling buttons requiring action confirmation has been redesigned. Previously, clicking a button would immediately send a request, and then a confirmation window would open. This was inconvenient and illogical. Now, the request is sent only after confirmation, making the process more predictable and user-friendly.&lt;/p&gt;

&lt;h4&gt;
  
  
  updateOnPreview Method
&lt;/h4&gt;

&lt;p&gt;Allows editing a specific field directly in the table (quick field editing). However, now if the connection to the server is lost, the system throws an error, preventing data loss. Also added is the ability to lock editing (using a "lock" icon) to prevent accidental changes.&lt;/p&gt;

&lt;h4&gt;
  
  
  updateInPopover Method
&lt;/h4&gt;

&lt;p&gt;Another option for editing a specific field directly in the table — in a modal window. This is especially useful if the data in the table takes up a lot of space or requires more complex editing. After changes, the data is automatically updated in the table. This is convenient.&lt;/p&gt;

&lt;h4&gt;
  
  
  Validation When Updating Data
&lt;/h4&gt;

&lt;p&gt;Previously, the &lt;code&gt;updateOnPreview&lt;/code&gt; and &lt;code&gt;updateInPopover&lt;/code&gt; methods did not take into account the validation rules set in the resource. Now, validation is performed automatically, preventing the saving of incorrect data.&lt;/p&gt;

&lt;h4&gt;
  
  
  Flexibility in Working with Tables
&lt;/h4&gt;

&lt;p&gt;In version 3, the ability to customize tables at the resource level has been added. Now you can easily add or modify elements in &lt;code&gt;thead&lt;/code&gt;, &lt;code&gt;tbody&lt;/code&gt;, and &lt;code&gt;tfoot&lt;/code&gt;. For example, you can add additional rows or cells.&lt;/p&gt;

&lt;h4&gt;
  
  
  Removal of the TD Component
&lt;/h4&gt;

&lt;p&gt;The TD component has been removed, as its functionality is now fully covered by the &lt;code&gt;customWrapperAttributes&lt;/code&gt; method, which can add attributes for a cell directly from the field.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nc"&gt;Text&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'Title'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
   &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;customWrapperAttributes&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'style'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'width: 200px;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  stackFields Field
&lt;/h4&gt;

&lt;p&gt;Allows grouping fields in one table cell, taking into account the data context. For example, depending on the data value, different fields or components can be displayed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nc"&gt;StackFields&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'Stack'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;fields&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;StackFields&lt;/span&gt; &lt;span class="nv"&gt;$ctx&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ctx&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;?-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;getOriginal&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="o"&gt;?&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'moonshine::ui.resource.created_at'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="s1"&gt;'created_at'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"d.m.Y"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;sortable&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'moonshine::ui.resource.created_at'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="s1"&gt;'created_at'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"d.m.Y"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;sortable&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
    &lt;span class="nc"&gt;LineBreak&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
    &lt;span class="nc"&gt;Email&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;make&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'moonshine::ui.resource.email'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="s1"&gt;'email'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;sortable&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Fields
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/fields/index" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;MoonShine 3 has significantly reworked the field system while retaining the core concepts. In particular, the dynamic display of fields using &lt;code&gt;showWhen&lt;/code&gt; has been completely rewritten.&lt;/p&gt;

&lt;p&gt;Previously, &lt;code&gt;showWhen&lt;/code&gt; simply hid fields, but the data continued to be sent in the request. Now, by default, hidden fields are not sent with the request, avoiding redundant data. If you need the old behavior and want to keep hidden fields in the request, you can specify this setting in the config.&lt;/p&gt;

&lt;p&gt;Additionally, a new field has been added — &lt;code&gt;RelationRepeater&lt;/code&gt;. Previously, the logic was built into JSON, making it cumbersome and cluttered. Now, the logic has been moved to a separate &lt;code&gt;RelationRepeater&lt;/code&gt; field, simplifying the structure and improving code readability. Now, if you need to display &lt;code&gt;HasMany&lt;/code&gt; relationships in the main form, you can use &lt;code&gt;RelationRepeater&lt;/code&gt;. This field simplifies working with relationships, allowing them to be displayed in tabs or other parts of the form.&lt;/p&gt;

&lt;p&gt;In MoonShine 3, you can now easily display relationships like &lt;code&gt;HasMany&lt;/code&gt; and &lt;code&gt;HasOne&lt;/code&gt; in various formats, including tabs. This is especially useful when you need to compactly and conveniently display related data. &lt;a href="https://moonshine-laravel.com/ru/docs/3.x/recipes/tabs" rel="noopener noreferrer"&gt;Here’s one of the recipes for demonstration&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;There is also the ability to display &lt;code&gt;HasMany&lt;/code&gt; or &lt;code&gt;HasOne&lt;/code&gt; in one tab and use &lt;code&gt;TableBuilder&lt;/code&gt; in another to beautifully present the data in a table. The interface has become more user-friendly — working with large volumes of related data has become easier.&lt;/p&gt;

&lt;h2&gt;
  
  
  CRUD Resource
&lt;/h2&gt;

&lt;p&gt;MoonShine 3 now supports CRUD resources, opening new possibilities for working with data via API. In particular, you can use an external API to fetch and display data and perform CRUD operations on them.&lt;/p&gt;

&lt;p&gt;When the page loads, data is fetched via API, and even if the API is slow, the page itself loads instantly thanks to the use of lazy load mode. This allows the page to be displayed immediately, with data being loaded as needed, significantly improving the user experience.&lt;/p&gt;

&lt;p&gt;You can configure this behavior using the &lt;code&gt;lazy&lt;/code&gt; property, which is enabled in the config. After that, pages will load quickly, and API requests will be executed in the background. This is perfect for working with large volumes of data and external services.&lt;/p&gt;

&lt;p&gt;As for configuration, MoonShine provides many default pages (e.g., dashboard, profile, error pages, and login). These pages can be easily overridden to suit your needs. The &lt;code&gt;moonshine:publish&lt;/code&gt; command allows you to quickly publish all necessary pages and forms. Everything is designed to simplify setup and reduce routine work: you don’t need to start from scratch, just adapt the ready-made components to your tasks.&lt;/p&gt;

&lt;p&gt;With this approach, working with CRUD resources becomes not only convenient but also fast, while giving you full control over the appearance and functionality of the pages.&lt;/p&gt;

&lt;h3&gt;
  
  
  JS
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://moonshine-laravel.com/ru/docs/3.x/frontend/js" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In MoonShine 3, the documentation section for working with JavaScript has become much more convenient and functional. Now, if you work with the frontend, you don’t need to figure out how to write class components from scratch — all the details are explained directly in the documentation.&lt;/p&gt;

&lt;p&gt;In particular, you can use &lt;strong&gt;Alpine.js&lt;/strong&gt; to create components, simplifying frontend integration. Components are initialized via the &lt;code&gt;x-data&lt;/code&gt; directive, and you only need to specify the component name. This allows you to easily manage the state and behavior of components, with all assets being connected through the Asset Manager.&lt;/p&gt;

&lt;p&gt;The documentation provides a complete description of all events that can be interacted with via JavaScript, so even a developer with little JS experience can correctly call events and work with them.&lt;/p&gt;

&lt;h3&gt;
  
  
  SD UI
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/frontend/sdui" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;MoonShine 3 introduces an interesting ability to switch the system to JSON response mode, opening new horizons for integration with other platforms. In this mode, MoonShine will send data in JSON format, where each component is represented as an object with its state, type, and other parameters. This is perfect for integrating MoonShine with mobile applications or other frontend solutions.&lt;/p&gt;

&lt;p&gt;For example, using this approach, you can create a Flutter app that receives MoonShine components in JSON format. This allows you to modify components on the fly without needing to rebuild the app. This approach also simplifies the creation of custom frontends, where you don’t need to compile each page, but can work with components received via API.&lt;/p&gt;

&lt;p&gt;To use this functionality, you need to send a specific header and receive a structure that includes all the components of the page, such as the Dashboard. You will be able to see which components are used, their internal state, and disable some of them or change the display of only the layout if necessary.&lt;/p&gt;

&lt;p&gt;This is a great opportunity for developers who want to integrate MoonShine with other systems or build complex frontend solutions on top of it. If anyone is interested in implementing such solutions, I would be happy to help bring this functionality out of beta and further refine it.&lt;/p&gt;

&lt;h3&gt;
  
  
  API
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://moonshine-laravel.com/ru/docs/3.x/frontend/api" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Allows you to switch the admin panel to JSON response mode, enabling integration with other systems via API. In this mode, all data and interactions occur in JSON format, allowing you to work with MoonShine as an API platform.&lt;/p&gt;

&lt;p&gt;Also added is a &lt;a href="https://moonshine-laravel.com/plugins/moonshine-openapi-generator" rel="noopener noreferrer"&gt;package for generating OpenAPI specifications&lt;/a&gt;. With it, you can easily generate documentation for your API. The process is the same as when creating resources in MoonShine: you create the necessary resources, generate the specification, and get documentation that will be available via Swagger UI. All of this is simple to set up and use.&lt;/p&gt;

&lt;h2&gt;
  
  
  Authentication
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app/ru/docs/3.x/security/authentication" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One of the interesting features is the support for auth pipelines. This mechanism is used for additional data processing, for example, after a user fills out and submits a form. During authentication or data validation, additional modifications or checks can be performed, depending on the settings.&lt;/p&gt;

&lt;h2&gt;
  
  
  In Conclusion
&lt;/h2&gt;

&lt;p&gt;This is only a part of the innovations introduced in MoonShine v3. As you can see, many improvements have been made to the admin panel, along with new functionality. The article turned out to be quite long, and I’ve only covered the main changes. To describe all the innovations, it would probably take more than one article. MoonShine is evolving almost every day, and new features may have been added while you were reading this article.&lt;/p&gt;

&lt;p&gt;Also, I invite you to check out the &lt;a href="https://moonshine-laravel.com/ru/docs/3.x/index" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;, which has become much better and more user-friendly.&lt;/p&gt;

&lt;p&gt;If you have any questions or suggestions, you can always discuss them in the chat, where active work is underway to fix bugs and improve functionality: &lt;a href="https://t.me/MoonShine_Laravel" rel="noopener noreferrer"&gt;MoonShine Telegram Chat&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I’m currently working on a comprehensive video guide for MoonShine v3, which will help you dive deeper into the system and use its capabilities to the fullest. Videos are being added to this playlist, which will be regularly updated, so don’t forget to subscribe to the &lt;a href="https://youtube.com/playlist?list=PLIDM0FwRatgQFTR858CpRtEVG6H30oS_U" rel="noopener noreferrer"&gt;YouTube channel&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Link to the GitHub repository where you can leave stars:&lt;br&gt;&lt;br&gt;
&lt;a href="https://github.com/moonshine-software/moonshine" rel="noopener noreferrer"&gt;MoonShine GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That’s all for now! Wishing you all the best! Use MoonShine in your projects and be happy!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>php</category>
      <category>laravel</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Release of MoonShine v3. History and Innovations</title>
      <dc:creator>Danil Shutsky</dc:creator>
      <pubDate>Sat, 22 Feb 2025 11:00:18 +0000</pubDate>
      <link>https://dev.to/cutcode/release-of-moonshine-v3-history-and-innovations-345i</link>
      <guid>https://dev.to/cutcode/release-of-moonshine-v3-history-and-innovations-345i</guid>
      <description>&lt;p&gt;Hello, colleagues!&lt;/p&gt;

&lt;p&gt;I am &lt;a href="https://github.com/lee-to" rel="noopener noreferrer"&gt;Danil Shchutsky&lt;/a&gt; (CutCode), and for over two years, I have been working on an open-source admin panel for Laravel — &lt;a href="https://github.com/moonshine-software/moonshine" rel="noopener noreferrer"&gt;MoonShine&lt;/a&gt;.&lt;br&gt;&lt;br&gt;
On December 10, 2024, the release of MoonShine v3 took place. In this article, I wanted to share the work done and the main innovations in the project.  &lt;/p&gt;

&lt;p&gt;So, MoonShine v3 is:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A completely new architecture
&lt;/li&gt;
&lt;li&gt;No binding to Eloquent ORM and Laravel
&lt;/li&gt;
&lt;li&gt;Documentation on its own platform in MD format
&lt;/li&gt;
&lt;li&gt;And many other features
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let me elaborate.  &lt;/p&gt;

&lt;h2&gt;
  
  
  The Journey to MoonShine v3
&lt;/h2&gt;

&lt;p&gt;It was incredibly challenging. Thirteen months of work, with the last six months (or even more) being super-intensive development.&lt;br&gt;&lt;br&gt;
You could say that for the past few months, I’ve been living and breathing this third release of MoonShine. I would fall asleep turning over tasks in my head, wake up either with immediate answers and rush to implement them, or continue facing challenges to make MoonShine exactly the way I envisioned it.  &lt;/p&gt;

&lt;p&gt;Did I achieve what I wanted by the release of version three? Well, I had to slightly reduce the initially planned functionality and move some of it to the next, fourth release.  &lt;/p&gt;

&lt;p&gt;It might seem like now is the time for me to take a breather. The release of MoonShine v3 is ready, but... I think the near future will be filled with active feedback: helping with documentation, identifying issues, and addressing inconveniences.  &lt;/p&gt;

&lt;p&gt;As for guides — they will definitely come. There will be plenty of them, for both beginners and experienced users. If you have any suggestions for guide topics, feel free to propose them in the comments.  &lt;/p&gt;

&lt;p&gt;MoonShine 3 has grown significantly. By my estimates, it’s about 10 times larger compared to v2.  &lt;/p&gt;

&lt;p&gt;For me, MoonShine is not just code. Right now, it’s the main focus of my life. In this article, I want to show you the history of MoonShine’s development. You might already be working on open-source projects or planning to do so. There are pros and cons. It’s exhausting, it’s not easy, but I believe that the pros still outweigh the cons.&lt;/p&gt;

&lt;h2&gt;
  
  
  History of MoonShine Releases
&lt;/h2&gt;

&lt;h3&gt;
  
  
  MoonShine v1
&lt;/h3&gt;

&lt;p&gt;Let’s start with the first version. Here’s what MoonShine looked like when it first appeared:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhjvkxhu21avpxigc7ij1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhjvkxhu21avpxigc7ij1.png" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;br&gt;
Back then, it wasn’t called MoonShine, but Laravel Admin Panel. There was no MoonShine yet.&lt;/p&gt;

&lt;p&gt;Let me remind you that the initial idea came from the CutCode Laravel chat, where the guys said: “Let’s come up with our own open-source project. It’s cool, we’ll work on it together!”&lt;/p&gt;

&lt;p&gt;And in this form, I presented it on my YouTube channel: “Guys, here’s our shared open-source project. Let’s do it! Everything you wanted.”&lt;/p&gt;

&lt;p&gt;The logo was also different back then — I drew it myself. And here’s what the login page looked like. It was... well, let’s just say it was an eyesore.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp55q7u3up24tds4a8ys5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp55q7u3up24tds4a8ys5.png" alt="Image description" width="755" height="551"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;At that time, I had just discovered Nova for the first time. I was reading its documentation and thinking: “This is so cool! All these fields (Field), how interestingly everything is implemented!” Inspired by the documentation, I recreated my own version. At some point, I also looked at Filament, borrowed some ideas, and that also influenced me.&lt;br&gt;
As for MoonShine v3, it’s now a completely unique product. There’s nothing borrowed here anymore. I’ve come to the realization that it’s important to follow your own path.&lt;/p&gt;

&lt;p&gt;In March 2022, I met &lt;a href="https://github.com/Opekunov" rel="noopener noreferrer"&gt;Alexander&lt;/a&gt;, who created the logo for us:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyirr6tue3l4sqc5qbcul.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyirr6tue3l4sqc5qbcul.png" alt="Image description" width="800" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We moved to a separate repository. Why did I do this? To ensure that the project wasn’t tied to my personal GitHub account. If this is a community-driven project, it would be strange for it to be under the authorship of a single vendor. So, I created a separate GitHub account — &lt;a href="https://github.com/moonshine-software/moonshine" rel="noopener noreferrer"&gt;MoonShine Software&lt;/a&gt;, set up the MoonShine repository there, and on May 12, 2022, we migrated everything to it (this can be considered the official birthday of MoonShine).  &lt;/p&gt;

&lt;p&gt;After several months of working together with Alexander, on June 8, 2022, we got another contributor — &lt;a href="https://github.com/nikitaMai" rel="noopener noreferrer"&gt;nikitaMai&lt;/a&gt;. This likely influenced how MoonShine developed further. It was a turning point when I saw people in chats actually using MoonShine. That alone was enough motivation for me to keep working on it.  &lt;/p&gt;

&lt;p&gt;Alexander started using MoonShine in commercial projects. However, the design was such that it couldn’t be shown to serious clients. We decided to commission a new design.  &lt;/p&gt;

&lt;p&gt;By mid-June 2022, we released &lt;a href="https://github.com/moonshine-software/moonshine/releases/tag/1.5.0" rel="noopener noreferrer"&gt;version 1.50&lt;/a&gt; — with a new design, the one you see now. We gained contributors, and progress started to pick up. The new design was great, but under the hood, everything remained the same. Only the Blade views were updated. Visually, it looked better, but internally, it still had legacy artifacts from version 0.9, which was essentially cobbled together.  &lt;/p&gt;

&lt;p&gt;But that’s the whole point of our open-source project, MoonShine — to give everyone a chance to contribute: both experienced developers and those who have just read my book, &lt;strong&gt;Laravel Ninja Guide&lt;/strong&gt;, and want to join the project.  &lt;/p&gt;

&lt;p&gt;By the way, there’s another point. Sasha and I had the idea to make version 2.0 modular. That is, the backend and frontend would be two separate projects, completely isolated. This way, if someone wanted, they could write their own frontend using anything they liked, or keep the frontend and write their own backend. However, this idea remains unrealized for now.  &lt;/p&gt;

&lt;h2&gt;
  
  
  MoonShine v2
&lt;/h2&gt;

&lt;p&gt;So, MoonShine v1 had significant issues with the code, and the release of v2 was meant to address them. In addition to refactoring the code, new challenges emerged. One of them was the task of decoupling from Eloquent ORM. This was probably the main goal for version 2.0 — to create an admin panel that wasn’t hardwired to Eloquent.&lt;/p&gt;

&lt;p&gt;And in MoonShine v2, we achieved that. The development process was very exciting. The first cohort of my online course, Internet Store, had just finished, where I met some amazing people. At the time, they might not have been seasoned experts, but when they joined MoonShine and started contributing, they grew into skilled developers.&lt;/p&gt;

&lt;p&gt;We started communicating, they liked the idea of MoonShine, and we began working on the second version. First, I created the core, shaping the concept as I envisioned it. Then, starting in August 2022, I brought the others on board. It felt like an avalanche — incredibly intense. We were working like crazy.&lt;/p&gt;

&lt;p&gt;Another &lt;a href="https://github.com/DissNik" rel="noopener noreferrer"&gt;Alexander&lt;/a&gt; joined us, focusing on documentation, but he also did a lot of frontend work. Pull requests from him were pouring in. Plus, there was &lt;a href="https://github.com/dev-lnk" rel="noopener noreferrer"&gt;Ivan&lt;/a&gt;, the creator of the new MoonShine Rush package and many features. He, too, was submitting pull requests non-stop. Features like ShowWhen (which allows dynamically controlling the visibility of fields based on the values of other fields, enabling real-time hiding or showing of fields without page reloads) and OnlyLink (used to display a link without the ability to edit, allowing you to show users specific data as a link but preventing them from changing its value) were all Ivan’s work.&lt;br&gt;
During the development of the second version, I felt like Taylor Otwell, reviewing pull requests, helping the team, and giving advice. That’s how MoonShine v2 came to be. However, it didn’t turn out exactly as I had initially planned, and some features were moved to the roadmap for future work.&lt;/p&gt;

&lt;p&gt;A special note about the MoonShine documentation — it’s incredibly challenging and crucial work. In fact, writing documentation is often much harder than writing the code itself. Sasha wrote the majority of the documentation for MoonShine v2.&lt;/p&gt;

&lt;p&gt;Okay, so MoonShine v2 was ready by November 2023. And I thought: If things are this intense now, what will happen by the release of 3.0?! Probably even more developers will join. The documentation will probably flow like butter!&lt;/p&gt;

&lt;h2&gt;
  
  
  MoonShine v3
&lt;/h2&gt;

&lt;p&gt;The main goal for v3 was to achieve some level of isolation from Laravel. The idea was to create a monorepo where everything would be split into separate packages: Laravel as a standalone package, AssetManager, MenuManager, UI, and so on. Overall, we can say that MoonShine was decoupled from Laravel, but there are still some dependencies on collections and contracts.&lt;/p&gt;

&lt;p&gt;I’ve already experimented with implementing MoonShine on Symfony. Now that Yii3 is coming out, why not try integrating MoonShine with it? However, I’m a proponent of separating the main site and the admin panel — deploying MoonShine+Laravel on a subdomain.&lt;/p&gt;

&lt;p&gt;I’ll leave a small spoiler: after the release of v3, I’ll show you an interesting feature of MoonShine v3 that will completely change the way people think about admin panels. The frameworks and programming languages used for projects won’t matter as much anymore.&lt;/p&gt;

&lt;p&gt;From November 2023 to May 2024, I collected feedback from users and solidified my thoughts on what v3 should look like. The plan for the MoonShine v3 release was as follows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;May: Create the concept.&lt;/li&gt;
&lt;li&gt;June-July: Bring in the rest of the team to polish the code and documentation.&lt;/li&gt;
&lt;li&gt;By October: Finish the work.
But things didn’t go according to plan. This is where the downsides of open-source come into play, which we’ll talk about now.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There was a lot of work ahead. MoonShine v3 is a completely rewritten admin panel. In May, we held the MoonShine Dev Camp. There were 11 active MoonShine developers, and I shared information about what MoonShine would become, showed the concept, and thought that this core team would grow and continue working.&lt;/p&gt;

&lt;p&gt;However, by June, nothing was happening — not even from the core developers. July and August were the same. I was working on MoonShine all day, every day, but no one else was joining in.&lt;br&gt;
Around August, Ivan started contributing. He worked on ShowWhen(), completely upgrading it, and submitted a few other small pull requests.&lt;br&gt;
By September, the coding work was mostly finished, and it was time to move on to the documentation. We were already more than a month behind schedule.&lt;/p&gt;

&lt;h2&gt;
  
  
  Documentation and PHPStan
&lt;/h2&gt;

&lt;p&gt;Sasha didn’t have enough time to work on the documentation, even though he was our main hope for it. With no other options, I had to take on the documentation myself. I also formed a group of volunteers who offered to help with the documentation, but progress was slow. In the end, I think I wrote about 90% of the documentation myself.&lt;/p&gt;

&lt;p&gt;Realizing that we wouldn’t meet the November 1 deadline, I had to push the release to December 10.&lt;/p&gt;

&lt;p&gt;In parallel, a frontend developer I knew was working on the platform for the documentation and making adjustments to the admin panel itself. Due to the tight deadlines, we had to reduce the number of frontend tasks by about 50%.&lt;/p&gt;

&lt;p&gt;The last week before the release was especially intense. On December 9, Ivan and I did a final sprint to complete the documentation and close the main sections.&lt;/p&gt;

&lt;p&gt;A lot of time was spent on the documentation, but we didn’t fully finish it! I think the MoonShine documentation is now even larger than Laravel’s.&lt;/p&gt;

&lt;p&gt;But there’s still a lot of work to be done on the documentation, and it might never truly be finished. So, I invite everyone to get involved, contribute, and write. I’d be very grateful.&lt;/p&gt;

&lt;p&gt;The Recipes section got a second wind. The number of recipes has grown, and they’re regularly updated and expanded. Now, thanks to the Markdown format, the process of creating and formatting documentation is simpler and faster.&lt;/p&gt;

&lt;p&gt;Another thing about the documentation: it’s completely migrated to Markdown. We have our own platform that parses it and makes it look stylish. At first, I didn’t want to write my own solution and considered ready-made options like Mintlify, Docusaurus, GitBook, and others. But each had its drawbacks, such as issues with versioning or language support. Many assume that only English exists and don’t bother with multilingual support. In the end, I had to write our own platform, which took a lot of effort, but I’m very happy with the result. Now we can do whatever we want with it.&lt;/p&gt;

&lt;h3&gt;
  
  
  What else has changed in terms of code?
&lt;/h3&gt;

&lt;p&gt;In addition to regular tests, we now have mutation tests. PHPStan has leveled up: it was at level 1, and now it’s at level 5. I plan to increase this further. Overall, the entry barrier for contributors has risen.&lt;/p&gt;

&lt;p&gt;MoonShine 3, in my opinion, has become more complex for users. By that, I mean it will take some getting used to. Previously, all fields were in the fields method, and we separated them internally using additional methods like showOn/hideOn to control which fields appeared on the list page or the form. This created a bit of a mess. In version 3, everything is moved to separate methods, and the showOn/hideOn field methods have been removed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Domain
&lt;/h2&gt;

&lt;p&gt;By the way, regarding the domain moonshine-laravel.com. At first, it seemed like a great idea to have the connection to Laravel right in the domain name. Laravel is the most popular PHP framework, and the admin panel was built on it. But with MoonShine v3, things are changing, and the admin panel is outgrowing Laravel. So, we’ve decided to acquire another domain: &lt;a href="https://getmoonshine.app/" rel="noopener noreferrer"&gt;https://getmoonshine.app&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Different Approaches
&lt;/h2&gt;

&lt;p&gt;What I love about MoonShine v3 is the flexibility to use different approaches. Do you prefer configs the way you’re used to in Laravel? Go ahead, use them. Want to work with objects? No problem, we have a config object with a fluent interface.&lt;/p&gt;

&lt;p&gt;Everything is designed for developer convenience. However, we still have a weak spot — the MoonShine/Laravel package. There are still some helpers there, but in the future, we’ll remove them to rely solely on dependency injection.&lt;/p&gt;

&lt;p&gt;Now everything is simpler: we’ve introduced configuration injection. No resources, no menu in the provider — everything is flexible and straightforward.&lt;/p&gt;

&lt;h2&gt;
  
  
  MoonShine Changes the Way We Think About Admin Panels
&lt;/h2&gt;

&lt;p&gt;How does admin panel generation usually go for a project? It’s routine. At least, it always was for me: either I wrote some custom solution (which was very sad) or used a ready-made tool and quickly generated it. I didn’t like any of it. The goal was just to make it work, get the client to accept it, finish quickly, and forget about it like a bad dream.&lt;/p&gt;

&lt;p&gt;With MoonShine, it’s a different story. I genuinely enjoy it. For me, creating an admin panel is now an exciting activity. Writing an admin panel in MoonShine is like assembling a constructor. I love building constructors — I even recently bought myself a big car constructor and spent a week assembling it, getting a lot of joy out of it. It takes time, but you enjoy the process. The same goes for MoonShine: you assemble this constructor, enjoy the process, try to make things cleaner, and come up with new solutions. It’s an amazing feeling.&lt;/p&gt;

&lt;p&gt;This is exactly the atmosphere I was aiming for — where MoonShine isn’t just a tool for quick generation, but something that brings developers joy and makes them happier.&lt;/p&gt;

&lt;h2&gt;
  
  
  Community
&lt;/h2&gt;

&lt;p&gt;It’s clear to everyone that MoonShine v3 is an awesome admin panel 😉. But without a community, it’s nothing. Without promotion, it won’t take off. We need to promote the product, write guides, articles, and engage with people. It’s important that people embrace the "MoonShine religion" and spread the word about how great it is. We pour our hearts into it. Right now, it’s my life.&lt;/p&gt;

&lt;p&gt;Someone once said that they spent three months building a simple admin panel, but when they tried MoonShine, they created the same thing in just a few days! We strive to make developers happier, even if it leaves us a bit more tired 😎. When you write words of gratitude, it’s incredibly motivating.&lt;/p&gt;

&lt;p&gt;I think there are still many challenges ahead. Don’t think that the release of version 3 is the end. There’s still a lot of work to be done.&lt;br&gt;
If you notice errors in the documentation or code, even funny ones, please don’t stay silent. Mention it in the chat, or even better — create an issue. We understand that mistakes happen, but we strive for perfection and are ready to fix them.&lt;/p&gt;

&lt;p&gt;Sometimes people write to me: “Oh, I didn’t do much. I just added a comma in the documentation or fixed a doc block in the code. Just a small thing.” But for me, such PRs are incredibly valuable. When you’re focused on complex challenges or core issues, these small details often go unnoticed, so even minor contributions are very important!&lt;/p&gt;

&lt;h2&gt;
  
  
  Upgrading from MoonShine v2 to v3
&lt;/h2&gt;

&lt;p&gt;The documentation includes a &lt;a href="https://moonshine-laravel.com/en/docs/3.x/upgrade-guide" rel="noopener noreferrer"&gt;text guide&lt;/a&gt; for upgrading from version 2 to version 3. It was written by a community member who updated their own project. There are some points that, in my opinion, might not have been necessary to include, like how to back up the old config to keep it handy. Nevertheless, they described even these small details, as well as what might happen during the upgrade process. Another developer suggested creating a ready-made upgrade script, but they never finished it, probably due to lack of time or motivation.&lt;/p&gt;

&lt;p&gt;Ivan updated our demo projects. We have three of them, and he updated all of them in a day. One of the demo projects is quite large, so I don’t think upgrading should be a problem unless your project is very complex.&lt;br&gt;
I also recorded a video guide on upgrading — it’s available on &lt;a href="https://www.youtube.com/watch?v=GFuoA_u3k_s&amp;amp;pp=ygURbGFyYXZlbCBtb29uc2hpbmU%3D" rel="noopener noreferrer"&gt;YouTube&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Comparison with Filament
&lt;/h2&gt;

&lt;p&gt;People often ask about comparisons with Filament. My opinion: Filament is a super lightweight tool with a low entry barrier, full of "sugar." MoonShine, on the other hand, is designed for more complex tasks, requires development skills, and doesn’t limit the developer but allows them to build an admin panel faster. Yes, working with MoonShine is probably harder than with Filament, but it’s worth it. However, I haven’t forgotten about beginners, and basic functions like CRUD and UI customization are made as simple as possible.&lt;/p&gt;

&lt;p&gt;MoonShine — simple for beginners, limitless for professionals.&lt;br&gt;
But I do plan to create a detailed comparison of Laravel admin panels.&lt;/p&gt;

&lt;h2&gt;
  
  
  Marketplace Moonshine
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fogblvf2mdd0ecu9w4xu4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fogblvf2mdd0ecu9w4xu4.png" alt="Image description" width="800" height="421"&gt;&lt;/a&gt;&lt;br&gt;
One more new feature that came with the third version of MoonShine is the &lt;a href="https://getmoonshine.app/plugins" rel="noopener noreferrer"&gt;Marketplace&lt;/a&gt;. What is it? It’s a place where developers can publish their packages. Of course, we’ll moderate the content to ensure that unnecessary or duplicate solutions don’t appear there. But if you have something interesting, you can create a package and publish it here. It can be either free or paid. The Marketplace is designed to motivate developers to create useful solutions. If you want to write (or have already written) a useful extension for MoonShine, you can message me directly, and we’ll discuss the details.&lt;/p&gt;

&lt;p&gt;In commercial projects, development speed is crucial — so ready-made solutions (including paid ones) will be in demand. Paying for ready-made functionality is justified, especially if it saves time and generates income.&lt;/p&gt;

&lt;p&gt;In the end, everyone wins, especially the developer using MoonShine.&lt;br&gt;
There’s already a first paid package from MoonShine — Rush. It’s a ready-made integration for web sockets. It supports all popular web socket drivers: Echo, Centrifugo, Socket.io, and even custom solutions. I’ll record a separate video to explain Rush in more detail — it’s a massive package that allows you to easily create "live forms" in MoonShine. You’ll see who is editing a form, which field they’re editing, and you can lock editing to prevent simultaneous changes to a record. Dynamic metrics and values — a lot of useful features for building a truly functional admin panel.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sponsors
&lt;/h2&gt;

&lt;p&gt;MoonShine’s sponsors are respected members of our community. I keep track of who donates and how much. There are already quite a few regular sponsors. And recently, the project’s balance became positive, which is great news.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Few Words About New Features
&lt;/h2&gt;

&lt;p&gt;MoonShine is gradually gaining new capabilities. Now, not only admin panels and MVPs but also personal accounts can be built on MoonShine. Here’s a brief overview of the new features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Separate layouts: For example, registration, password recovery, and profile pages now have their own layouts, allowing you to adapt pages for specific tasks.&lt;/li&gt;
&lt;li&gt;Decorations are now called components: This simplifies understanding MoonShine’s structure. Fields, which were previously isolated, are now also treated as components, making them more integrated into the overall process.&lt;/li&gt;
&lt;li&gt;CRUD resource in version 3.0: Now you can use the CRUD resource interface to fully implement your solution or use a ready-made abstraction. This significantly simplifies working with REST API. Tables support lazy loading, minimizing server load.&lt;/li&gt;
&lt;li&gt;MoonShine Builder: A package by Ivan that automatically generates resources based on the database structure. It simplifies the process of creating an admin panel and saves time.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This turned out to be a lengthy article, where I focused more on the history of MoonShine v3’s release and the project’s innovations as a whole. Soon, I’ll write another article where I’ll go into detail about the capabilities of the new version of the admin panel.&lt;br&gt;
Thank you for your attention. Use MoonShine and be happy! ❤️&lt;/p&gt;

&lt;p&gt;&lt;a href="https://getmoonshine.app" rel="noopener noreferrer"&gt;https://getmoonshine.app&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/moonshine-software/moonshine" rel="noopener noreferrer"&gt;https://github.com/moonshine-software/moonshine&lt;/a&gt;&lt;br&gt;
&lt;a href="https://t.me/MoonShine_Laravel" rel="noopener noreferrer"&gt;https://t.me/MoonShine_Laravel&lt;/a&gt;&lt;/p&gt;

</description>
      <category>php</category>
      <category>opensource</category>
      <category>webdev</category>
      <category>laravel</category>
    </item>
  </channel>
</rss>
