Sorry, your browser does not support inline SVG.

Documentation

Code Editor

Write PHP and JavaScript with syntax highlighting

Build application logic with structured code that AI can understand and modify at the statement level.

Overview

The code editor isn't a traditional text editor—it's a structured code builder. Your code is stored as data, not files, enabling AI to make precise, surgical changes without rewriting entire files.

You write:

  • PHP (Laravel): Controllers, models, middleware, and services
  • JavaScript (StellifyJS modules): Vue, React, Svelte components

The editor provides syntax highlighting, intelligent autocomplete, and method-level organization.

Creating Directories

Stellify follows Laravel's directory structure conventions. Organize your files into directories like Controllers, Models, Services, and Middleware—or create custom directories for your project.

Create directory dialog

Creating Files

Choose create a new file and you will see a prompt to name the file.

Create file menu

Adding Methods

Configure method parameters, return types, and visibility.

Method settings panel

Editing Methods

public function store(Request $request): JsonResponse ⚙️
{
$validated = $request->validate([
'email' => 'required|email',
'name' => 'required|string',
]);
$user = User::create($validated);
return response()->json($user, 201);
}

Click the settings cog (⚙️) on any method signature to configure its properties.

Visibility Options

  • public: Accessible from anywhere
  • protected: Accessible from class and subclasses
  • private: Only accessible within the class

Return Types

Common return types include:

  • void - No return value
  • array - Returns an array
  • string, int, bool - Primitive types
  • JsonResponse - Laravel JSON response
  • Collection - Laravel collection
  • Model names like User, Post

Attributes

PHP 8 attributes can be added to methods and properties:

  • #[Route('/api/users', methods: ['GET'])] - Route definitions
  • #[Middleware('auth')] - Apply middleware
  • #[Validate(['email' => 'required|email'])] - Validation rules
  • Custom attributes for your application logic

See the Laravel documentation for more information about PHP 8 attributes.

Adding Statements

Add code outside of methods—imports, class properties, and constants.

Adding statements

Statements appear at the top of your file, before any methods.

Adding Clauses

Clauses are the smallest units of code—language tokens and keywords like variables, method calls, operators, and literals. When typing, intelligent suggestions appear based on context.

Variables
$request Request
$response Response
Methods
request() Helper
Classes
Request Class

Suggestion Types

  • Variables (green): Local and class variables
  • Methods (orange): Available methods and helpers
  • Classes (pink): Importable classes
  • Parameters (purple): Method parameters

Keyboard Navigation

  • ↑/↓: Navigate suggestions
  • Tab or Enter: Select suggestion
  • Esc: Close autocomplete

Code Execution

Test your methods directly in the editor by clicking the Run button.

Run: store()
Input Parameters
{
  "email": "test@example.com",
  "name": "Test User"
}
Output
{
  "id": 1,
  "email": "test@example.com",
  "name": "Test User"
}

Provide input parameters as JSON and see the method output. Useful for testing without making actual HTTP requests.

Bundling Assets

When you have a JavaScript file selected, the file dropdown menu provides two options for bundling your assets.

Option 1: Bundler Service (Recommended)

Host your own bundler service for fast, production-ready builds. You can run it locally or deploy it to a remote server.

  1. Clone the bundler service: github.com/Stellify-Software-Ltd/stellify-bundler-service
  2. Follow the setup instructions in the repository
  3. Configure the service URL in your project settings
  4. Select Bundle with Service from the file dropdown

This approach uses esbuild under the hood and produces optimized bundles quickly.

Option 2: ESM Bundler

For quick testing without setting up a service, use the built-in ESM bundler.

  1. Select your JavaScript file
  2. Choose Bundle with ESM from the file dropdown

This option bundles your code directly in the browser using ESM imports. It's slower than the bundler service but requires no setup.

Next Steps

Next
Interface Builder