JSUI

🛠 A tool for visually organizing, creating, and managing JavaScript projects.
It doesn't matter if it's frontend or a backend app, or what framework it's using. If it has a package.json, it belongs here.

⬇️ Download latest version

💸 Support on Open Collective
🐦 Follow updates on Twitter
🙌️ Made by Kitze
🏫️ Supported by React Academy

Features

Organize and group apps
Generate new apps
Search apps
Quick actions
Kill a port
Project dashboard
Search project files
Run scripts
Manage dependencies
Apply plugins
Generate new files

Organize

Import existing projects
Manage and organize projects in groups
Collapse, rename, or delete groups
Mark a project with a red border if it's not using Git yet

Quick actions

Open the project in Finder
Open the project in your editor of choice (configurable in Settings)
Quick preview of package.json
Open the github/bitbucket/gitlab page for the project
Start the project
Remove the project from the dashboard

Search

Easily search all of your projects by pressing Cmd + Shift + P
Choosing a project will navigate to the project dashboard
Expect more Alfred-like functionality soon

Generate an app

Generate a new app using a popular cli
Supports React, Vue, Angular, Gatsby, React Native, Expo, etc.
Configure advanced options for each generator

Kill a port

For times when something annoying is running on a port and the process just can't be killed

Project dashboard

Files

Note: This feature must be enabled from the Settings first

Index and display a list of all of the folders and files in a project
Click a file to quickly preview it
Press Cmd + Shift + N to quickly navigate and preview a file

Run scripts

See a list of all the scripts and run them with a press of a button
Run multiple scripts at once
The scripts run in an integrated Terminal that supports multiple tabs so you can see the output, or you can minimize it if you don't care

Dependencies

See two separate lists of the project dependencies and dev dependencies
Easily install a dependency and specify a version
Move a dependency to dev dependencies and vice-versa
Update the version of a dependency to the latest version

Plugins

Plugins have the ability to install new dependencies, remove dependencies, modify scripts, remove, and add new files to a project
Right now the following plugins are available:
- Storybook: Installs storybook and adds the needed files to the project
- Plop: Adds the plop generator to the project. It also adds a default plop-templates folder, a plopfile.js.
- Add .env: Adds an .env file to the project. Soon this file will be editable through UI.
- Rewire: Installs react-app-rewired and adds a default config-overrides.js file

Note: plugins will be separated from the repo soon so anyone can publish their own plugin

Generate files

Automatically detect a plopfile.js and quickly generate files from existing templates.
If plopfile.js is not present, or your not familiar with plop run the Plop plugin and it will generate the needed files for you

Environment / Build Setup:

# clone repo
git clone https://github.com/kitze/JSUI.git

# install yarn (assuming you don't already have Yarn installed)
npm install -g yarn

# install dependencies
yarn install #or npm install

# start app in dev mode
yarn start #or npm start

# build electron packages
yarn build-react-copy-electron && electron-builder

gsimone / JSUI