Black Lives Matter. Support the Equal Justice Initiative and read our statement here.
Web Toolbox

Web Toolbox

Collection of web developer utilities.

Web Toolbox

Collection of web developer utilities

Web Toolbox
Icon made by: Jerry Low

Web Toolbox
Collection of web developer utilities

Powered by Create React App.

Features

Some screen captures of the implemented features...

Online demo

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 Save As... button
  • etc.

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 folder:

  • Windows: releases/Web Toolbox Setup <version>.exe
  • Linux: releases/Web Toolbox-<version>.AppImage
  • MacOS: releases/Web Toolbox-<version>.dmg

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:

  • Windows: build/Web Toolbox Setup <version>.exe
  • Linux: build/Web Toolbox-<version>.AppImage
  • MacOS: build/Web Toolbox-<version>.dmg

Project detail

This project is originaly a fork of React-TypeScript-Electron sample with Create React App and Electron Builder

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 Electron main process source code
  • Hot-reload support for Electron app
  • Electron Builder support

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

Runs the Electron app in the development mode.

The Electron app will reload if you make edits in the electron directory.
You will also see any lint errors in the console.

yarn run electron:build

Builds the Electron app package for production to the dist folder.

Your 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)

License

This project is licensed under the MIT license. For more information see LICENSE.md.

Useful links

react-router-dom

Interesting posts this app has been inspired by

Spinner

Authors

not_used
JSON Formatter JSON Formatter
Base64 Image Encoder Base64 Image Encoder
Regular Expression Tester Regular Expression Tester
Image OCR (extract text from image) Image OCR (extract text from image)

Something missing? Edit this app.

Keyboard Shortcuts

Key Action
/ Focus the search bar
Esc Focus the search bar and cleans it
Select the next search result
Select the previous search result
Enter Open the selected search result
cmdEnter Ctrl+Enter Open the selected search result in a new tab