Tour of the Platform - Stellify Documentation

Video Tour

Key Areas

Stellify is organized into distinct areas, each focused on a specific part of development.

Navigation Bar

The navigation bar runs across the top of the editor.

Project ▼

Home ▼

⎇ main ▼

Local

From left to right:

Logo — Return to home
Project — Switch between projects
Route/File — Select a page or file to edit
Branch — Switch git branches
Environment — Shows current environment (Local, Staging, Production)
Interface — Visual drag-and-drop UI builder
Code — Write PHP and JavaScript
Split — Interface and code side by side
Settings — Project configuration (database, GitHub, API keys)
Profile — User account and preferences

Interface Builder

Interface

Code

Split

Welcome

Element Tree

Build user interfaces visually with drag-and-drop elements, live preview, and a property editor. Connect UI elements to Vue methods with event handlers.

Learn more about Interface Builder →

Code Editor

      store
      public → JsonResponse
    
public function store(Request $request)
{
return User::create($request->validated());
}

Write PHP and JavaScript with syntax highlighting, intelligent autocomplete, and method-level organization. Configure parameters, return types, and visibility.

Learn more about Code Editor →

Project Settings

Capabilities

🔐 Authentication Available

💳 Payments Needs Config

Configure your project's database, environment variables, capabilities, and GitHub integration. Manage branches and deployment settings.

Learn more about Project Settings →

Workflow Overview

A typical workflow in Stellify:

Create a route - Define a new page or API endpoint
Build the UI - Use the Interface Builder to create your layout
Add logic - Write controller methods and Vue component code
Connect events - Wire button clicks to methods
Test - Preview your page and run methods
Export - Push to GitHub or download as a Laravel project

Next Steps

Getting Started - Build your first app
Interface Builder - Build UI visually
Code Editor - Write application logic
Project Settings - Configure your project