Coding in Stellify

Stellify provides multiple ways to write and manage code: the built-in editor, importing from files, and importing from GitHub.

Writing Code in the Editor

The Stellify code editor lets you create and edit PHP and Vue files directly in the browser.

Creating Files

1. Navigate to Files in the sidebar
2. Select a directory (or create one)
3. Click New File
4. Choose the file type:
   • controller - Laravel controllers
   • model - Eloquent models
   • middleware - HTTP middleware
   • class - Generic PHP classes
   • js - JavaScript/Vue components

Working with Methods

Methods are functions within your files. Each method has:

• A name
• Parameters (optional)
• A return type (optional)
• A body containing statements

To add a method:

1. Open a file
2. Click Add Method
3. Set the method signature
4. Add the implementation code

The editor parses your code into statements, which are stored as structured data.

Working with Statements

Statements are individual lines or blocks of code. When you write:

$user = User::find($id);
return response()->json($user);

Stellify stores these as two separate statements that can be individually edited, moved, or referenced.

Vue Components

For Vue files (.vue extension):

• Template - defined via UI elements in the Interface Builder
• Script - statements for imports and reactive variables, methods for functions
• Styles - managed through Tailwind classes on elements

Importing Code

From Files

You can import existing PHP or JavaScript files:

1. Go to Import in your project
2. Select From File
3. Upload your .php or .vue file
4. Stellify parses it into the structured format

The importer handles:

• Classes and methods
• Use statements and imports
• Method bodies and parameters

From GitHub

Import directly from a GitHub repository:

1. Go to Import in your project
2. Select From GitHub
3. Enter the repository URL
4. Choose the files or directories to import
5. Stellify clones and parses the code

This works well for:

• Bringing in existing Laravel projects
• Importing specific controllers or models
• Migrating to Stellify incrementally

The Interface Builder

The Interface Builder is a visual tool for creating UI:

• Drag and drop elements
• Set classes and attributes
• Nest elements to create layouts
• Preview changes in real-time

Elements you create in the Interface Builder become the <template> section of your Vue components.

Element Types

| Type | Use For | |------|---------| | s-wrapper | Divs, spans, sections, articles | | s-input | Inputs, buttons, textareas, selects | | s-form | Form containers | | s-media | Images, videos, audio | | s-loop | Repeating content (v-for) |

Connecting UI to Code

To make elements interactive:

1. Select an element
2. Open the Events panel
3. Choose an event (click, submit, change, etc.)
4. Select the method to call

Editor as IDE

Stellify can function as your primary development environment:

Code Editor Features

• Syntax highlighting
• Method navigation
• File tree sidebar
• Search across files

Interface Builder Features

• Visual element tree
• Class editor with Tailwind suggestions
• Real-time preview
• Responsive testing

Workflow Tips

For backend-heavy work: Use the code editor directly. Create controllers, models, and services, then wire them to routes.

For frontend-heavy work: Start in the Interface Builder. Create your layouts and components visually, then add the backing code.

Mixed workflow: Many developers switch between both. Build the UI structure visually, then open the code editor to add complex logic.