Sine is a community-driven replacement for Zen Mods, designed to be a more efficient, powerful, user-friendly, and compatible alternative.
Sine is built with fx-autoconfig and manipulates the inner workings of Zen Mods to provide a clean, intuitive, and sturdy system that makes getting the "github version" easy.ℹ️ NOTE: A manual installation guide is available in the Wiki page for installation.
The automatic installer is the easiest way to set up both Sine and its required component, fx-autoconfig, with minimal effort. Starting with Sine version 1.1.1, installers are available for:
- macOS (x64 and ARM)
- Linux (x64 and ARM)
- Windows (x64 only; no ARM support)
- Download the Installer: Grab the appropriate installer for your operating system from the Sine release page.
- Run the Installer: Execute the downloaded file. Note that the installer fetches the necessary files from the internet, so an active connection is required, also, you cannot install older versions using the automatic method. (ensure you run as administrator if you are on windows.)
- Clear Zen’s Startup Cache:
- Open the Zen Browser and navigate to
about:support(type it into the address bar and press Enter). - In the top-right corner, click the Clear Startup Cache button.
- Open the Zen Browser and navigate to
- Restart Zen: Close and reopen the browser to complete the setup.
That’s it! Sine should now be installed and ready to use.
Sine boasts a powerful suite of easy-to-use tools for everyone, technical, or non-technical. Let's look through some of these features:
Sine has a marketplace that is built-in to the settings gui for easy access. This marketplace is where the user adds and views Sine-compatible mods.
Every dev has that panic when they have to publish their mod to the theme store or have to update it. Sine makes this process simple. All you have to do is add the ID of your mod to the mods.json and map it to your repository. Assuming your project is already Sine-compatible, it'll work just fine. Plus, the developers of Sine are active enough to handle your pull requests in no longer than a day.
Now what about updating?: The Zen theme store requires a pull request for not just creating a mod, but updating too. This, combined with painfully long response times makes dev updates a nightmare. Well fear no more, because Sine does not require update requests and pulls them straight from your repository. This means that you will never have to worry about github issues being outdated or have to tell your user to update to the "github version".
Sine makes the process of adding unpublished mods easy as long as they are Sine-compatible. You simply type in the name of the repository (folder if needed) and Sine handles the rest.
In Sine, updates are never what you think they are. Although Sine updates mods on browser restart, you have the power to turn off updating for certain mods or just altogether. This means that you won't have to worry about your mod getting updated to that new version you don't like.
The other powerful safeguard regarding updating is that Sine won't update your mod to the latest every time, only when the updatedAt property is modified. This means that when you are working on your mod locally and testing changes, your work won't be undone. (but if you're worried an update will happen while you are working on it locally, you can turn off updating for that mod.)
Sine comes with a whole new suite of tools regarding preference management. Let's check them out now!:
- Formatting (all types): One of the best, new features is text formatting. This means you can now have bold, italic, and underlined letters in your label property. ~ for underline, * for italic, and ** for bold. (You may also use two backslashes to just type a * or ~ sign.)
[
{
"type": "checkbox",
"label": "~My~ *cool* ***checkbox*** ~***with***~ **formatting**! \\*\\*Excluded from formatting\\*\\*"
}
]- Size (all types): You can now use a size property to edit the font size of all sorts of stuff! (Works the same as a font size property)
[
{
"type": "text",
"label": "My text",
"size": "20px"
}
]- Text: Sine has a standalone text type for additional context and by using the combination of bold formatting and increased font sizes, you can create a header.
[
{
"type": "text",
"label": "**My Header**",
"size": "20px"
}
]- Separators: And if you thought that headers weren't enough to keep your users on track, we have real separators to help too! These are also compatible with the label property to have text in your separator too.
[
{
"type": "separator",
"label": "Workspace Indicator", <-- Displayed inside of the separator.
"property": "uc.show-workspace-indicator" <-- Yes, you can use the separator as a type of checkbox.
}
]- The border property (string only): If a user is inputting a color into a string input, usually they have to type it in and then check it out by seeing the usage of it in their browser. Using the border property, the user can type in their color and see it applied on the border around the string input live. Set the border property to value for it to have this behavior, you can also set it to a color to just have a static color.
[
{
"type": "string",
"label": "A string that bases its *border* around your input!",
"border": "value" <-- Replaceable with #fff, rgb(25, 25, 25), etc.
}
]- The margin property (all types): In order to have advanced formatting and neatness, we have added the margin property. You can set this to 20px, 1rem, 20px 4px 8px 6px, etc. It works just like a normal margin CSS property.
[
{
"type": "text",
"label": "more text for testing!",
"margin": "0 20px 3px 1px"
}
]- The conditions and operator properties (all types): Isn't it annoying that a setting has to display all the time? What if you could hide it when another setting is not equal to something or is equal to something? Well now you can using the conditions and operator properties! (operator defaults to OR and conditions can be nested):
[
{
"type": "string",
"label": "A hidden setting unless the **uc.essentials.position** setting is set to ~bottom~ and superpins border is set to both or pins",
"conditions": [
{"if": {"property":"uc.essentials.position","value":"bottom"}},
{"not": {"property":"uc.essentials.position","value":"left"}},
{
"conditions": [
{"if": {"property":"uc.superpins.border","value":"both"}},
{"if": {"property":"uc.superpins.border","value":"pins"}}
],
"operator": "OR"
}
]
"operator": "AND"
}
]As you might have guessed, the operator property is the AND or OR condition, so whether or not the conditions should this and that or this or that. (&& or || in JS)
As for the conditions property, it is an array that contains objects which contain if or not properties so if this or if not that. The conditions property is also nestable so it can have an object which contains more conditions and operator properties. (This is an advanced logical operators system so don't worry if you don't understand it right away.)
Sine is designed to be highly compatible and as such, it offers support for userChrome, userContent, original mod format (chrome), mods without a theme.json (which contains info about the mod), and mods with missing properties in their theme.json.
- 📚 Documentation
- 🚀 Releases
- 🤝 Discussions
Built with ❤️ by CosmoCreeper and some amazing supporters!
Licensed under GNU General Public License v3.0.