Other projects:
- Sizzy - The browser for developers and designers
- React Academy - Interactive React and GraphQL workshops
- Twizzle - A standalone app for Twitter DM & tweeting
JSUI
A tool for visually organizing, creating and managing JavaScript projects. The framework and stack don’t matter. If the project has a package.json
, it belongs here.
![JSUI](https://camo.githubusercontent.com/53f92550da90a57ca9ec17975c3991bf279b6a64/68747470733a2f2f692e696d6775722e636f6d2f385654483347762e706e67)
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
- Kill all node processes
Keyboard Shortcuts
Project View
e
- open project in editor
r
- refresh project info, files, scripts, etc.
Terminal
ctrl + c
- kill current process
ctrl + r
- restart current process
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
![](https://camo.githubusercontent.com/a1dc84035e85ceda7bec11bc14a5d95c72846c7e/68747470733a2f2f692e696d6775722e636f6d2f587759583845452e676966)
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
![generate project](https://camo.githubusercontent.com/ef328536b4f6bc07b7a09b44ef07ad304425d525/68747470733a2f2f692e696d6775722e636f6d2f6d43496b7a31742e676966)
Kill a port
- For times when something annoying is running on a port and the process just can’t be killed
![kill a port](https://camo.githubusercontent.com/a87c63bf4a76647b22d913771110c82e3d2c2b8a/68747470733a2f2f692e696d6775722e636f6d2f4f76726e6146552e676966)
Project dashboard
![project dashboard](https://camo.githubusercontent.com/4dd0fd20836a49d649e0c0e69607da3ade5d1c53/68747470733a2f2f692e696d6775722e636f6d2f55504a4f6d63432e706e67)
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
![files](https://camo.githubusercontent.com/5b5791ea13f6584f94551329f1a50c26fa517750/68747470733a2f2f692e696d6775722e636f6d2f7975796c6548652e676966)
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
![scripts](https://camo.githubusercontent.com/52f4122c66d837813ca462ce5a09a01f51798f15/68747470733a2f2f692e696d6775722e636f6d2f62647472564b342e676966)
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
![dependencies](https://camo.githubusercontent.com/cf5f96942c6d1bf4e285672ac8368990f00b9aa7/68747470733a2f2f692e696d6775722e636f6d2f4c785165326d662e676966)
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
![plugins](https://camo.githubusercontent.com/8cd930060d4818780f8bb7f259d5c88a9ac5c86f/68747470733a2f2f692e696d6775722e636f6d2f38334f614d4d4d2e676966)
Generate files
- Automatically detect a
plopfile.js
and quickly generate files from existing templates.
- If
plopfile.js
is not present or you are not familiar with plop run the Plop
plugin and it will generate the needed files for you
![](https://camo.githubusercontent.com/8a52341147db29716be926ee4d45124c8a95179d/68747470733a2f2f692e696d6775722e636f6d2f6e4a51735177452e676966)
Download Details:
Author: kitze
GitHub: https://github.com/kitze/JSUI
#javascript #programming