Skip to content
A powerful UI toolkit for managing JavaScript apps
Branch: master
Clone or download
Latest commit 07ab85c Jan 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook hello world Jun 7, 2018
electron
icons feature (build): Add configuration for windows build Jun 11, 2018
plop-templates
public hello world Jun 7, 2018
src
stories hello world Jun 7, 2018
.babelrc
.env
.gitignore Removed extraneous files Jul 1, 2018
.prettierrc.json hello world Jun 7, 2018
.travis.yml
README.md
config-overrides.js fix pify import Jun 13, 2018
package.json Improved CSS transforming. Jun 30, 2018
plopfile.js
webpack.config.js
yarn.lock

README.md

🙋‍♂️ Made by @thekitze

Other projects:

  • 🏫 React Academy - Interactive React and GraphQL workshops
  • 💌 Twizzy - A standalone app for Twitter DM
  • 💻 Sizzy - A tool for testing responsive design on multiple devices at once

JSUI

🛠 A tool for visually organizing, creating and managing JavaScript projects.
It doesn't matter if it's a 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

JSUI

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

generate project

Kill a port

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

kill a port


Project dashboard

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

files

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

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

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

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

Environment / Build Setup:

Do this if you want to run the latest code from master locally.
Otherwise please download the latest stable version here.

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

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

# install dependencies
yarn install #or npm install

# start app in dev mode
yarn start

# build electron packages
yarn build

Contributors

Thanks to everyone who contributes to this project.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support JSUI by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.