AeThex Studio

A powerful, browser-based IDE specifically designed for Roblox Lua development with AI assistance, modern tooling, and an intuitive interface.

✨ Features

🎨 Modern Code Editor

• Monaco Editor - The same editor that powers VS Code
• Lua syntax highlighting with autocomplete
• Real-time code validation and linting
• Multi-file editing with tab management
• File tree navigation with drag-and-drop organization

🤖 AI-Powered Assistant

• Built-in AI chat for code help and debugging
• Context-aware suggestions
• Code explanation and documentation
• Roblox API knowledge

📁 Project Management

• File Tree - Organize your scripts into folders
• Drag-and-drop - Rearrange files easily
• Quick file search (Cmd/Ctrl+P) - Find files instantly
• Search in files (Cmd/Ctrl+Shift+F) - Global text search

🎯 Productivity Features

• 25+ Code Templates - Ready-made scripts for common tasks
  • Beginner templates (Hello World, Touch Detectors, etc.)
  • Gameplay systems (DataStore, Teams, Combat, etc.)
  • UI components (GUIs, Timers, etc.)
  • Advanced features (Pathfinding, Inventory, etc.)
• Command Palette (Cmd/Ctrl+K) - Quick access to all commands
• Keyboard Shortcuts - Professional IDE shortcuts
• Code Preview - Test your scripts instantly

💻 Interactive Terminal & CLI

• Built-in Terminal - Full-featured command line interface
• 10+ CLI Commands for Roblox development:
  • help - Display available commands
  • run - Execute current Lua script
  • check - Validate syntax and find errors
  • count - Count lines, words, characters
  • api <class> - Lookup Roblox API documentation
  • template [list|name] - Browse and load templates
  • export [filename] - Export scripts to .lua files
  • clear - Clear terminal output
  • info - Display system information
  • echo - Print text to terminal
• Command History - Navigate previous commands with ↑/↓ arrows
• Auto-completion - Tab-complete command names
• Smart Suggestions - Context-aware command hints
• Toggle with Cmd/Ctrl + ` - Quick terminal access

🎨 Customization

• 5 Beautiful Themes:
  • Dark - Classic dark theme for comfortable coding
  • Light - Clean light theme for bright environments
  • Synthwave - Retro neon aesthetic
  • Forest - Calming green tones
  • Ocean - Deep blue theme
• Persistent preferences - Your settings are saved

📱 Mobile Responsive

• Optimized layouts for phones and tablets
• Touch-friendly controls
• Hamburger menu for mobile
• Collapsible panels

🚀 Developer Experience

• Code splitting for fast loading
• Error boundaries with graceful error handling
• Loading states with spinners
• Toast notifications for user feedback
• Testing infrastructure with Vitest

🎮 Perfect For

• Roblox Developers - Build game scripts faster
• Students & Learners - Learn Lua with templates and AI help
• Rapid Prototyping - Quickly test game ideas
• Web-Based Development - Code anywhere, no installation needed

⌨️ Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl + S	Save file (auto-save enabled)
Cmd/Ctrl + P	Quick file search
Cmd/Ctrl + K	Command palette
Cmd/Ctrl + N	New project
Cmd/Ctrl + F	Find in editor
Cmd/Ctrl + Shift + F	Search in all files
Cmd/Ctrl + `	Toggle terminal

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/AeThex-LABS/aethex-studio.git

# Navigate to the project directory
cd aethex-studio

# Install dependencies
npm install

# Start the development server
npm run dev

Visit http://localhost:3000 to see the application.

Building for Production

# Build the application
npm run build

# Start the production server
npm start

📖 Usage Guide

Creating Your First Script

1. Click "New File" in the file tree
2. Choose a template or start from scratch
3. Write your Lua code in the Monaco editor
4. Click "Preview" to test
5. Copy or Export your script

Using Templates

1. Click the Templates button in the toolbar
2. Browse categories: Beginner, Gameplay, UI, Tools, Advanced
3. Click a template to load it into your editor
4. Customize the code for your needs

AI Assistant

1. Open the AI Chat panel (right side on desktop)
2. Ask questions about:
   • Roblox scripting
   • Code debugging
   • API usage
   • Best practices
3. Get instant, context-aware answers

Organizing Files

• Create folders - Right-click in file tree
• Drag and drop - Move files between folders
• Rename - Click the menu (⋯) next to a file
• Delete - Use the menu to remove files

Searching

• Quick search - Cmd/Ctrl+P to find files by name
• Global search - Cmd/Ctrl+Shift+F to search text across all files
• In-editor search - Cmd/Ctrl+F to find text in current file

🛠️ Tech Stack

• Next.js 14 - React framework
• React 18 - UI library
• TypeScript - Type safety
• Monaco Editor - Code editor
• Tailwind CSS - Styling
• Radix UI - Component primitives
• Phosphor Icons - Icon library
• Vitest - Testing framework
• PostHog - Analytics (optional)
• Sentry - Error tracking (optional)

🧪 Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage

📂 Project Structure

aethex-studio/
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # Reusable UI components
│   │   ├── CodeEditor.tsx
│   │   ├── FileTree.tsx
│   │   ├── AIChat.tsx
│   │   └── ...
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   │   ├── templates.ts  # Code templates
│   │   └── ...
│   └── App.tsx           # Main application
├── app/                  # Next.js app directory
│   └── globals.css       # Global styles
├── public/               # Static assets
└── tests/                # Test files

🤝 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/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Code Templates

AeThex Studio includes 25+ production-ready templates:

Beginner:

• Hello World, Player Join Handler, Part Touch Detector, etc.

Gameplay:

• DataStore System, Teleport Part, Team System, Combat System, etc.

UI:

• GUI Buttons, Proximity Prompts, Countdown Timers, etc.

Tools:

• Give Tool, Sound Manager, Admin Commands, Chat Commands, etc.

Advanced:

• Round System, Inventory System, Pathfinding NPC, Shop System, etc.

🐛 Bug Reports

Found a bug? Please open an issue on GitHub with:

• Description of the bug
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)

📜 License

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

🙏 Acknowledgments

• Monaco Editor - For the powerful code editor
• Roblox - For the game platform
• Radix UI - For accessible component primitives
• Vercel - For Next.js framework

📧 Contact

• Website: aethex.com
• GitHub: @AeThex-LABS
• Issues: GitHub Issues

---

Built with ❤️ by the AeThex team

Happy coding! 🎮✨