Collection of web developer utilities
Some screen captures of the implemented features...
The app has been deployed and you can test it right here!. Whenever a feature is only available under
Electron the UI element will be disabled or a corresponding popup message will be displayed. But most of the time we will try to make the feature available online.
Windows, Linux and MacOS versions
Since most of the features don't need to access desktop capabilities,
Electron is actually not absolutely required. However, having a desktop application gives nice things like:
- global OS shortcuts
- dedicated OS window
- ability to select exactly where a file will be stored whenever the SPA offers a
Again feel free to try out the online demo before trying to package the
Electron app for your platform :-) since you will enjoy:
- live updates
- usage as a progressive web app (PWA)
- or just add bookmark(s) to the specific feature(s) of the app you use the most
Builded desktop releases
The following installers (may be old release in some cases) are available under
releases/Web Toolbox Setup <version>.exe
Build releases from source
To build a desktop version just get the source code and run the following command, which will package the installers for all the platforms:
npm install -g yarn npm install npm run electron:build:all
This creates the following installers:
build/Web Toolbox Setup <version>.exe
This project is originaly a fork of React-TypeScript-
Electron sample with Create React App and
Also bootstrapped with Create React App with
--typescript option. On the top of it, the following features have been added with relatively small changes:
- TypeScript supports for
Electronmain process source code
- Hot-reload support for
Project directory structure
my-app/ ├── package.json │ ## render process ├── tsconfig.json ├── public/ ├── src/ │ ## main process ├── electron/ │ ├── main.ts │ └── tsconfig.json │ ## build output ├── build/ │ ├── index.html │ ├── static/ │ │ ├── css/ │ │ └── js/ │ │ │ └── electron/ │ └── main.js │ ## distribution packges └── dist/ ├── mac/ │ └── my-app.app └── my-app-0.1.0.dmg
Available Scripts in addition to the existing CRA ones
yarn run electron:dev
Electron app in the development mode.
Electron app will reload if you make edits in the
You will also see any lint errors in the console.
yarn run electron:build
Electron app package for production to the
Electron app is ready to be distributed!
yarn run release
CHANGELOG generation powered by Conventional Commits. Detail here: https://www.npmjs.com/package/standard-version
Roadmap (of next features)
- CSV Viewer, see this nice wrapper for displaying CSV data in a formatted table
- Code snippets online store with text search capabilities on keywords and programming language type
- Suggests something or add your pull request!
This project is licensed under the MIT license. For more information see
- https://askubuntu.com/a/935249/990301 (to setup *.AppImage in Ubuntu and make it auto discoverable inside your ~/.local/bin/ folder)
Interesting posts this app has been inspired by