Sorry, your browser does not support inline SVG.

Documentation

Tour of the Platform

A walkthrough of Stellify's features

Video Tour

The Editor at a Glance

The whole platform is one screen: a canvas showing the page you're building, and a navigation bar across the top that selects what you're working on. There's no file tree taking up half the screen — you navigate by route, file, and method instead, which is how you actually think about a Laravel app.

Navigation Bar

/
Project ▼
/
Home ▼
/
⎇ main ▼
Local
M

The left side is a breadcrumb of what you're editing; the right side switches how you see it:

  1. Project — switch between your projects (and any you collaborate on)
  2. Route — pick the page or API endpoint to work on; the canvas follows
  3. Branch — switch or create branches
  4. Environment badge — which environment you're viewing
  5. Interface / Code / Split — visual builder, code editor, or both side by side
  6. Settings — project configuration: database, capabilities, GitHub, team
  7. Profile — account, API tokens, preferences

Every dropdown is covered in detail in Navigation.

Interface View

Interface
Code
Split
Welcome
Element Tree

The canvas is your page, rendered live. Click an element to select it, edit its tag, Tailwind classes, and text in the property panel, and wire its events to methods. The element tree on the side shows the page structure and is where you add and reorder elements.

Interface Builder in detail →

Code View

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

Code view opens one method at a time — selected from the file and method dropdowns — rather than scrolling through whole files. You get syntax highlighting, context-aware autocomplete, and a Run button that executes the method with JSON input right there in the editor.

Code Editor in detail →

AI Chat

The chat panel is available in every view. It operates on the same routes, files, methods, and elements you're looking at — describe a change and watch it land in the canvas or the code view. Prefer your own tooling? Connect Claude Code or Cursor via the MCP server and work from your IDE instead.

The Loop

Building a feature in Stellify usually looks like:

  1. Route — create the page or endpoint from the route dropdown
  2. Scaffold — let the agent create the resource stack, or add files from the file dropdown
  3. Wire — point the route at a controller method; connect UI events to methods
  4. Refine — edit the methods and elements that matter, by hand or by prompt
  5. Verify — run methods with test input; run your test file; preview the page live
  6. Ship — merge your branch and export or push to GitHub

Next Steps

Next
Navigation