Preactor

🚀 Overview

Preactor is a revolutionary toolkit that bridges the gap between modern web development and Unity game development, empowering you to create stunning, responsive user interfaces with unprecedented ease and flexibility.

By bringing Preact (a fast 3kB alternative to React) and Tailwind CSS (a utility-first CSS framework) into the Unity ecosystem, Preactor transforms how you approach UI development in your games and applications.

✨ Features

🧩 Modern Component-Based Architecture

• Build reusable, modular UI components
• Implement reactive interfaces that update automatically when data changes
• Organize your UI code more logically and maintainably
• Leverage the familiar JSX-like syntax that web developers love

🎨 Effortless Styling with Tailwind CSS

• Access thousands of utility classes for instant styling
• Maintain consistent design language across your entire project
• Implement responsive designs that work across different screen sizes
• Customize your UI without writing a single line of CSS

⚡ Streamlined Development Workflow

• Hot reloading capabilities for instant feedback
• TypeScript support for type safety and better tooling
• Efficient compilation through esbuild
• Seamless integration with Unity's existing systems

🔄 Unity Addressables Integration

• Load UI components asynchronously for better performance
• Update your UI without requiring a full app update
• Optimize memory usage by loading only what you need
• Implement dynamic content updates post-release

📋 Prerequisites

Before installing Preactor, ensure you have:

• Unity 6000.0 or newer
• Node.js 14+ and npm installed on your development machine
• Basic familiarity with Unity's Package Manager
• Git installed (for package installation)

🔧 Installation

1. Install Preactor via Unity's Package Manager

1. Open Unity.

2. Navigate to Window > Package Manager.

3. Click the + button in the top-left corner and select Install package from Git URL....

4. Enter the following Git URL:

   https://github.com/Rikarin/preactor.git?path=/Assets/Plugins/Preactor

2. Initialize the Preactor Directory

After installation, initialize the Preactor directory:

mkdir Preactor

3. Copy Solution Files

Copy the contents of the ./Preactor/solution directory from the Preactor Git repository into your <Project>/Preactor directory.

4. Compile JavaScript Views

Compile your JavaScript views with:

pnpm run start

5. Set Up Preactor in the Scene

1. Create a global object: Preactor > Preactor Global
2. Create a renderer object: Preactor > Preactor Renderer
3. Import your compiled JavaScript view into the renderer object

💻 Usage Example

Here's a simple example of a button component in Preactor:

import Button from './Button';

function SaveButton() {
  return (
    <Button variant="default" color="green" onClick={() => saveData()}>
      Save
    </Button>
  );
}

// Different button variants
function ButtonVariants() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="small">Small</Button>
      <Button variant="icon">🔍</Button>
    </div>
  );
}

🌟 Benefits

For Game Developers

• Reduced Development Time: Build complex UIs in a fraction of the time
• Improved Iteration Speed: Make changes quickly and see results instantly
• Better Collaboration: Allow web developers to contribute directly to your game UI
• Future-Proof Skills: Use technologies that are widely adopted in the broader development community

For Studios

• Consistent UI: Maintain design consistency across multiple projects
• Easier Onboarding: Leverage widely-known web technologies to reduce training time
• Flexible Updates: Push UI changes without requiring full app updates
• Cross-Platform Excellence: Create responsive UIs that work beautifully across all platforms

📚 Documentation

For comprehensive documentation, visit our Documentation Website.

• Getting Started
• Examples
• API Reference

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.

🙏 Acknowledgements

• OneJS - For the original idea of using Preact in Unity
• Preact - For providing the lightweight React alternative
• Tailwind CSS - For the utility-first CSS framework
• esbuild - For the extremely fast JavaScript bundler
• Unity - For the "amazing" game development platform