Browser IDE

The StackMivo IDE is a full development environment that runs entirely in your browser. No local setup, no Docker, no environment configuration: everything runs on a managed container.

IDE overview

The IDE is split into several panels:

File Explorer

The left sidebar shows your project's full directory tree.

• Click a file to open it in the editor
• Expand/collapse folders by clicking them
• Files are colour-coded by type (PHP, JS, CSS, Blade, etc.)

Creating files and folders:

• Right-click a folder to see the context menu
• Options include: New File, New Folder, Upload File

Uploading files:

• Drag and drop files onto the explorer
• Or use the Upload option in the context menu
• Useful for adding images, config files, or seed data

Code Editor

The editor is built on Monaco Editor (the same engine as VS Code).

• Full syntax highlighting for PHP, JavaScript, TypeScript, CSS, Blade, JSON, and more
• Code folding, line numbers, and a minimap on the right
• Auto-completion for common patterns
• Save: Ctrl + S (Windows/Linux) or Cmd + S (Mac)

Unsaved changes are indicated in the tab bar. Save before running or deploying to ensure your latest code is live.

AI Chat sidebar

The right-side chat panel lets you generate and modify code using natural language. The AI has full context of your existing project.

How to use:

1. Type your request in the chat input at the bottom of the sidebar
2. The AI generates code and shows which files it will modify
3. Review the proposed changes
4. Click Apply to write the changes to your project files
5. The modified files open automatically in the editor

Example requests:

Add a search bar to the tasks list that filters by title

Create a middleware that logs all incoming requests to the database

Refactor the UserController to use a repository pattern

Revert last change: If an AI-generated change broke something, click Revert in the header toolbar to undo the last set of AI modifications.

Terminal

The integrated terminal runs inside your project container. Use it like any Linux terminal.

Common commands:

php artisan migrate
php artisan make:controller ProductController
composer require spatie/laravel-permission
npm install && npm run build
php artisan tinker

Toggle terminal visibility: Click the terminal icon in the bottom toolbar or drag the panel divider.

Running your project

Click Run in the IDE header to start your application.

1. The container compiles assets and starts services
2. A Live App URL appears in the header (e.g. https://myapp123.stackmivo.com)
3. Click the URL or the Open in new tab button to view your app
4. The built-in preview panel can also load the URL inline

Click Stop to shut down the running instance.

Visual editing

Once your app is running, you can edit text and styling directly in the live preview: no chat prompt, no manual file hunting.

Turning on visual edit mode

Click the Visual Edit button in the preview's chrome bar (top-left, next to the URL field). The button turns red while the mode is active. Click it again to leave the mode.

Selecting an element

With visual edit on, move your cursor over the preview:

• Hover an element, and a blue outline highlights it
• Click, and the outline turns amber and a side panel opens on the right with that element's properties

Links inside the preview still navigate normally, so you can click around to reach the page you want before selecting something on it. Wrapper tags like html, body, script, and iframe are skipped, so you'll always land on a visible element.

Editing text

If the selected element has direct text content, the side panel shows a Text section with an inline editor. Change the text and click out. The change appears in the preview immediately and writes through to the matching template file when you save.

Text edits are matched by literal string replacement across your view files (Blade, Vue, JSX/TSX, HTML, and other templates under resources/). Controllers, models, and config files are never touched.

Editing styles

The side panel groups every style property into collapsible sections:

Every change is applied to the live preview the moment you adjust the value, so you can iterate visually.

Saving and discarding

• Click the × in the panel header or click Visual Edit again to exit the mode
• If you have unsaved changes, a confirmation dialog asks you to Save Changes or Discard
• Save Changes writes everything to disk and reloads the preview
• Discard drops all visual edits in this session

Saved style edits are written to a generated file at public/visual-edits.css, which StackMivo links from your project's layout automatically. You can review or edit this file like any other in the editor.

Project settings

The Settings tab in the workspace groups per-project configuration into sections in a left navigation:

Environment variables

Open Settings → ENV Variables to manage your project's environment variables. See Environment Variables for the full reference.

• Add, edit, or delete environment variables
• Changes are written to the container's .env file immediately and picked up by the running app on the next request
• If a change doesn't seem to apply, restart the app from the IDE

Downloading your project

Click Download ZIP in the header toolbar to download the full project as a .zip file. This includes all files, migrations, and assets.

Two restrictions apply:

• ZIP download requires a Build plan — on the Free and Prototype tiers the button is disabled with a tooltip explaining why
• Only the project's creator can download it; team members with shared access can edit in the IDE but not export the ZIP

Sharing a project

Click Share in the IDE header to copy a link to your running app. The link points to:

• The project's deployed URL if it has been deployed (Laravel Cloud, custom domain)
• Otherwise the project's live container URL (e.g. https://myapp123.stackmivo.com)
• A local preview URL as a fallback

Giving someone access to a project

Project access is managed in Team Settings, not in the IDE. To let another team member open a project:

1. Go to Team Settings in the sidebar (you must be the team owner)
2. Find the member in the Members list
3. Tick the checkbox next to each project you want to grant them access to
4. Click Save Access for that member

By default, team members can't see any of the team's projects. The owner and the original creator of a project always have access automatically; everyone else needs an explicit grant. See Teams for the full flow, including invitations.

StackMivo does not currently support public share links, expiring links, or view-only access. Sharing is always with named team members and grants full editing capability.

Publishing and deploying from the IDE

The Publish menu in the IDE header is the single entry point for getting your project in front of users. It shows:

• Custom domain — connect your own domain to the hosted project. See Custom Domains.
• Deployment providers — with a status chip per provider (Live, Deploying, or Connected).

The Deploy tab holds the full deployment view: a prerequisite checklist, deployment summary, live URL, and recent deployment history with logs. Supported targets:

GitHub: Sync the project to a GitHub repository. See the GitHub Integration guide for setup, and Version Control for the workspace GitHub Sync settings (connected repository, auto-commit, and commit-message prefix).

Laravel Cloud: Deploy directly to managed Laravel Cloud infrastructure. See the Laravel Cloud guide for setup.

Laravel Forge: Deploy to your own servers through your Forge account. See the Laravel Forge guide for setup.

Keyboard shortcuts