ZenBrowserMirrors/docs
1
0
Fork 0
mirror of https://github.com/zen-browser/docs.git synced 2025-07-08 09:20:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

Migrated project from Quartz to Next.js with Fumadocs

Browse source
This commit is contained in:
Jonas List 2025-04-14 22:08:00 +02:00
parent d0e8fca4a6
commit ff60b8afc1
383 changed files with 8990 additions and 152443 deletions
Download patch file Download diff file Expand all files Collapse all files

142
content/docs/benchmarks.mdx Normal file
View file

@ -0,0 +1,142 @@
---
title: Benchmarks
icon: BarChartIcon
---
import { Callout } from 'fumadocs-ui/components/callout';
These benchmarks were performed on a device with the following specifications:
- Windows 11
- Intel® Core i5-13600K Processor
<Callout type="warn">
These benchmarks only focus on specific performance aspects of a browser, and your personal results may vary drastically depending on your hardware.
This page is not a definitive indicator of overall browser speed.
</Callout>
<Callout title="Where are the latest versions?">
This page is maintained by [NOCanoa](https://github.com/NOCanoa). These benchmarks are only updated when he is available.
</Callout>
## Browserbench.org
<Callout type="none">
[Browserbench.org website](https://browserbench.org/)
</Callout>
### Speedometer 3.0
<Callout type="none">
[Speedometer 3.0 benchmark](https://browserbench.org/Speedometer3.0/)
</Callout>
| Version | Score |
| ------------------- | ----- |
| 1.0.1-a.10-opt | 25.4 |
| 1.0.1-a.4-opt | 25.6 |
| 1.0.1-a.2-opt | 25.4 |
| 1.0.0-a.39-opt | 25.6 |
| 1.0.0-a.37-opt | 25.5 |
| 1.0.0-a.34-opt | 21.6 |
| 1.0.0-a.33-opt | 21.7 |
| 1.0.0-a.32-opt | 21.8 |
| 1.0.0-a.13-opt | 21.1 |
| 1.0.0-a.12-opt | 21.5 |
| 1.0.0-a.11-opt | 20.8 |
| 1.0.0-a.10 | 21.2 |
| Vivaldi 6.7.3329.39 | 27.8 |
| FF nightly 130.0a1 | 27.0 |
| Librewolf 128.0-2 | 20.2 |
```mermaid
xychart-beta
title "Performance over time (Higher is better)"
x-axis [0.10, 0.11, 0.12, 0.13, 0.32, 0.33, 0.34, 0.37, 0.39, 1.2, 1.4,1.10]
y-axis "Benchmark Points" 0 --> 30
bar [21.2,20.8,21.5,21.1,21.8,21.7,21.6,25.5,25.6,25.4,25.6,25.4]
line [21.2,20.8,21.5,21.1,21.8,21.7,21.6,25.5,25.6,25.4,25.6,25.4]
```
### JetStream 2.2
<Callout type="none">
[JetStream 2.2 benchmark](https://browserbench.org/JetStream/)
</Callout>
| Version | Score |
| -------------- | ----- |
| 1.0.1-a.4-opt | 240 |
| 1.0.1-a.2-opt | 237 |
| 1.0.0-a.39-opt | 238 |
| 1.0.0-a.37-opt | 239 |
| 1.0.0-a.34-opt | 228 |
```mermaid
xychart-beta
title "Performance over time (Higher is better)"
x-axis [0.34,0.37,0.39,1.2,1.4]
y-axis "Benchmark Points" 0 --> 260
bar [228,239,238,237,240]
line [228,239,238,237,240]
```
### MotionMark
<Callout type="none">
[MotionMark benchmark](https://browserbench.org/MotionMark1.3.1/)
</Callout>
| Version | Score |
| -------------- | ----- |
| 1.0.1-a.4-opt | 1515 |
| 1.0.1-a.2-opt | 1527 |
| 1.0.0-a.39-opt | 1538 |
| 1.0.0-a.37-opt | 1562 |
| 1.0.0-a.34-opt | 1464 |
```mermaid
xychart-beta
title "Performance over time (Higher is better)"
x-axis [0.34,0.37,0.39,1.2,1.5]
y-axis "Benchmark Points" 0 --> 1600
bar [1464,1562,1538,1527,1515]
line [1464,1562,1538,1527,1515]
```
---
Archived Benchmarks (Basemark Web 3.0)
### Basemark Web 3.0
<Callout type="none">
[Basemark Web 3.0 benchmark](https://web.basemark.com/)
</Callout>
| Version | Score | CSS | HTML5 | Page Responsiveness |
| ------------------ | ------- | ------ | ------ | ------------------- |
| 1.0.0-a.X | --- | --- | --- | --- |
| 1.0.0-a.34-opt | 1920 | 59% | 91% | 91% |
| 1.0.0-a.33-opt | 1957 | 59% | 91% | 91% |
| 1.0.0-a.32-opt | 1732 | 59% | 91% | 90% |
| 1.0.0-a.15-opt | 2141 | 59% | 91% | 90% |
| 1.0.0-a.13-opt | 1658 | 59% | 91% | 90% |
| 1.0.0-a.12-opt | 1874 | 59% | 91% | 91% |
| 1.0.0-a.11-opt | 1678 | 59% | 91% | 91% |
| 1.0.0-a.10 | 1660 | 59% | 91% | 91% |
| 1.0.0-a.9 | 470 | | | |
| 1.0.0-a.8 | 446.74 | 59% | 91% | 96% |
| 1.0.0-a.7 | 1964.43 | 59% | 91% | 91% |
| 1.0.0-a.6 | 1747.98 | 59% | 91% | 91% |
| 1.0.0-a.4 | 470.49 | 59% | 91% | 97% |
| 1.0.0-a.3 | 475.52 | 59% | 91% | 97% |
| Librewolf 128.0-2 | 1953.65 | 59.66% | 89.01% | 91.72% |
| FF nightly 130.0a1 | 1912.77 | 59.66% | 90.91% | 91.72% |
```mermaid
xychart-beta
title "Performance over time (Higher is better)"
x-axis [.3, .4, .6, .7, .8, .9, .10, .11, .12, .13, .15, .32, .33, .34]
y-axis "Benchmark Points" 0 --> 2100
bar [475.52, 470.49, 1747.98, 1964.43, 446.74, 470, 1660.89, 1678.49, 1874.49, 1658.87, 2141.63, 1732, 1957, 1920]
line [475.52, 470.49, 1747.98, 1964.43, 446.74, 470, 1660.89, 1678.49, 1874.49, 1658.87, 2141.63, 1732, 1957, 1920]
```

80
content/docs/contribute/code-of-conduct.mdx Normal file
View file

@ -0,0 +1,80 @@
---
title: Code of Conduct
description: >-
This is the code of conduct for the community. It outlines the expectations
for behavior and how to report unacceptable behavior.
---
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
- Focusing on what is best not just for us as individuals, but for the overall community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others’ private information, such as a physical or email address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and it also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [insert contact method]. All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series of actions.
**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at https://www.contributor-covenant.org/version/2/1/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
[homepage]: https://www.contributor-covenant.org

66
content/docs/contribute/contributing.mdx Normal file
View file

@ -0,0 +1,66 @@
---
title: Contributing
description: Contributing to Zen Browser
---
import { GlobeIcon, BookAIcon, BookIcon } from 'lucide-react'
import { GithubInfo } from 'fumadocs-ui/components/github-info';
Thank you for considering contributing to Zen Browser! We appreciate your time and effort in improving this project. The following is a set of guidelines for contributing to Zen Browser. These guidelines are intended to make it easier for you to get involved.
## Types of Contributions
We welcome a wide range of contributions, including but not limited to:
- **Bug Fixes**: Resolve existing issues in the code.
- **New Features**: Implement new features or enhance existing ones.
- **Documentation**: Improve the clarity and depth of documentation.
- **Code Refactoring**: Clean up the code to improve readability, performance, or maintainability.
- **UI/UX Enhancements**: Improve the user interface or user experience of Zen Browser.
## Getting Started
To help you get started with contributing, we have created separate guides for each repository:
<Cards>
<Card title="www" icon={<GlobeIcon />} description="Getting Started with Zen's Homepage Development" href="/contribute/www" />
<Card title="docs" icon={<BookIcon />} description="Getting Started with Documentation Contributions" href="/contribute/docs" />
<Card title="translation" icon={<BookAIcon />} description="Getting Started with Translations" href="/contribute/translation" />
</Cards>
Please follow the appropriate guide based on the repository you want to contribute to.
### Reporting Bugs
If you find a bug, please open an issue and describe the problem in detail. Include steps to reproduce the bug, the expected behavior, and any relevant information about your environment. Please verify that the bug has not been reported already.
<Callout type="info">
Open the issue in it's corresponding GitHub repository:
- [Desktop Browser App](https://github.com/zen-browser/desktop/issues)
- [Zen's Custom Mods](https://github.com/zen-browser/theme-store)
- [Zen's Homepage Website](https://github.com/zen-browser/www)
- [This documentation Website](https://github.com/zen-browser/docs)
</Callout>
### Suggesting Features
![Discuss](/assets/contribute/discuss.png)
We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category.
_Use the correct Github Repository based on the list above_
---
## Code of Conduct
Please note that this project is governed by a [Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project, you agree to abide by its terms.
## License
By contributing to Zen Browser, you agree that your contributions will be licensed under the [MPL-2.0 License](https://github.com/zen-browser/desktop/blob/main/LICENSE).
---
Thank you for your interest in contributing to Zen Browser! We look forward to your contributions.

116
content/docs/contribute/docs.mdx Normal file
View file

@ -0,0 +1,116 @@
---
title: Docs
description: Getting started with contributing to the documentation for Zen Browser.
---
This guide will help you get started with contributing to the documentation for Zen Browser. The documentation is crucial for helping users and developers understand and use the project effectively. We use Fumadocs for generating the static documentation site.
## Prerequisites
Before you begin, ensure you have the following tools installed:
- [**Git**](https://git-scm.com/): Version control system to clone the repository and manage your code.
- [**Node.js**](https://nodejs.org/): Required for building the NextJS site.
- [**npm**](https://www.npmjs.com/): Node package manager, which comes with Node.js.
- **IDE of your choice**: You can use any text editor or IDE of your choice.
## 1. Fork the Repository
1. Navigate to the [Zen Browser Documentation Repository](https://github.com/zen-browser/docs).
2. Click on the "Fork" button at the top right of the repository page to create a personal copy of the repository under your GitHub account.
## 2. Clone the Repository
Once you have forked the repository, clone it to your local machine using the following command:
```bash
git clone https://github.com/<your-username>/docs.git
cd docs
```
Replace `<your-username>` with your GitHub username.
## 3. Install Dependencies
Navigate to the project directory and install the required dependencies:
```bash
npm install
```
This command installs all the necessary packages listed in the `package.json` file.
## 4. Open the Project in IDE
Open the cloned repository folder in your IDE to begin editing:
1. Open IDE.
2. Select "Open Folder" or "File > Open Folder".
3. Navigate to the cloned repository folder.
## 5. Make Your Changes
You can now start editing the documentation. The project structure is as follows:
- **`content/docs/`** - contains the Markdown files for the documentation.
- **`public/assets/`** - contains images and other static assets used in the documentation.
- _**`src/`** - contains the source code for the documentation site. No changes are required here._
### Writing Guidelines
- Follow the existing structure and formatting conventions.
- Use clear and concise language.
- Include examples and code snippets where applicable.
- Ensure all links and references are accurate.
## 6. Preview the Documentation
To preview the documentation site locally, run the following command:
```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```
This command starts a local server running on `http://localhost:3000` that you can access from your browser. The site will automatically reload whenever you make changes to the Markdown files.
## 7. Commit and Push Your Changes
Once you are satisfied with your changes, commit them to your local repository:
```bash
git add .
git commit -m "Description of your changes"
```
Push your changes to your forked repository:
```bash
git push origin main
```
## 8. Create a Pull Request
After pushing your changes, go to the original Zen Browser Documentation Repository and submit a pull request:
1. Navigate to the repository you forked from.
2. Click on the "Pull Requests" tab.
3. Click on "New Pull Request" and select your branch.
4. Provide a clear and concise description of your changes.
5. Submit the pull request.
Your pull request will be reviewed by the maintainers, and you may be asked to make some adjustments. Once approved, your changes will be merged into the main branch.
## Additional Resources
- [Zen Browser Documentation Repository](https://github.com/zen-browser/docs)
- [Fumadocs Documentation](https://fumadocs.vercel.app/docs/ui)
- [Contribution Guidelines](/contribute/contributing)
- [Code of Conduct](/contribute/code-of-conduct)
---
Thank you for contributing to Zen Browser's documentation! Your contributions help users and developers understand and effectively use the project.

8
content/docs/contribute/meta.json Normal file
View file

@ -0,0 +1,8 @@
{
"title": "Contribute",
"icon": "GitMerge",
"pages": [
"contributing",
"..."
]
}

65
content/docs/contribute/translation.mdx Normal file
View file

@ -0,0 +1,65 @@
---
title: Translations
description: How to contribute to the translations for Zen Browser.
---
Thank you for your interest in contributing to the translations for Zen Browser! Ensuring that Zen Browser is accessible to users around the world is a key priority, and your contributions help make this possible. This guide will walk you through the process of getting started with translating Zen Browser using Crowdin.
<Callout type="info">
If you want to translate a language that is not currently available in the Crowdin project, please reach out to the developers on Discord. We’ll be happy to add it for you!
</Callout>
## Prerequisites
Before you begin, you will need to have the following:
- **A Crowdin Account**: You can sign up for free at [Crowdin](https://crowdin.com).
- **Basic Knowledge of the Language**: A good understanding of the language you are translating to is essential.
## Step 1: Join the Zen Browser Translation Project
1. Visit the [Zen Browser Translation Project on Crowdin](https://crowdin.com/project/zen-browser).
2. Click on the "Join" button to become a contributor to the project.
3. Select the language you want to contribute to from the list of available languages.
## Step 2: Start Translating
Once you have joined the project and selected your language, you can start translating:
1. Navigate to the language you selected.
2. You will see a list of files that need translation. Click on any file to start translating.
3. Translate the strings from English to your selected language. Ensure that the translations are accurate and clear.
4. Save your translations as you work.
## Step 3: Review and Suggest Improvements
In addition to translating, you can also review translations made by others:
1. Go to your selected language.
2. Review the translations and suggest improvements if necessary.
3. Approve translations that are correct and meet the quality standards.
## Step 4: Communicate with Other Translators
Crowdin provides communication tools to collaborate with other translators:
- **Comments**: Leave comments on specific strings if you have questions or suggestions.
- **Discussions**: Participate in project-wide discussions to coordinate with other translators.
## Step 5: Stay Updated
Crowdin allows you to track the progress of the translation project and stay updated on new strings that need translation:
- **Notifications**: Enable notifications in your Crowdin account to be alerted when new content is available for translation.
- **Progress Tracking**: Use the progress bars to see how much of the translation is complete for your selected language.
## Additional Resources
- [Zen Browser Translation Project on Crowdin](https://crowdin.com/project/zen-browser)
- [Crowdin Documentation](https://support.crowdin.com/)
- [Contribution Guidelines](/contribute/contributing)
- [Code of Conduct](/contribute/code-of-conduct)
---
Thank you for helping to make Zen Browser accessible to a global audience! Your contributions are invaluable.

111
content/docs/contribute/www.mdx Normal file
View file

@ -0,0 +1,111 @@
---
title: Homepage
description: Learn how to set up and contribute to the development of Zen Browser's homepage.
---
This guide will walk you through the steps required to set up and contribute to the development of Zen Browser's homepage. Whether you're fixing bugs, adding new features, or enhancing the design, this guide will help you get started.
## Prerequisites
Before you begin, make sure you have the following installed on your machine:
- [**Git**](https://git-scm.com/): Version control system to clone the repository and manage your code.
- [**Node.js**](https://nodejs.org/): JavaScript runtime for running the development server and building the project.
- [**npm**](https://www.npmjs.com/): Node package manager, which comes with Node.js.
## Step 1: Fork the Repository
1. Navigate to the [Zen Browser Website Repository](https://github.com/zen-browser/www).
2. Click on the "Fork" button at the top right of the repository page. This creates a personal copy of the repository under your GitHub account.
## Step 2: Clone the Repository
Once you have forked the repository, clone it to your local machine using the following command:
```bash
git clone https://github.com/<your-username>/www.git
cd www
```
Replace `<your-username>` with your GitHub username.
## Step 3: Install Dependencies
Navigate to the project directory and install the required dependencies:
```bash
npm install
```
This command installs all the necessary packages listed in the `package.json` file.
## Step 4: Build the Project
To build the project files:
```bash
npm run build
```
This command will compile and process all the source files into a production-ready format.
## Step 5: Start the Development Server
After installing the dependencies, you can start the development server:
```bash
npm run dev
```
This command will start a local server and open the homepage in your default web browser. The server will automatically reload whenever you make changes to the code.
## Step 6: Make Your Changes
You can now start making changes to the homepage. The project structure is as follows:
- **src/**: Contains the source code for the homepage.
- **public/**: Contains static files like images and HTML templates.
- **package.json**: Lists the project's dependencies and scripts.
Feel free to explore and modify the files to implement new features or fix bugs.
## Step 7: Test Your Changes
Before submitting your changes, make sure they work as expected. Check the functionality across different pages and ensure that your changes do not introduce any new issues.
## Step 8: Commit and Push Your Changes
Once you are satisfied with your changes, commit them to your local repository:
```bash
git add .
git commit -m "Description of your changes"
```
Push your changes to your forked repository:
```bash
git push origin main
```
## Step 9: Create a Pull Request
After pushing your changes, go to the original Zen Browser Homepage Repository and submit a pull request:
1. Navigate to the repository you forked from.
2. Click on the "Pull Requests" tab.
3. Click on "New Pull Request" and select your branch.
4. Provide a clear and concise description of your changes.
5. Submit the pull request.
Your pull request will be reviewed by the maintainers, and you may be asked to make some adjustments. Once approved, your changes will be merged into the main branch.
## Additional Resources
- [Zen Browser Homepage Repository](https://github.com/zen-browser/www)
- [Contribution Guidelines](/contribute/contributing)
- [Code of Conduct](/contribute/code-of-conduct)
---
Thank you for contributing to Zen Browser's homepage! Your contributions help make the project better for everyone.

130
content/docs/faq.mdx Normal file
View file

@ -0,0 +1,130 @@
---
title: FAQ
icon: Home
---
import { Callout } from 'fumadocs-ui/components/callout';
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
Welcome to the Zen Browser FAQ section! Here, you'll find answers to common questions and helpful tips to enhance your experience with Zen Browser. If your question isn't covered here, feel free to explore our community forums [r/zen_browser](https://www.reddit.com/r/zen_browser) or reach out to the support team.
<InlineTOC items={toc} />
## How can I use horizontal tabs?
Zen Browser will not support horizontal tabs in the near future. The decision to focus on **Vertical Tabs** is a core design choice, with the entire Zen Browser experience built around this concept. This approach is intended to maximize screen space and improve navigation, making vertical tabs an essential part of Zen's philosophy.
## Will there be mobile version for Zen Browser?
At the moment, our team does not have the time or resources to develop Android or iOS versions of Zen Browser. Additionally, we believe that Zen’s unique features, particularly its design around vertical tabs, do not translate well to the mobile form factor. As such, we do not currently have plans to develop a mobile version of Zen Browser.
## Why can't Zen Browser play DRM-protected content?
<Callout type="warn">
This only affects Microsoft Windows and MacOS
</Callout>
<Callout type="none" title="What is DRM?">
[Digital Rights Management](https://wikipedia.org/wiki/Digital_rights_management) (DRM) is a technology used to control how digital content, such as videos and music, can be accessed and used. DRM is commonly used by streaming services to protect copyrighted content. When you try to play DRM-protected content, the website verifies if the necessary DRM software is available on your browser. Most browsers use [**Widevine**](https://www.widevine.com), a DRM technology developed by Google, to facilitate this.
</Callout>
Zen Browser currently lacks DRM-support, because it does not have a Widevine license. Acquiring such a license requires the payment of large fees (at least $5,000). Acquiring this license is financially unresponsible for the developer of Zen. This means that DRM-protected media cannot be played in Zen Browser for the foreseeable future.
We have to also consider that in order to be able to apply for this license, Zen must be a part of a company with size at least as big as Mozilla or Brave.
<Callout type="none" title="Which Services Are Affected?">
Due to the lack of DRM support, you will not be able to stream content from the following services in Zen Browser:
- **HBO Max**
- **Netflix**
- **Spotify**
- **Disney+**
- **Amazon Prime Video**
- **Apple Music**
- **Google Play Movies & TV**
- **And possible other services that use DRM not listed here**
</Callout>
<Callout type="info" title="Alternative solutions">
- Use a browser that has a Widevine license, such as [**Mozilla Firefox**](https://www.mozilla.org/firefox/), when streaming DRM-protected content.
- Use the native desktop app for the service you want to use
</Callout>
## How do I know Zen is safe?
Zen Browser is designed with a focus on security and privacy. Additionally, the browser's codebase is derived from Firefox, a well-known and trusted open-source project. Users can verify the safety of the browser by reviewing the source code available on [GitHub](https://github.com/zen-browser/desktop). Regular updates and community engagement also contribute to its security.
## How can I support Zen?
If you'd like to support the development of Zen Browser, you can do so through their official donation platforms. Contributions help the small team continue improving the browser and adding new features. You can support Zen Browser in the following ways:
- **Patreon**: Visit [https://www.patreon.com/zen_browser](https://www.patreon.com/zen_browser) to make recurring donations and gain access to updates and possible rewards.
- **Ko-fi**: You can also support Zen Browser with one-time donations via [https://ko-fi.com/zen_browser](https://ko-fi.com/zen_browser).
Your support helps the team maintain and enhance Zen Browser for everyone!
## How do I use the Split View feature?
<Callout type="info" title="Tip">
Use shortcuts to perform Split View actions faster!
</Callout>
1. Select multiple tabs by left-clicking them while holding the `Ctrl` key, or left-click 2 tabs while holding the `Shift` key to select all tabs in between
2. Right click a tab, and select `Split x Tabs`
3. Change the view mode by pressing the `[|]` button in the top address bar
## How to switch tabs by scrolling?
You can enable this feature by changing a setting in the browser's configuration. Here's how:
1. Open the `about:config` page. This page contains advanced settings for the browser.
2. Search for `toolkit.tabbox.switchByScrolling`
3. Toggle the setting to `true` by double-clicking on it
Once this setting is enabled, you can hover your mouse over the tab bar and use your mouse wheel to scroll through the tabs, making it easier to navigate between them.
## Where do report problems and bugs?
<Callout type="info">
New features are not bugs. Please see [Where do I recommend features?](#where-do-i-recommend-features) below
</Callout>
If you want report an issue or a bug with the browser, you can do so on the browser's GitHub page. Before submitting your request, it's mandatory to check if the issue has already been reported. You can do this by searching through existing issues on the [GitHub issues page](https://github.com/zen-browser/desktop/issues).
Keep in mind that the Zen Browser team is currently very small, so it might take some time for your request to be reviewed and addressed. The team is dedicated to improving the browser, but with limited resources, they prioritize the most critical and popular requests. Your patience and thoroughness in reporting can help make Zen Browser better for everyone.
## Where do I recommend features?
If you want to recommend features or new ideas for Zen, you can do so on the GitHub discussion page. Before submitting your request, it's mandatory to check if the issue or feature has already been reported. You can do this by searching through existing issues on the [GitHub discussions page](https://github.com/zen-browser/desktop/discussions).
It may also be a good idea to see the [Zen Browser Subreddit](https://www.reddit.com/r/zen_browser/) where there are active discussions of development. Please remember again that the team is small and always in need of help so if you can't find a way to develop the new feature yourself, it will only come once someone is available and has enough interest to build it. Careful descriptions and explanation of the point of the feature may help.
## How can I sync my data across multiple devices?
Zen Browser integrates with Firefox Sync, allowing you to sync your addons, bookmarks, history, passwords, and other browser data across multiple devices. To enable Firefox Sync in Zen Browser:
1. **Open the Zen Browser Settings**
2. **Navigate to the "Sync" tab**
3. **Sign in with your Mozilla Account.** (If you don't have an account, you'll need to create one)
4. **Select what data you wish to sync**
After signing in and selecting your preferences, your data will be synced across all devices where you are signed in with the same Mozilla account.
## How do I use RTX Video Super Resolution?
To enable Zen Browser to use the feature
1. **Open 'about:config'**
2. **Search for 'gfx.webrender.dcomp-video-hw-overlay-win-force-enabled'**
3. **Double click the flag to toggle it to 'true'**
4. **Restart the browser**
Refer to [Nvidia's RTX Video FAQ](https://nvidia.custhelp.com/app/answers/detail/a_id/5448/~/rtx-video-faq) for additional information.
## Transparency bug
Some users encounter the bug where websites are partialy transparent, to resolve it follow bellow:
1. **Url `about:config`**
2. Search for `browser.tabs.allow_transparent_browser`
3. Set the flag to `false`
4. **Restart the browser**

71
content/docs/guides/1password.mdx Normal file
View file

@ -0,0 +1,71 @@
---
title: 1Password Integration
description: How to integrate 1Password Desktop App with Zen Browser
---
This Guide is designed to help you integrate [1Password Desktop App](https://1password.com/downloads) with Zen Browser, for a more **straight forward workflow** when accessing your credentials using this password manager browser extension.
<Callout type="warn">
This guide only applies for **Linux** and **MacOS** users.
**Windows** users can still use the Browser Extension without integration with the Desktop App
See: [Adding another trusted browser - 1Password](https://support.1password.com/1password-browser-connection-security/#adding-another-trusted-browser)
</Callout>
1Password browser integrations follows a [list of well-known/trusted browser](https://support.1password.com/1password-browser-connection-security/), with this integration account information and encryption keys are transferred using this connection to allow the 1Password app and browser extension to share your vaults and lock state and allowing you to unlock your Browser Extension Vault with [bio-metric](https://en.wikipedia.org/wiki/Biometrics) data.
Since Zen Browser is still under development and [under the usage threshold](https://1password.community/discussion/comment/719323#Comment_719341) 1Password takes in consideration Zen Browser is not within this list causing the 1Password Browser integration to fail.
## Workarounds
That being said, there are workaround methods to add Zen Browser to this _Trusted Browsers_ list for **Linux** and **MacOS**.
### Linux
You can create a _Custom Allowed Browsers_ file that 1Password will use to allow Zen Browser -- or other non-officially supported browser-- to integrate with 1Password's desktop app.
#### 1. Create 1Password's config directory
```bash
sudo mkdir /etc/1password
```
#### 2. Create the Custom Allowed Browsers file
```bash
sudo touch /etc/1password/custom_allowed_browsers
```
#### 3. Add Zen Browser to this custom list
```bash
echo "zen-bin" | sudo tee -a /etc/1password/custom_allowed_browsers
```
---
Special thanks to [u/xmansyx](https://www.reddit.com/user/xmansyx/) and [u/feelspeaceman](https://www.reddit.com/user/feelspeaceman/)
Sources:
- [1Password Integration fix (Linux) - Reddit](https://www.reddit.com/r/zen_browser/comments/1gcm33v/1password_integration_fix_linux/)
- [1Password Extension fix for other Browsers on Linux - edb tools!](https://edb.tools/posts/1password-extension-fix/)
---
### MacOS
In MacOS you can use the Graphical Interface of the Desktop app to add Zen Browser to the trusted browsers list.
1. Go into the 1Password desktop app and open Settings.
2. In the Browser tab, click "Add Browser".
3. In your Applications folder, find and add "Zen Browser", then authorize 1Password when prompted.
![macos settings](/assets/1password/macos-settings-4.png)
<Callout type="info">
If you would like to contribute with Screenshots for steps 1, 2 and 3 send me a message in our [Discord Server](https://discord.gg/zen-browser) **@mr. docs**
</Callout>

70
content/docs/guides/building.mdx Normal file
View file

@ -0,0 +1,70 @@
---
title: Building Zen Browser
---
We've taken the time to make building Zen Browser as easy as possible, independent of your operating system or technical knowledge.
<Callout type="info">
We cannot provide support if a build fails. Please understand this before proceeding with the following steps.
</Callout>
## Step 1: Clone the Project
First, you need to clone the Zen Browser repository to your local machine. This will create a local copy of the project that you can work on.
```bash
git clone https://github.com/zen-browser/desktop.git --recurse-submodules
cd desktop
```
- **`--recurse-submodules`**: This flag ensures that all submodules are cloned along with the main project. Zen Browser relies on several submodules, so this step is essential.
## Step 2: Install Dependencies
Once you have cloned the project, navigate to the project directory and install the necessary dependencies using npm:
```bash
npm i
```
This command will install all the packages listed in the `package.json` file, which are required for building and running Zen Browser.
## Step 3: Download and Bootstrap the Browser
To set up the browser, you need to download additional files and prepare the environment:
```bash
npm run init
```
This command handles all the necessary bootstrapping tasks, such as setting up configuration files and downloading essential resources.
## Step 4: Update Language Packs
Before building the browser, it’s recommended to update the American English language packs to ensure that all localization files are up-to-date:
```bash
python3 ./scripts/update_en_US_packs.py
```
This script updates the "en-US" localization files, which are necessary for proper language support in Zen Browser. Running this step ensures that your build includes the latest translations and language resources.
## Step 5: Build the Browser
Now that everything is set up, you can build the browser:
```bash
npm run build
```
This command compiles the source code and creates the necessary files for running Zen Browser.
## Step 6: Run the Browser
After building the browser, you can start it using:
```bash
npm start
```
This command launches the browser, allowing you to see your changes in action.

16
content/docs/guides/generic-optimized.mdx Normal file
View file

@ -0,0 +1,16 @@
---
title: Optimized builds
description: Why have optimized builds been removed?
---
For Windows and Linux, Zen Browser used to have the option to download optimized builds. These builds utilized AVX2 instructions to improve perfomance. These builds have been removed because of the following reasons:
1. **The optimized version isn't necessarily faster**: Profile-guided optimizations (PGO) aren't working with the optimized version because Clang fails to handle them properly, leading to a crash. As a result, we cannot build optimized versions if we want to include both PGO and Link Time Optimization (LTO). Additionally, AVX2 increases power consumption and is not ideal for heavy parallel computations.
2. **AVX2 isn't supported everywhere**: There are still many devices that don't support AVX2 instructions, which makes the installation process more confusing.
In conclusion, having optimized builds is not really worth it, especially if we want to have PGO & LTO.
P.S. all optimized builds will be automatically updated to generic starting from version `1.0.2-b.4`.
View original [here](https://github.com/zen-browser/desktop/wiki/Why-have-optimized-builds-been-removed%3F)

64
content/docs/guides/live-editing.mdx Normal file
View file

@ -0,0 +1,64 @@
---
title: Live Editing Zen Theme
description: Learn how to live edit the appearance of Zen Browser by editing the userChrome.css file.
---
import { Callout } from 'fumadocs-ui/components/callout';
This Guide will help you customize the appearance of Zen Browser by live editing the `userChrome.css` file. Follow the steps below to start customizing your browser's theme.
## Step 1: Access the Profile Folder
<Callout type="warn">
On the Flatpak version of Zen, the profile folder will be located at `~/.var/app/app.zen_browser.zen/.zen`.
</Callout>
1. Open Zen Browser.
2. Type `about:support` in the address bar and press Enter.
3. Look for the **Application Basics** section.
4. Click on **Open Profile Folder**. This will open the folder where Zen Browser stores your user data.
## Step 2: Create the `chrome` Folder
1. In the Profile Folder, create a new folder and name it `chrome`.
2. Inside the `chrome` folder, create a new blank file named `userChrome.css`.
3. Restart Zen Browser to apply the changes.
## Step 3: Open Style Editor in Zen Browser
<Callout type="warn" title="How do I enable the Browser Developer Tools?">
After Zen Browser version `1.0.0-a.31` the Browser Developer Tools is <strong>disabled</strong> by default for security.
1. Open the `about:config` page. This page contains advanced settings for the browser.
2. Search for `devtools.debugger.remote-enabled`
3. Toggle the setting to `true` by double-clicking on it
</Callout>
1. In Zen Browser, press `Ctrl + Shift + Alt + I` to open the Developer Tools.
2. Navigate to the **Style Editor** tab.
3. In the filter/search bar, type `userChrome` to locate the `userChrome.css` file you created earlier.
## Step 4: Edit the `userChrome.css` File
<Callout type="warn">
If a style does not apply as expected, try adding the `!important` keyword at the end of the CSS rule. This forces the browser to apply the style regardless of any other existing styles.
</Callout>
<Callout type="info" title="Tip">
If you wish to edit pop-ups or menus that automatically hide, be sure to enable the `Disable Popup Auto-Hide` option from the <em>Browser Toolbox</em> settings menu ( ⋯ button )
</Callout>
1. The `userChrome.css` file should now be visible in the Style Editor.
2. You can start editing the file directly within the Style Editor.
![inspect button](/assets/live-editing/inspect.png)
- **Note:** You can use the **Inspect** button to hover over and select elements on the page. This allows you to learn about the `id`, `class`, or other attributes of elements, which you can then target in your `userChrome.css` file.
3. To apply your changes, save the file by clicking **Save** or by pressing `Ctrl + S`.
Any changes you make to the `userChrome.css` file will be applied immediately to Zen Browser.
Use this file to customize various UI elements, such as colors, fonts, and the layout.
You can use this guide to help you [create your Zen theme and publish it.](/themes-store/themes-marketplace)
---
This guide is designed to help you quickly and efficiently customize your Zen Browser experience. Happy theming!

68
content/docs/guides/manage-profiles.mdx Normal file
View file

@ -0,0 +1,68 @@
---
title: Managing Firefox Profiles
description: Learn how to manage Firefox profiles effectively, preserving key elements of your browsing experience.
---
import { Callout } from 'fumadocs-ui/components/callout';
This Guide will give you a comprehensive understanding of Firefox profiles, helping you manage them effectively even in the most challenging situations. By following this guide, you'll learn how to preserve key elements of your browsing experience, including bookmarks, history, passwords, and more.
## Goal
This guide will help you:
- Keep bookmarks and history
- Keep passwords
- Keep logins
- Keep open tabs
- Keep your default search engine
- Preserve `about:config` settings
- Keep installed add-ons (but note that you may lose all add-on customizations)
## Steps to Follow
### 1. Open Your Current Profile Folder
<Callout type="danger" title="Turn Off Firefox">
This step is crucial to avoid corruption, as Firefox continuously reads and writes data while running.
</Callout>
1. Go to `about:support` in Firefox.
2. Under the "Application Basics" section, click on "Open Folder" next to "Profile Folder."
### 2. Copy Essential Files
<Callout type="info" title="Optional Files">
- **storage folder**: If you want to keep add-on customizations (this may not work 100% of the time).
- **chrome folder**: If you want to retain your interface customizations.
</Callout>
After turning off Firefox, copy the following files from your profile folder:
- **places.sqlite**: Contains bookmarks and history.
- **cookies.sqlite**: Stores login sessions.
- **cert9.db + key4.db + logins.json**: Holds your saved passwords.
- **extension-preferences.json + extensions.json + extension-settings.json + extensions folder**: These files keep track of your installed add-ons (but not their custom settings).
- **search.json.mozlz4**: Stores your search engine preferences.
- **sessionCheckpoints.json + sessionstore.jsonlz4**: Saves your currently open tabs.
- **prefs.js**: Contains your `about:config` settings.
### 3. Create and Set Up a New Profile
<Callout type="warn" title="Incompatibility Error">
If Firefox opens with an incompatibility error after pasting the files, go to the new profile folder and move the `compatibility.ini` file somewhere else.
</Callout>
1. Go to `about:profiles` in Firefox.
2. Click on "Create a New Profile."
3. Select a folder to store the new profile.
4. Launch Firefox with the new profile.
5. Go to `about:support` again and open the profile folder for the new profile.
6. **Turn off Firefox**.
7. Paste the files you copied earlier into the new profile folder.
### 4. Final Step: Set as Default Profile
After ensuring everything works correctly, go back to `about:profiles` and set the newly created profile as the default. This will make it your main profile moving forward.
By following these steps, you'll maintain a consistent and personalized browsing experience across different Firefox profiles.

69
content/docs/index.mdx Normal file
View file

@ -0,0 +1,69 @@
---
title: Documentation
description: Welcome to Zen Browser's documentation
icon: BookOpen
---
import {
SpeechIcon,
BookIcon,
WrenchIcon,
PaletteIcon,
HelpCircleIcon,
BarChartIcon,
HeartIcon,
ShieldIcon
} from 'lucide-react';
Welcome to **Zen Browser's Documentation!** Here, you'll find everything you need to get the most out of your browsing experience. Dive in to explore how Zen can make your browsing more secure, private, and efficient.
<Cards cols={2}>
<Card
icon={<BookIcon />}
title="User Manual"
href="/user-manual"
description="Complete user guide and features"
/>
<Card
icon={<WrenchIcon />}
title="Guides"
href="/guides/live-editing"
description="Tutorials and how-to guides"
/>
<Card
icon={<PaletteIcon />}
title="Mods Registry"
href="/themes-store/themes-marketplace"
description="Custom themes and modifications"
/>
<Card
icon={<HelpCircleIcon />}
title="FAQ"
href="/faq"
description="Frequently asked questions"
/>
<Card
icon={<BarChartIcon />}
title="Benchmarks"
href="/benchmarks"
description="Performance comparisons"
/>
<Card
icon={<ShieldIcon />}
title="Security"
href="/security"
description="Security features and protocols"
/>
<Card
icon={<SpeechIcon />}
title="Code of Conduct"
href="/contribute/code-of-conduct"
description="Community guidelines"
/>
<Card
icon={<HeartIcon />}
title="Contribute"
href="/contribute/contributing"
description="How to contribute to the project"
/>
</Cards>

16
content/docs/meta.json Normal file
View file

@ -0,0 +1,16 @@
{
"title": "Zen",
"root": true,
"pages": [
"---Introduction---",
"index",
"faq",
"security",
"benchmarks",
"---Getting Started---",
"...",
"---Developers---",
"contribute",
"themes-store"
]
}

74
content/docs/security.mdx Normal file
View file

@ -0,0 +1,74 @@
---
title: Privacy & Security
description: At Zen Browser, your online safety and privacy are our top priorities. We've implemented a range of security features to ensure you're protected while browsing.
icon: ShieldCheck
---
import { Callout } from 'fumadocs-ui/components/callout';
<Callout title="Password, Cookies, and Cache Management">
All passwords, cookies, and cache in Zen Browser are **managed by Firefox**. This means your saved passwords are **automatically encrypted**, providing an extra layer of security to keep your login credentials safe. Cookies and cache are also handled according to Firefox's strict privacy policies, ensuring your data is stored securely and only accessible to you.
For more information visit [Firefox Privacy and Security](https://support.mozilla.org/es/products/firefox/privacy-and-security)
</Callout>
## Adjusting Security Settings
Zen Browser lets you customize privacy and security settings to improve your browsing safety. If you want to adjust or change these settings:
1. Click the `menu button` and select `Settings`.
2. On the sidebar, go to the `Privacy & Security` section.
---
## Security settings
<Callout type="info" title="Latest Firefox Version">
Zen Browser is built on the **latest version of Firefox**, one of the most secure browsers available today. This means you benefit from all of Firefox's security patches and updates as soon as they are released, keeping you safe from known vulnerabilities.
</Callout>
### 1. OCSP Enabled
Zen Browser uses **OCSP (Online Certificate Status Protocol)** to check the validity of a website’s security certificate. This ensures that you only connect to safe websites with up-to-date and valid certificates, protecting you from malicious sites that may have expired or revoked certificates.
### 2. HTTPS Only Mode
**HTTPS Only Mode** ensures that you connect securely to websites by using the HTTPS version whenever possible. HTTPS encrypts the communication between you and the website, protecting your data from being intercepted by hackers.
<Callout type="info">
You can enable HTTPS-Only Mode in **all windows** or **private windows only**.
</Callout>
For more information visit [HTTPS-Only Mode in Firefox](https://support.mozilla.org/en-US/kb/https-only-prefs)
### 3. Deceptive Content and Dangerous Software Protection
Zen Browser helps protect you from **phishing, malware, and fraudulent websites**. It uses URL filters and real-time checks to block harmful content, making your browsing experience safer.
To learn more, visit [Block deceptive content and dangerous downloads in Firefox](https://support.mozilla.org/en-US/kb/block-deceptive-content-and-dangerous-downloads-firefox)
### 4. SSL – Treat Unsafe Negotiation as Broken by Default
Zen Browser treats insecure SSL connections (those that don't meet modern security standards) as broken by default. This means that if a **website is not properly secured**, Zen Browser will alert you and **block the unsafe connection**, preventing potential security risks.
---
## Privacy settings
### 1. Tracking Protection
To protect your privacy, Zen Browser includes **tracking protection**. This feature automatically blocks websites and advertisers from tracking your online activity, making it harder for third parties to collect your data and show you targeted ads.
<Callout type="info">
You can choose from three levels of Tracking Protection: **Standard**, **Strict**, or **Custom**.
</Callout>
### 2. DNS over HTTPS
Zen Browser allows the users to enable DNS over HTTPS, which **sends your request for a domain name through an encrypted connection**, providing a secure DNS and making it harder for others to see which website you’re about to access.
<Callout type="info">
You can choose from three protection levels: **Default Protection**, **Increased Protection**, or **Max Protection**.
</Callout>
---
These security features work behind the scenes to provide a safe and private browsing experience. With Zen Browser, you can browse with confidence knowing that your security is always a top priority.

4
content/docs/themes-store/meta.json Normal file
View file

@ -0,0 +1,4 @@
{
"title": "Mods Registry",
"icon": "SwatchBookIcon"
}

382
content/docs/themes-store/themes-marketplace-preferences.mdx Normal file
View file

@ -0,0 +1,382 @@
---
title: Preferences
---
import { Callout } from 'fumadocs-ui/components/callout';
The `preferences.json` file allows mod developers to define custom preferences that control the behavior and appearance of mods in the Zen Browser. Each preference is defined with a `property`, a `label`, a `type`, and optionally `options` (for dropdown preferences), `defaultValue`, `placeholder` (to configure preference placeholder) and `disabledOn` (to disable property on selected OS). The `preferences.json` file contains a list of these preference objects at its root.
## Preferences fields
### Field: `property` - Property name
The `property` field is a string that should follow Firefox's preference naming schema, similar to `about:config` entries. The `property` name can be any valid string that aligns with this schema.
For example: `mod.mymod.background_color`
### Field: `label` - Label
The `label` field is the description that will be visible to users in the Zen Mods settings page.
This field accepts a string and allows white space.
For example: `Changes the background color`
### Field: `type` - Preference type
| **Property** | **Type** | **Accepted Values** |
| ------------ | -------------- | --------------------------------------------------------------------------------- |
| `checkbox` | Boolean | `true`, `false` |
| `dropdown` | Array[Options] | The `value` of an option must be a string (`"blue"`) or an integer (`1`) |
| `string` | String | The `value` of an option must be a string (`"blue"`) (a valid CSS property value) |
#### Type: `checkbox`
The `checkbox` type allows a togglable input to enable or disable a property.
```json title="Checkbox Example"
{
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox"
}
```
#### Type: `dropdown`
The `dropdown` type allows to select a single choice on multiple options.
```json title="Dropdown Example"
{
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"options": [
{
"label": "Green",
"value": "green"
},
{
"label": "Blue",
"value": "blue"
}
]
}
```
#### Type: `string`
The `string` type is a text input that allows to insert valid css values without being a selection.
```json title="String Example"
{
"property": "mod.mymod.tab_padding",
"label": "Set tab padding",
"type": "string"
}
```
### Field: `options` - Options (only for `type`: `dropdown`)
The `options` field is an array of option objects, only available for the `dropdown` type. This field must be an array containing one or more option objects.
```json
"options": [
{
"label": "Light",
"value": "light"
},
{
"label": "Dark",
"value": "dark"
}
]
```
Each option object defines a possible value for the dropdown menu. It contains two fields: `label` and `value`.
- The `label` is the description that will be displayed in the dropdown menu. This field accepts a string and allows white space.
- The `value` field contains the value that will be assigned as a CSS property. Only `string` or `int` values are valid. Strings may not contain white space or special characters.
```json title="Example"
{
"label": "Green",
"value": "green" // valid string
}
```
```json title="Invalid Example" {3}
{
"label": "Invalid option",
"value": [] // invalid, only string/int are allowed
}
```
### Field: `defaultValue` - Default Value (optional)
The `defaultValue` field is an optional field that allows the preference to have a pre-selected value.
This field accepts a value based on the preference `type`:
| **Type** | **Default Value Type** | **Accepted Values** |
| ---------- | ---------------------- | --------------------------------------------------------------------------------- |
| `checkbox` | Boolean | `true`, `false` |
| `dropdown` | Array[Options] | Any `value` contained in the options array. |
| `string` | String | The `value` of an option must be a string (`"blue"`) (a valid CSS property value) |
### Field: `disabledOn` - Disabled On (optional)
Some CSS modifications may not function properly on all operating systems. You can use the property `disabledOn` to specify on which operating systems the preference should be available.
This field accepts an array of the following values: `macos`, `linux` or/and `windows`.
For example:
```json title="Disabled on MacOS" {2}
{
"disabledOn": ["macos"] // disables the preference for MacOS
}
```
```json title="Disabled on Windows and Linux" {2}
{
"disabledOn": ["windows", "linux"] // disables the preference for Windows and Linux
}
```
```json title="Disabled on all OS" {2}
{
"disabledOn": ["windows", "linux", "macos"] // disables the preference entirely
}
```
### Field: `placeholder` - Placeholder (optional) (only for `type`: `dropdown` and `string`)
The `placeholder` field is an optional field that allows to change the placeholder value for the preference.
This field accepts a string and allows white space.
For example: `e.g: 10px`
---
See Full Example
Below is a full example of what a `preferences.json` file might look like with multiple preference objects in its root. Each object represents a preference defined for a mod:
```json
[
{
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"placeholder": "Select a color",
"defaultValue": "green",
"options": [
{
"label": "Green",
"value": "green"
},
{
"label": "Blue",
"value": "blue"
}
]
},
{
"property": "mod.mymod.show_bookmarks_bar",
"label": "Show bookmarks bar",
"type": "string",
"disabledOn": ["macos"]
}
]
```
In this example:
- The `preferences.json` file contains a list of three preference objects.
- Each object defines a `property`, `label`, and `type`.
- Optionally, each object defines either a `defaultValue`, `disabledOn` or `placeholder`.
- Dropdown preferences have to include an `options` field, with each option having a `label` and a `value`.
---
## Using preferences in the mod's CSS
Once you have defined your preferences in the `preferences.json` file, you can use them in your mod’s CSS to modify the appearance or behavior based on the user’s selections.
### Checkbox Preferences
Checkbox preferences can be detected in your CSS using the `-moz-bool-pref` media query, which evaluates the boolean value (`true` or `false`) of a checkbox preference.
For example, if you have a preference to enable dark mode in your mod:
```json
{
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox"
}
```
You can use the following CSS to change the background color when the dark mode preference is enabled:
```css {1}
@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
body {
background-color: #000;
color: #fff;
}
}
```
You can also have negative conditions
```css {1}
@media not (-moz-bool-pref: "mod.mymod.enable_dark_mode");
```
### Dropdown Preferences
<Callout type="warn" title="Attention">
`property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mod's CSS: <strong>dots (`.`) in the `property` name are replaced with hyphens (`-`)</strong>.
<br/><br/>
E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
This transformation ensures that the property can be used as an attribute selector or inside a media query.
</Callout>
For dropdown preferences, you can detect the selected value using the `:has(){:css}` CSS pseudo-class, which applies styles based on the selected attribute and value in the DOM.
For example, if you have a preference to select the background color from a dropdown menu:
```json
{
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"options": [
{
"label": "Green",
"value": "green"
},
{
"label": "Blue",
"value": "blue"
}
]
}
```
You can use the following CSS to change the background color based on the selected value:
```css {2,8,14}
/* Green background */
body:has(#mod-mymod[mod-mymod-background_color="green"]) {
background-color: #008000;
color: #000;
}
/* Blue background */
body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
background-color: #0000ff;
color: #fff;
}
```
In this example:
- The background color and text color change based on the value selected in the `background_color` dropdown.
- The selector `body:has(#mod-mymod[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option.
---
See Full Example
Suppose your `preferences.json` file includes these two preferences:
```json
[
{
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox"
},
{
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"options": [
{
"label": "Green",
"value": "green"
},
{
"label": "Blue",
"value": "blue"
}
]
}
]
```
You can combine the CSS like this:
```css
/* Checkbox for dark mode */
@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
body {
background-color: #000;
color: #fff;
}
}
/* Dropdown for background color selection */
body:has(#mod-mymod[mod-mymod-background_color="green"]) {
background-color: #008000;
color: #000;
}
body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
background-color: #0000ff;
color: #fff;
}
```
This allows users to:
- Toggle dark mode on/off using the checkbox.
- Select a background color from the dropdown, which dynamically changes the background and text colors based on the user's choice.
### String Preferences
String preferences can be detected in your CSS using the `var(--property)` operator. The preference property is saved at `:root` level.
<Callout type="warn" title="Attention">
`property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mod's CSS: <strong>dots (`.`) in the `property` name are replaced with hyphens (`-`)</strong>.
<br/><br/>
E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
This transformation ensures that the property can be used as an attribute selector or inside a media query.
</Callout>
For example, if you have a preference to enable dark mode in your mod:
```json
{
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "string"
}
```
You can use the following CSS to change the background color when the dark mode preference is enabled:
```css {2}
.myClass {
background-color: var(--mod-mymod-background_color);
}
```

38
content/docs/themes-store/themes-marketplace-submission-guidelines.mdx Normal file
View file

@ -0,0 +1,38 @@
---
title: Submission Guidelines
---
import { Callout } from 'fumadocs-ui/components/callout';
If you are a [mod developer] and would like to submit your mod, please follow these guidelines:
1. **Mod requirements**:
- Your mod must be compatible with Zen Browser.
- Your mod must be open-source.
- Your mod must not contain any malicious code.
- Your mod must not violate any copyright laws.
2. **Mod Validation**:
- Your mod's name must be unique and less than `25` characters.
- Your mod's description must be less than `100` characters.
- Your mod's screenshot must be a `PNG` with a size of `600x400` (it can be resized after upload).
- Your mod must contain a valid `README` describing the mod and how to use it.
- If your mod has any preferences values, they must be set in the `preferences` text area as a `JSON` object.
- See how preferences work [here](./themes-marketplace-preferences.mdx).
3. **Mod Submission**:
- To submit your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+)
- Fill out the template with the required information.
- Once you have submitted your mod, it will be analyzed by a bot and a pull request will be created.
- If your mod is approved, it will be added to the Mods Registry.
4. **Mod Update**:
- If you would like to update your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new)
- Please explain the changes you have made.
<Callout type="info">
Mods are automatically updated and generated by the bot. If your mod is not approved, you will receive a message with the reason why it was not approved.
</Callout>

15
content/docs/themes-store/themes-marketplace.mdx Normal file
View file

@ -0,0 +1,15 @@
---
title: Information
---
The Mods Registry is a place where you can find and install mods for Zen Browser.
## How to install a mod
1. Open Zen Browser.
2. Click on the mod you would like to install on the [Mods Registry](https://www.zen-browser.app/mods).
3. Click on the "Install" button.
## For mod developers
If you are a mod developer and would like to submit your mod, please follow the instructions on the [Submission Guidelines](themes-store/themes-marketplace-submission-guidelines.md) page.

10
content/docs/user-manual/.history.mdx Normal file
View file

@ -0,0 +1,10 @@
---
title: History & Browsing Sessions
---
{/* TODO
## long press(/click?) on the back or forward button to see and navigate history of the same tab
## use history sidebar (ctrl + h) and history section in main menu to open previously opened sites
## restore previous windows (include "open previous windows and tabs" option in Settings > General; and then show how to do it via the main menu, as well as keyboard shortcuts)
## restore previous tabs (via main menu, via tab context menu, as well as keyboard shortcuts)
## What if you lose your tabs when opening Zen?
*/}

7
content/docs/user-manual/.meta.json Normal file
View file

@ -0,0 +1,7 @@
{
"title": "User Manual",
"pages": [
"...",
"webpanel"
]
}

3
content/docs/user-manual/.sidebar.mdx Normal file
View file

@ -0,0 +1,3 @@
---
title: Sidebar
---

72
content/docs/user-manual/bookmarks.mdx Normal file
View file

@ -0,0 +1,72 @@
---
title: Bookmarks in Zen
---
Zen, as a fork of Firefox, inherits its webpage bookmarking system from the Gecko engine, with some of that extra Zen touch added on top. Zen offers two vertical tab layouts: **Single toolbar layout**, which integrates a compact address bar into the vertical tabs toolbar, and **Multiple toolbars layout**, featuring a traditional, full-size address bar in a separate horizontal toolbar. This guide covers the basics of creating and managing bookmarks, tailored to your chosen Zen layout.
## How do I bookmark a page
To bookmark a page, find and click on the bookmark icon in the address bar. A pop up dialog will allow you to name and move your bookmark.
{/* TODO: insert video of popup dialog */}
<Callout type="info" title="Tips:">
Did you know Zen offers Workspaces specific bookmarks?
</Callout>
In **Multiple toolbars layout**, you will find the bookmark icon exposed on the right of your address bar, while in **Single toolbar layout**, you must first expand your compact address bar by clicking on it then find the icon there.
{/* TODO: **Single toolbar layout**
*insert video*
**Multiple toolbars layout**
*insert video* */}
<Callout type="info" title="Tips:">
While you could use your mouse to click the bookmark icon, we recommend using the keyboard shortcut `Ctrl/Cmd + D` for bookmarking, especially in **Single toolbar layout**.
</Callout>
Alternatively, you can bookmark a single tab by right-clicking it and selecting `"Bookmark Tab..."` from the context menu, which opens a detailed bookmarking dialog with options for *tagging* and *keywords*.
To bookmark multiple or all open tabs, select them in the vertical tabs toolbar, right-click, and choose `"Bookmark Tabs..."` from the context menu. This will bookmark the selected tabs into a new bookmark folder.
## How do I find and manage my bookmarks
You can access, edit, organize and delete your bookmarks in a variety of ways in Zen.
### Bookmarks Toolbar and Bookmarks Menu
Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) for bookmarks:
- **Bookmarks Toolbar**: This can be considered a public location for bookmarks, displayed in the browser's [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome). You typically find it beneath the main browser toolbar, which is featured in **Multiple toolbars layout** in Zen, while in **Single toolbar layout**, hovering your cursor to the top edge will display the hidden Bookmarks Toolbar, next to your window controls. To toggle the visibility of your Bookmarks Toolbar, use the shortcut `Ctrl/Cmd + Shift + B`
{/* TODO: *insert video* */}
<Callout type="info" title="Tips:">
If you want to fully hide the Bookmarks Toolbar, you can change these settings in `about:config`
- `browser.toolbars.bookmarks.visibility = 'never'`: Never show your Bookmarks, revert by changing value to `'always'`.
- `zen.view.experimental-no-window-controls = 'true'`: disable hovering window controls in **Single toolbar layout**, effectively remove access to the Bookmarks Toolbar.
</Callout>
- **Bookmarks Menu**: This can be considered a private location for bookmarks, only accessible via opening the Bookmarks Sidebar or the Bookmarks Library.
- **Other Bookmarks**: Location for your miscellaneous unorganized bookmarks. Other Bookmarks will show up at the end of the Bookmarks Toolbar but you can choose to hide it by right clicking and disable `"Show Other Bookmarks"`.
### Bookmarks Sidebar
Your bookmarks are also avaialbe via what is known as the [Firefox Sidebar](https://support.mozilla.org/kb/use-firefox-sidebar-access-bookmarks-history-synced). The Sidebar can be opened by adding a Sidebar button to your controls, or preferably by using the shortcut `Ctr/Cmd + B` to open the Bookmarks Sidebar. You can find all of your bookmarks here including entries from both Bookmarks Toolbar and Bookmarks Menu, in the form of a tree structure explorer with access to a searching function at the top.
{/* TODO: *insert video/image* */}
### Bookmarks Library
The Firefox Library is a Bookmarks/History/Download Manager. You can access the Library by the shortcut `Ctrl/Cmd + Shift + O`. While you can manage your bookmarks here in the same fashion as the Sidebar with extra details, you should only open the Library for the purpose of Importing and Backing up Zen's data.
*insert library image*
<Callout>
_All shortcuts can be modified via `Settings > Keyboard Shortcuts`._
</Callout>
Learn more about Bookmarks in Mozilla Support: https://support.mozilla.org/kb/bookmarks-firefox

38
content/docs/user-manual/compact-mode.mdx Normal file
View file

@ -0,0 +1,38 @@
---
title: Compact Mode
description: Minimalistic interface for focused browsing
---
Compact Mode is one of Zen's main feature that let you hide all browser toolbars and give wider view for the website you're currently visit.
You can activate this feature by right click on empty area on the `toolbar > "Compact Mode" > "Enable compact mode"`, or use `Alt + Ctrl/Cmd + C` keyboard shortcut.
{
<div align="center">
<video width="100%" loop autoPlay>
<source src="/assets/user-manual/compact-mode/compact-mode.webm" />
Your browser does not support the video tag.
</video>
</div>
}
In Single Toolbar mode, activating Compact Mode will hide the tab sidebar. You can access tab sidebar by hovering the side edge of the browser (based on whether `"Tabs on the right"` is activated or not).
In Multiple Toolbar or Collapsed Toolbar mode, you can choose which bar to hide. These options are accessible below "Compact Mode" > "Enable compact mode" when right clicking the toolbar:
- **Hide sidebar**: Hide the tab sidebar, accessible when hovering side edge of the browser.
- **Hide toolbar**: Hide the top toolbar, accessible when hovering top edge of the browser.
- **Hide both**: Hide both top toolbar and tab sidebar.
<div align="center">
<img src="/assets/user-manual/compact-mode/enable-compact-mode.png" alt="Compact Mode" width="500" />
</div>
You can also use these extra shortcuts to show the hidden bars, suitable for heavy keyboard users. Unlike usual hovering gesture, showing sidebar/toolbar using these shortcuts is done persistently, until you pressed the shortcut again to hide it.
- **Toggle Floating Sidebar**: `Alt + Ctrl/Cmd + S` - Show the tab sidebar for all toolbar modes
- **Toggle Floating Toolbar**: `Alt + Ctrl/Cmd + W` - Show the top toolbar for Multiple & Collapsed Toolbar mode
<Callout>
_All shortcuts can be modified via `Settings > Keyboard Shortcuts`._
</Callout>

51
content/docs/user-manual/extensions.mdx Normal file
View file

@ -0,0 +1,51 @@
---
title: Extensions
description: Get to know how extensions work in Zen
---
Extensions are a small software piece that enhance and personalize a browser by adding or modifying browser function and features. Example of commonly installed extensions includes ad blockers, easy reader mode, privacy and tracking managers, media downloaders, password managers, and tweaks for commonly used websites.
Since Zen is based on Mozilla Firefox, you can install extensions from the same source: https://addons.mozilla.org.
![Mozilla Add-ons](/assets/user-manual/extensions/mozilla-addons.png)
<Callout> Due to fundamental difference on how Zen does theming, Firefox themes are not supported in Zen. </Callout>
<Callout title="Difference between Extensions and Zen Mods"> Extensions are made with HTML, CSS and Javascript. Depending on the permissions you enabled when installing, extensions generally affect websites you visit. Meanwhile, Zen Mods are made with CSS and only affect the browser UI. </Callout>
### Manage Extensions using Extensions Button
When you launch Zen, there will be an Extension button (with jigsaw icon) in the top bar. It will show a list of enabled extensions, where you can see which permissions the extensions have for the site you're visiting. You can click the gear icon beside each extensions to perform some common actions like Pin to Toolbar, Manage Extension to access extension settings, Remove Extension, or [Report Extension to Mozilla](https://support.mozilla.org/en-US/kb/reporting-extensions-and-themes-abuse).
![Extensions Button](/assets/user-manual/extensions/extensions-button.png)
If you haven't installed any extensions yet, clicking the Extensions button will take you to Add-ons Manager page, showing extension recommendations curated by Firefox.
### Manage Extensions from Add-ons Manager
Add-Ons Manager is a page that primarily let you see extension details, manage its preferences, assign shortcuts, disable and remove extensions. You can access Add-Ons Manager by:
- Open the extension button > Click `Manage extensions`.
- Open the main menu > Click "Add-ons and themes".
- Press the default keyboard shortcut `Ctrl/Cmd + Shift + A`.
Select "Extensions" and you can see the list of your installed extensions. You can click on each extensions name to expand the details, or click toggle in each extensions to disable or enable it.
![Add-Ons Manager](/assets/user-manual/extensions/add-ons-manager.png)
The expanded page of individual extensions includes:
- Extension details, with link to homepage and extension ratings in addons.mozilla.org
- Toggle to allow automatic updates.
- Toggle to allow extension run in Private Windows (off by default).
- Toggle to allow extension run on sites restricted by Mozilla (off by default).
- Accessing list of permissions required by the extension, as well as optional permissions toggle for added functionality.
- Additional Preferences tab (availability varies across extensions). Most extensions has their own preference page, that can be accessed from its extension toolbar button.
![Extension Details](/assets/user-manual/extensions/extension-details.png)
### Manage Extension Shortcuts
You can perform some actions related to extensions faster with keyboard shortcuts. Some extensions already has preconfigured shortcut fields, but you can also set your own custom shortcuts, depend on the extension support itself. You can access it by opening `Add-Ons Manager` > `Extensions` > `open Gear menu` > choose `Manage Extension Shortcuts`.
![Manage Extension Shortcuts](/assets/user-manual/extensions/manage-extension-shortcuts.png)
---
You can read more support articles related to extensions: [Add-ons, extensions, and themes | Support Mozilla](https://support.mozilla.org/en-US/topics/add-ons-extensions-and-themes/firefox)

25
content/docs/user-manual/glance.mdx Normal file
View file

@ -0,0 +1,25 @@
---
title: Glance
description: Preview websites on top of your current tab
---
Zen's Glance lets you preview websites on top of your current tab, without fully switching to it. By default, you can create a Glance view by holding `Alt` as trigger key when clicking a link in a regular tab. In Essentials and pinned tabs, Glance will be automatically created when clicking a link outside current website, without having to pressing the trigger key.
{
<div align="center">
<video width="100%" loop autoPlay>
<source src="/assets/user-manual/glance/glance.webm" />
Your browser does not support the video tag.
</video>
</div>
}
Once Glance appeared, there's three buttons on its top left side:
- Close button to close the view (can also be done by clicking outside the Glance area).
- Expand button to move the website into a new tab.
- Split button to add the website as a splitted tab.
You can disable/enable Glance and change the trigger method (from `Alt + Click` to `Ctrl + Click` or `Shift + Click`) by opening `Settings` > `Look and Feel` > `Glance`.
With Glance, you can take a quick look of websites, move on if you're done with the site, and go back to your previous surfing activities easily.

70
content/docs/user-manual/index.mdx Normal file
View file

@ -0,0 +1,70 @@
---
title: User Manual
---
import { Callout } from 'fumadocs-ui/components/callout';
<Callout type='none'>
This user manual is still in early stages of development and incomplete
</Callout>
Welcome to the Zen Browser User Manual! This guide is designed to provide you with a comprehensive overview of Zen Browser's features, settings, and customization options. This manual will help you navigate the essential aspects of Zen Browser and optimize your browsing experience.
<Callout type="warn" title="Important Notice">
Zen Browser is under active and rapid development. Some content in this manual may become outdated as the browser evolves. Please check the last modification date below the title to confirm you have the most recent information. If you find any outdated sections, please feel free to report them by opening an issue on our [GitHub repository](https://github.com/zen-browser/docs/issues).
</Callout>
<Cards>
<Card
title="URL Bar"
description="Smart navigation with persistent input memory"
href="/user-manual/urlbar"
/>
<Card
title="Workspaces"
description="Organize tabs by projects with custom containers"
href="/user-manual/workspaces"
/>
<Card
title="Compact Mode"
description="Minimalistic interface for focused browsing"
href="/user-manual/compact-mode"
/>
<Card
title="Extensions"
description="Customize Zen Browser with extensions"
href="/user-manual/extensions"
/>
<Card
title="Glance"
description="Preview websites on top of your current tab"
href="/user-manual/glance"
/>
<Card
title="Bookmarks"
description="Managing bookmarks in Zen"
href="/user-manual/bookmarks"
/>
<Card
title="Picture-in-Picture"
description="Watch videos in a separate window"
href="/user-manual/pip"
/>
{/* <Card
title="History"
description="Managing browsing history in Zen"
href="/user-manual/history"
/> */}
{/* <Card
title="Sidebar"
description="Using Firefox Sidebar in Zen"
href="/user-manual/sidebar"
/> */}
<Card
title="Web Panel (deprecated)"
description="Side panel for quick access to web apps"
href="/user-manual/webpanel"
/>
</Cards>
Thank you for using Zen Browser, and happy browsing!

141
content/docs/user-manual/pip.mdx Normal file
View file

@ -0,0 +1,141 @@
---
title: Picture-in-Picture
description: Watch videos in a separate window
---
With **Picture-in-Picture (PiP)** in **Zen**, you can pop videos out of webpages into a clean, always-on-top floating window. Whether you're working, browsing, or just casually scrolling, PiP keeps your video visible without disrupting your flow.
## How to Use Picture-in-Picture
**Stay in flow while watching.**
### 1. On-Screen Video Toggle
When you hover over a supported video, a **Zen PiP toggle** will appear.
Click it to launch the video in a floating window.
![PIP toggle](/assets/user-manual/pip/open-toggle.png)
- Right-click the toggle to move it to the left or right side.
- The toggle is hidden when the video is in full-screen mode.
### 2. Address Bar Icon
On pages with a single video, Zen displays a PiP icon in the **address bar**.
![Toolbar Toggle](/assets/user-manual/pip/toolbar-toggle.png)
- If there are multiple videos or none, the icon remains hidden.
### 3. Right-Click Menu
You can also launch PiP by **right-clicking** on the video.
- Some platforms like YouTube use custom menus.
In that case, use **Shift + Right-Click** or **double right-click** to access Zen’s native menu.
![PIP context menu](/assets/user-manual/pip/pip-context-menu.png)
### 4. **Auto-Play in Mini Player**
When you switch tabs while a video is playing, Zen quietly tucks the video into a floating player at the bottom right.
Enable it by setting the property below in about:config to TRUE
`media.videocontrols.picture-in-picture.enable-when-switching-tabs.enabled`
### 5. **Resize**
Hover over any corner of the mini player and drag to adjust its size—just how you like it.
## Keyboard Shortcuts
| Action | Shortcut |
|------------------------------|-----------------------------|
| Launch/Close PiP | `Ctrl + Shift + ]` |
| Mute / Unmute | `Ctrl + ↓ / Ctrl + ↑` |
| Volume Control | `↑ / ↓` |
| Seek 5s Back / Forward | `← / →` |
| Seek 10% Back / Forward | `Ctrl + ← / Ctrl + →` |
| Jump to Start / End | `Home / End` |
| Pause / Play | `Space` |
| Fullscreen Toggle | `Double-click` or `F` |
| Close PiP Window | `Ctrl + W` |
## How to Disable Picture-in-Picture
### Option 1: From the Player
- Hover over the Picture-in-Picture Player
- Click on the [x] button
![Close pip](/assets/user-manual/pip/close.png)
### Option 2: From Zen Settings
- Go to **Settings → General → Browsing**
- Uncheck **"Enable picture-in-picture video controls"**
You can always re-enable it later.
![Disable pip](/assets/user-manual/pip/disable.png)
### Option 3: From the Toggle
- Hover over a video and right-click the PiP toggle.
- Select **"Hide Picture-in-Picture Toggle"**.
### Option 4: From Configuration Page
If you’d like to disable Picture-in-Picture functionality entirely, you can do so via Zen’s advanced configuration page:
1. In the address bar, type `about:config` and press Enter.
2. Accept any warning that appears.
3. Search for the setting: `zen.mediacontrols.enabled`.
4. Set it to **false** to disable Picture-in-Picture across Zen.
You can always re-enable it by returning to this setting and switching it back to **true**.
<Callout title="Why You Might Not See the Toggle">
- The video is shorter than 45 seconds or has no audio.
- It’s in full-screen mode.
- The site may restrict PiP, but Zen gives you the option to override this via **"Enable Anyway"** when available.
</Callout>
## Subtitles & Captions
Turn on captions **before** activating PiP to see them in the floating window.
Zen supports captions on major platforms including:
- YouTube
- Netflix
- Disney+
- Amazon Prime Video
- Funimation
- Dailymotion
- Khan Academy
- BBC
- Washington Post
- Nebula
- Tubi
- Hotstar
- SonyLIV
- Any site using **WebVTT** (e.g. Coursera, Twitter)
More platforms are being added.
## Media Player
**Audio, always within reach.**
![Media Player](/assets/user-manual/pip/media-player.png)
- **Automatic Playback Controls**
When audio is playing in a background tab, Zen adds a subtle media controller to the bottom of your sidebar.
{/* TODO: enter video */}
- **Simple Dismissal**
To hide the Media Player, just click the “X” on the controller. Zen will take the hint.
{/* TODO: enter video */}

40
content/docs/user-manual/split-view.mdx Normal file
View file

@ -0,0 +1,40 @@
---
title: Split View
description: Open multiple tabs side by side easily
---
Zen's Split View lets you view up to 4 tabs side by side, so you can compare information or multitask easily.
![Split View](/assets/user-manual/split-view/split-view.png)
### Creating split view
You can create split view simply by open one tab, drag another tab from sidebar to left or right side of it, and drop once the split indicator placeholder is shown. You can also right click on a link and choose `"Split link in new tab"`.
{ /* TODO: insert video of these sequences:
- dragging a tab to split it with another tab
- click new tab button, insert url, load it, and drag it into the existing split.
- right click a link from one of the tabs > click "split link in new tab"
*/}
### Using split wiew
When split view is enabled, the active tab will have an overlay on its top side, containing two buttons: **Drag Handle** `:::` button and **Unsplit Tab** `‒` button.
{ /* TODO: `insert gif/video of dragging splitted tab and then pressing ‒ button to unsplit it` */}
- With **Drag Handle** `:::` button, you can move a splitted tab to various directions (left, bottom, right, or top side of another tabs).
- Meanwhile, clicking **Unsplit Tab** `‒` button will remove the tab and expand it outside the previous split view.
- Currently, you can **unsplit all tabs within a split view** by pressing `Alt + Ctrl/Cmd + U` shortcut.
### Toggle Split View shortcuts
Zen also provide keyboard shortcuts to help you rearrange the split tabs automatically into a horizontal, vertical, or grid layout.
- **Toggle Split View Horizontal**: `Alt + Ctrl/Cmd + H`
- **Toggle Split View Vertical**: `Alt + Ctrl/Cmd + V`
- **Toggle Split View Grid**: `Alt + Ctrl/Cmd + G`
{ /* TODO: insert gif/video of horizontal, vertical, and grid toggling split view here */}
You can also press one of the Toggle Split View shortcuts to split current tab with the tab below it.
> All shortcuts can be modified via `Settings > Keyboard Shortcuts`.

22
content/docs/user-manual/urlbar.mdx Normal file
View file

@ -0,0 +1,22 @@
---
title: Zen URL bar
---
{
<div align="center">
<video width="100%" loop autoPlay>
<source src="/assets/user-manual/urlbar/vid.mov" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
}
Zen Browser’s **URL bar** is a powerful tool that helps you navigate the web quickly and efficiently. There's no need to open a new tab or window to search the web—simply type your query into the URL bar and hit Enter to search. The URL bar also supports direct navigation to websites, so you can type a URL and press Enter to visit the site directly.
- Can be disabled in settings or `about:config` (`zen.urlbar.replace-newtab`)
### How does it work?
- When trying to open a new tab, the search bar will appear. This allows you to navigate faster and more efficiently by being able to type out the address or getting auto-completed without having a change in the view.
- If the newtab urlbar is closed but you've typed something. The text is remembered unless the URL or tab has been changed.
- Otherwise, the functionality is basically the same as before, only when focusing the urlbar either by clicking on with the shortcut

17
content/docs/user-manual/webpanel.mdx Normal file
View file

@ -0,0 +1,17 @@
---
title: Web Panel (deprecated)
---
<Callout type="warn" title="Important Notice">
Since the release of version [1.11b](https://zen-browser.app/release-notes/#1.11b), **Web Panel** has been indefinitely **removed** from Zen due to a discovered [security vulnerability](https://bugzilla.mozilla.org/show_bug.cgi?id=1935985) that could allow websites in web panels to bypass sandboxing protections, potentially enabling malicious code execution on your system.
We understand that this change may cause inconvenience to our current user base relying on Web Panel, and we sincerely apologize for the disruption. We do plan to bring Web Panel back in the future once we address these issues and ensure its stable and secure.
</Callout>
<div align="center">
<img src="/assets/user-manual/webpanel/webpanel.png" alt="Webpanel" width="200"/>
</div>
The **Zen Web Panel** brings your favorite web apps—like chats, notes, or to-do lists—right into your browser window for quick, side-by-side multitasking. Instead of switching tabs, you can keep essentials within reach, making it easy to reference or interact without losing focus on your main task.
With options to float or pin these panels alongside your browsing tabs, the Sidebar is perfect for keeping tools like messaging or music accessible. Planned upgrades will even add notification badges for real-time updates, creating a streamlined and productive workspace within Zen.

37
content/docs/user-manual/workspaces.mdx Normal file
View file

@ -0,0 +1,37 @@
---
title: Workspaces
---
<div align="center">
![Workspace](/assets/user-manual/workspaces/workspaces.png)
</div>
Zen Browser’s **workspaces** feature is your go-to tool for organizing tabs seamlessly by tasks, projects, or themes. Think of each workspace as a focused area where you can group related tabs and quickly switch between sets—ideal for juggling work, personal tasks, or study sessions without cluttering your tab bar.
You can make each workspace your own by adding **default container tabs** to keep accounts or projects isolated within one workspace, preserving privacy and making navigation easy. Customize each workspace with unique icons and names, so it’s a breeze to find what you need.
Perfect for power users, workspaces bring the flexibility of multiple browser windows into one streamlined experience, complete with shortcuts to switch between them in an instant. Organize, focus, and explore your tabs with Zen Browser’s workspaces for a truly efficient browsing experience.
### Container Tabs / Multi-Account Containers
Container Tabs is a feature derived from Firefox that provide separate cookie sessions within the same browser profile. With Container Tabs, you can log in with multiple accounts on the same sites without having to log out/in multiple times.
By default, there are four containers provided by Firefox: **Personal**, **Work**, **Banking**, and **Shopping**. You can manage, remove, or add new containers from `"Settings" > "General" > "Container Tabs"`. You can choose between 9 colors and 13 icons to customize or create your own containers.
![Container Tabs](/assets/user-manual/workspaces/container-tabs.png)
Browsing sessions with Zen in regular tabs are automatically classified as No Container. You can browse sites using container tabs by:
- Right click `"New Tab"` button and choose container to open
- Right click on `existing tabs > "Open in New Container Tab" > choose container to open`
- Right click on `links > "Open Link in New Container Tab" > choose container to open`
- After the sites is opened in a container tab, you can log in again with different account credentials.
By assigning containers to Workspaces in Zen, you can devote a workspace for certain usage of accounts without affecting your current login session (registered in regular/No Container tabs.)
If you assign one container for each workspaces and open a container tab outside of the assigned workspaces, you can make it automatically moved to the intended workspaces with checking `"Switch to workspace where container is set as default when opening container tabs"` option in `"Settings" > "Tab Management" > "Workspaces"`.
![Switch to workspace where container is set as default when opening container tabs](/assets/user-manual/workspaces/switch-to-workspace-when-opening-container-tabs.png)
**Limitation**: Currently Container Tabs separate your cookies/browsing sessions, but it doesn't separate your browsing history and extensions.
Learn more about Multi-Account Containers in Mozilla Support: https://support.mozilla.org/kb/containers