Back to Resources
Resource · August 27, 2026

Server Studio

A small dashboard for the local dev servers you actually run. Every project gets a card with its folder, command, and port — start any server with one click. Free, open source, MIT licensed.

$npm install -g server-studio
Server Studio dashboard showing project cards with run commands, ports and live status dots
Why it exists

Switching projects always costs
the same few minutes.

Which port was this one on. What was the exact command. And what is already sitting on that port from a week ago. Multiply that by every project you have open in a month and it adds up to real time, spent on nothing.

01
One card per project

Folder, run command and URL live on the card. Click Run and a real terminal opens in the right directory.

02
Live status

A dot next to each URL shows whether that port is answering right now. No more guessing what is already up.

03
One permanent port

Every project keeps a port nothing else can take, so a card saved today still works in six months.

Install

Up and running in one command

Node.js 18 or newer is the only requirement. No Electron, no background service, and nothing to install inside the app itself.

1

Install it

A global install sets everything up — the app and the Claude Code skill together.

$npm install -g server-studio
2

Open the app

It lands in your Applications folder on macOS. Open it from there, or from the terminal.

$open -a “Server Studio”

On Windows and Linux, run server-studio start from any terminal instead.

3

Add your first project

Click Add server, give it a name, point it at your project folder and type the command you would normally run. That is it.

Prefer not to install globally? npx server-studio install does the same. Add --dry-run to preview first.

How to use it

Add it once, run it forever

1

Fill in the card

Only the name is required. Browse picks the folder, and the URL field takes a bare port — typing 5181 becomes localhost:5181.

2

Click Run

A real terminal opens in the right folder and runs your command. You see the output and can stop it with Ctrl+C like always.

3

Watch the dot

Green means that port is answering, red means nothing is there. It re-checks every 12 seconds — Refresh status forces it immediately.

4

Stop something stuck

The stop button kills whatever process is holding that port — the fastest way out when a server from yesterday is still sitting on it.

The one rule worth following

Give every project one permanent port

Pick a port nothing else uses, then force the dev server to always use that exact port. Most tools quietly pick a different one when the port is busy — that is exactly how a saved entry goes stale.

ToolHow to pin the port
Viteserver: { port: 5181, strictPort: true }
Next.jsnext dev -p 5181
Astroastro dev --port 5181
create-react-appPORT=5181 react-scripts start
Express / Nodeprocess.env.PORT || 5181
PHPphp -S localhost:5181
From your editor, or your AI

You never have to fill a card by hand

Server Studio ships a Claude Code skill. Ask Claude to build something with a dev server and it registers the project itself, picks a free port, and writes that port into the config with the strict flag set.

save this server to Server Studio

The skill is only a wrapper. Registering a project is a plain command with no AI involved — Cursor, Copilot, a Makefile, a shell alias, or you can all call the same thing.

$server-studio add –name “Portfolio Site” –cwd “$PWD” –command “npm run dev” –assign

--assign picks a free port and prints PORT <n>. Running it again for the same project updates the other fields but keeps the port locked.

Free and open source

MIT licensed, zero dependencies

No account, no telemetry, and no server anywhere but yours. Built by Md Mahdi Hasan.

Md Mahdi Hasan
Md Mahdi Hasan
UI/UX Designer & Creative Problem Solver · WPManageNinja
Award-winning designer with 9+ years building high-conversion web experiences and design systems for global brands.
Logo of Md Mahdi Hasan, Mahdi Creates

Let’s Build
Something Meaningful

Whether you need a high-converting marketing site, a scalable design system, or a creative partner to help your team sell more products.

I’m ready to collaborate on your next big launch.

Stay updated
Subscribe to our newsletter for the latest updates and exclusive insights!

Enter your email

admin@mahdicreates.com

Logo of Md Mahdi Hasan, Mahdi Creates

Let’s Build
Something Meaningful

Whether you need a high-converting marketing site, a scalable design system, or a creative partner to help your team sell more products.

I’m ready to collaborate on your next big launch.

Stay updated
Subscribe to our newsletter for the latest updates and exclusive insights!

Enter your email

admin@mahdicreates.com

Logo of Md Mahdi Hasan, Mahdi Creates

Let’s Build
Something Meaningful

Whether you need a high-converting marketing site, a scalable design system, or a creative partner to help your team sell more products.

I’m ready to collaborate on your next big launch.

Stay updated
Subscribe to our newsletter for the latest updates and exclusive insights!

Enter your email

admin@mahdicreates.com

Create a free website with Framer, the website builder loved by startups, designers and agencies.