A desktop workspace for React and Vite apps

Spinning up a new Vite app should take a minute, not a morning of copying commands. In DevWorkspace Pro, New Project scaffolds a Vite app from the React, Vue, Svelte or Vanilla TypeScript template and installs the packages for you. From then on, dev, build, preview and your other scripts are buttons on the Run card.

Core features every project gets

React and Vite apps get the same core tools as every other project:

• Files editor with TypeScript, JavaScript and CSS completions, ⌘+P and project search
• Git Changes, GitHub issues and Actions, and Send to AI
• AI sessions with resume, terminal tabs and Focus Pad
• The ⌘+K switcher, uptime monitoring and Remote SSH

Extras for React and Vite

Vite apps are handled by the Node.js stack, so they also get:

• A Node.js badge and React, Vue, Svelte and Vanilla Vite templates
• A Run card with your package.json scripts and the NPM Dependencies recipe
• A security scan of npm, pnpm, Yarn and Bun lockfiles
• Your package manager as the native runtime, plus Docker Compose services

Your first day with a Vite app

Create or import

Click New Project, select Node.js and pick React in Template. Type a description, and the name and folder follow it until you edit them. In step 2, select Package manager and choose yours.

The app runs create vite@latest with --template react-ts --no-interactive, then <manager> install, and one notification tracks the progress. If a step fails, the notification offers Show output and Open folder.

Already have an app? Drop its folder on the window. If the frontend lives in a subfolder of a larger repository, such as web/, add that subfolder as its own project.

Run it

Click Run on the Run card and <manager> run dev starts in a headless terminal. Click the chip in the status bar to see the output. Scripts like build, preview and test are buttons on the same card.

Hand a task to an AI agent

Press ⌘+J and describe the task, for example "Add a settings page with a form and client-side validation". The agent starts in the app folder, and Shift+Enter gives you a multi-line prompt.

If the work is already written up as a GitHub issue, open it in Git › Issues and click Send to AI. The agent gets the issue and all its comments.

Ship through GitHub

Open Git › Changes and press J and K to step through the files and read each diff. Select the files, write the message and commit. Push from the terminal tab, and follow your test and deploy runs, with job logs, in Git › Actions.

What frontend developers get

An editor that knows your files

The Files tab has completions and syntax checks for .ts, .js, .json, .css, .scss and .html, plus an image preview. ⌘+P uses fuzzy matching, so uc finds UserCard.tsx. Search in files supports match case, whole word and regular expressions.

Lockfile security scan

Health › Security reads your lockfile and checks every package. On Bun with the binary bun.lockb, the tab tells you to run bun install --save-text-lockfile to create bun.lock.

NPM Dependencies recipe

Lists outdated packages with npm outdated.

Docker Compose

If a compose.yaml runs an API or a database next to your app, the Services card can start, stop and restart each service and show its logs.

Focus Pad

Press ⌃+⌥+⌘+T to show an always-on-top checklist for the current task. Turn on the Focus Pad MCP server, and your AI agent can add tasks to it.

Works with your existing setup

The app runs your installed Node.js and package manager, and it does not touch vite.config.ts. Your lint-staged hooks still run on commit. Click IDE to open the app in your editor, and keep DevWorkspace Pro open for terminals, Git, GitHub and agents.

Related pages: /for/nodejs and /for/nextjs. Docs: Projects, Files, Git Changes, Focus Pad.