Yoyo Component Generator
Generate Yoyo PHP component boilerplate instantly. Configure properties, actions, events, computed properties, and lifecycle hooks with live code preview.
- Free, no sign-up
- REST + MCP
- Updated
- Reviewed by Olgun Ozoktas
Presets
Basic Settings
Public Properties
Action Methods
Computed Properties
Event Listeners
Lifecycle Hooks
PHP Class
<?php
namespace App\Yoyo;
use Clickfwd\Yoyo\Component;
class MyComponent extends Component
{
}Template (PHP)
<div>
<div yoyo:spinning>
Loading...
</div>
</div>How to Generate a Yoyo Component
-
Set Component Name
Enter your component name in PascalCase and set the namespace. -
Choose Template Engine
Select PHP, Blade, or Twig as your template engine. -
Add Properties
Define public properties with their types and default values. -
Configure Actions
Add action methods that handle user interactions. -
Copy or Download
Copy the generated code or download both files as a ZIP archive.
Who Uses This Tool?
PHP Developers
Developers building reactive interfaces with Yoyo who want to scaffold components quickly.
Teams Adopting Yoyo
Teams migrating from Livewire or other reactive frameworks to the framework-agnostic Yoyo.
Rapid Prototyping
Developers who need to quickly create multiple components for a new project.
Why Use the Yoyo Component Generator?
Creating Yoyo components involves writing PHP classes with the correct namespace, extending Component, setting up properties, lifecycle hooks, and matching template files. This generator eliminates the boilerplate, letting you focus on your component logic instead of scaffolding.
The Yoyo Component Generator creates ready-to-use PHP component files for the Yoyo reactive framework. Configure properties, actions, computed properties, event listeners, and lifecycle hooks through an interactive form, then copy or download the generated code.
Yoyo brings reactive, server-rendered components to any PHP project without requiring a specific framework. It uses htmx under the hood, making it lightweight and efficient.
How it compares
Unlike manually writing Yoyo components from scratch, this generator ensures correct syntax, proper namespace usage, and includes all the necessary boilerplate. It supports all three template engines (PHP, Blade, Twig) and includes preset examples for common patterns.
Tips for Yoyo Components
- Always wrap your template in a single root element (required by Yoyo).
- Use $props to persist properties across component updates.
- Use $queryString to sync component state with the URL for bookmarkable pages.
- Computed properties are cached per request - use them for expensive calculations.
- Use yoyo:spinning to show loading indicators during server requests.
Frequently Asked Questions
What is Yoyo PHP?
Yoyo is a framework-agnostic PHP library for building reactive, dynamic interfaces using server-rendered HTML. It works with any PHP project and uses htmx under the hood for AJAX transport.
Do I need Laravel to use Yoyo?
No. Yoyo is framework-agnostic and works with vanilla PHP, Laravel, Symfony, and any other PHP framework. It supports PHP, Blade (without Laravel), and Twig template engines.
What are Yoyo computed properties?
Computed properties are defined using the getXxxProperty() naming convention. They allow you to derive values from component state and are accessible in templates using the snake_case version of the property name.
What is the difference between dynamic and anonymous components?
Dynamic components have a PHP class and a template file. Anonymous components are template-only, with no backing PHP class. Anonymous components are simpler but have fewer features.
What does the $props property do in Yoyo?
The protected $props array specifies which public properties should persist across component updates. Without $props, property values may reset on each server request.
Does the Yoyo Component Generator require a signup?
No. It is available with no signup and no usage limits. The PHP boilerplate is generated in your browser.
Which template engines can the component use?
Plain PHP, Blade, and Twig. Choose the engine in the second step and the generated view file matches its syntax.
What does $queryString do?
It syncs the listed component properties with the URL query string, so a filtered or paginated component state can be bookmarked and shared.