syntaxx/phpx-starter-kit

PHPX starter kit

Installs: 2

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Open Issues: 0

Language:JavaScript

Type:project

pkg:composer/syntaxx/phpx-starter-kit

v0.1.1 2025-11-02 12:22 UTC

This package is auto-updated.

Last update: 2025-11-02 12:24:03 UTC


README

React-like components in PHP, running in your browser via WebAssembly.

Build interactive web applications using familiar JSX syntax, component-based architecture, and React hooksβ€”all in PHP!

Quick Start

Create a new PHPX project in seconds:

composer create-project syntaxx/phpx-starter-kit my-app
cd my-app
composer wasm
composer serve

Open http://localhost:9999 and start building! πŸš€

Your First Component

Create interactive components with JSX syntax and React hooks:

<?php

namespace Syntaxx\PHPX\Demo;

use Syntaxx\PHPX\Framework\Component;
use Syntaxx\PHPX\Framework\Runtime;
use Syntaxx\PHPX\Framework\Document;
use function Syntaxx\PHPX\Framework\useState;

function MyApp() {
    return (
        <div>
            <h1>Click to increment</h1>
            <MyButton />
        </div>
    );
}

function MyButton() {
    [$count, $setCount] = useState(0);

    $handleClick = function() use ($count, $setCount) {
        $setCount($count + 1);
    };

    return (
        <button onClick={$handleClick}>
            Count: {$count}
        </button>
    );
}

// Render to DOM
$root = Runtime::createRoot(Document::document()->getElementById('root'));
$root->render(
    Component::create("StrictMode", [], [
        Component::create("MyApp", [], [])
    ])
);

That's it! You now have a fully interactive counter running PHP in your browser.

What You Get

βœ… JSX Syntax - Write <div> just like React βœ… React Hooks - useState, state management βœ… Component Architecture - Composable, reusable components βœ… Event Handling - onClick, onChange, and more βœ… Zero JavaScript - Everything is PHP (compiled to WebAssembly) βœ… Fast Builds - Vendor caching, watch mode, live reload ready

Development Workflow

# Terminal 1: Auto-rebuild on changes
composer wasm:watch

# Terminal 2: Development server
composer serve

Edit your .phpx files in src/, save, and refresh your browser. Changes appear instantly!

Project Structure

my-app/
β”œβ”€β”€ src/               # Your PHPX components (.phpx files)
β”‚   └── App.phpx       # Main application component
β”œβ”€β”€ public/            # Web root
β”‚   β”œβ”€β”€ index.html     # HTML entry point
β”‚   β”œβ”€β”€ css/           # Stylesheets
β”‚   └── build/         # Compiled WebAssembly files (auto-generated)
β”œβ”€β”€ bootstrap.php      # Application entry point
└── composer.json      # Dependencies and build scripts

Available Commands

Command Description
composer wasm Build for production
composer wasm:watch Auto-rebuild on file changes
composer serve Start development server (auto-detects port from 9999)
composer wasm:dev Development build with source maps

How It Works

  1. Write Components - Create .phpx files with JSX syntax
  2. Compile - PHPX compiler transforms JSX β†’ PHP
  3. Pack - WebAssembly packer bundles your app
  4. Run - PHP WebAssembly runtime executes in browser
  5. Interact - VRZNO bridge connects PHP ↔ JavaScript/DOM

Result: Your PHP code runs entirely in the browser, no server required!

Learn More

  • Full Documentation: docs.phpx.dev (coming soon)
  • Examples: Check the src/ directory for more component examples
  • Framework Docs: See vendor/syntaxx/phpx-framework/README.md
  • Build System: See vendor/syntaxx/phpx-build-tools/README.md

Requirements

  • PHP 8.4+ (for local development/builds)
  • Composer (dependency management)
  • Modern Browser with WebAssembly support (Chrome, Firefox, Safari, Edge)

Features

🎯 React-like Experience

  • JSX syntax: <button onClick={$handler}>Click me</button>
  • Hooks: useState(), state management
  • Component composition and props
  • Declarative UI updates

⚑ Fast Development

  • Vendor caching (10-15s β†’ 0.4s rebuilds)
  • Watch mode with auto-rebuild
  • Port auto-detection (no conflicts!)
  • Source maps for debugging

Troubleshooting

Build errors?

rm -rf build/ vendor/
composer install
composer wasm

Port already in use? The serve command auto-detects available ports (9999 β†’ 9998 β†’ 9997...).

Browser not loading? Check browser console (F12) for errors. Ensure WebAssembly is supported.

Contributing

Found a bug? Have a feature idea? We'd love your contribution!

  1. Fork the repository
  2. Create a feature branch
  3. Submit a pull request

License

MIT License - See LICENSE file for details.

Acknowledgments

Built with: