Multi

Create a custom, lightweight macOS app from a group of websites, complete with:

• Native notifications, file uploads, and dialogs
• Customization options with JSON, CSS, and JavaScript
• CLI for creating and updating apps
• Options for tabbed or floating windows

Watch me create a Slack clone from scratch in 30 seconds (high res video):

JSON configuration

Multi apps store their configuration in a single JSON file. If your app is named Test, then you'll find that file at /Applications/Multi/Test.app/Contents/Resources/config.json. The JSON configuration uses the following top-level fields:

The tabs field is an array of objects with the following fields:

Here's a bare minimum example to recreate the Slack demo video above:

Here's a fancier example that uses the optional fields referenced above:

If your configuration file fails to decode, you can use the settings window to fix the issues. Optional fields will always default to "empty" values (i.e. false, "", []).

Using the CLI: create-mac-app

You can create and update Multi apps entirely from the command-line with the included script. In fact, the Multi configuration UI just runs this script under-the-hood! The create-mac-app script takes its options as environment variables. For instance, here's how you'd create a bare-minimum app named Test:

When you open Test, you'll be greeted with the preferences window, where you can finish configuring your app. If you'd like to configure your app entirely from the command-line, you can set any of the following variables:

Custom JS/CSS

Multi lets you customize any site by injecting JavaScript and CSS on every page in your app. Each custom JS/CSS file is specified with a URL, which gives you a few options for how you want to manage your customizations:

• Host your file online, and use its URL: ex. https://raw.githubusercontent.com/kofigumbs/dotfiles/master/example.js
• Reference a local file on your computer: ex. file:///Users/kofi/workspace/dotfiles/example.js
• Encode your script directly in the JSON using Data URIs (opens in a new tab): ex. data:,console.log%28%27Hello%2C%20from%20Multi%21%27%29%3B%0A

Custom JS/CSS is one of the most important parts of Multi. It lets the main project stay small and focused, while letting you extend it with new features that fit your use case. If you have a neat JS/CSS snippet, you'd like to share, please open an Issue or Pull Request! Here are a few that have come up before: