Zen Browser

https://github.com/zen-browser/docs
Admin
Zen Browser is a project that provides documentation for its browser, built with Next.js and...
Tokens:29,208
Snippets:361
Trust Score:8.1
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install dependencies with npm

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Installs all necessary packages listed in the package.json file.

```bash
npm install
```

--------------------------------

### Install Zen Stable via Tarball Script

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/install-linux.mdx

Installs the stable version of Zen directly to your home directory. After running, Zen will be installed in ~/.tarball-installations/zen.

```bash
curl -fsSL https://github.com/zen-browser/updates-server/raw/refs/heads/main/install.sh | $SHELL
```

--------------------------------

### Start the development server

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Starts a local development server and opens the homepage in the default browser. The server automatically reloads on code changes.

```bash
pnpm run dev
```

--------------------------------

### Run the Browser with npm start

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Launches the browser after building, allowing you to see your changes in action.

```bash
npm start
```

--------------------------------

### Install Zen Twilight via Tarball Script

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/install-linux.mdx

Installs the Twilight version of Zen, which is built freshly every night and contains the latest changes. Zen Twilight will be installed in ~/.tarball-installations/zen-twilight.

```bash
curl -fsSL https://github.com/zen-browser/updates-server/raw/refs/heads/main/install-twilight.sh | $SHELL
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Run this command in the project directory to install all packages listed in package.json, which are required for building and running Zen Browser.

```bash
npm i
```

--------------------------------

### Full preferences.json example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

A full example of a preferences.json file with three preference objects: a checkbox, a dropdown with options, and a string with disabledOn. Dropdown preferences must include an options field with label and value pairs.

```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"]
  }
]
```

--------------------------------

### Preview the documentation site

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Starts a local development server at http://localhost:3000. The site automatically reloads on changes to Markdown files. Provides npm, pnpm, and yarn alternatives.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Installs all dependencies listed in package.json, respecting the exact versions defined in pnpm-lock.yaml.

```bash
pnpm install
```

--------------------------------

### Valid option object example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Example of a valid option object with a string value.

```json
{
  "label": "Green",
  "value": "green" // valid string
}
```

--------------------------------

### Image path example in MDX callout

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/editing-with-vscode.mdx

When adding images in documentation, reference them from `/assets` (not `/public/assets`). This example shows the correct Markdown syntax for an image path.

```markdown
![Example Image](/assets/user-manual/image.png)
```

--------------------------------

### Install Linux build dependencies (apt, dnf, pacman)

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Install the required build dependencies on Debian-based, Fedora, and Arch Linux distributions. The Debian command updates the package list and installs curl, Python 3, pip, git, and sccache; the Fedora command installs Python 3, pip, git, and sccache; the Arch command installs base-devel, git, curl, Python, pip, libvips, and sccache. To avoid permission issues, it is recommended to work within a Python virtual environment.

```bash
sudo apt update && sudo apt install curl python3 python3-pip git sccache
```

```bash
sudo dnf install python3 python3-pip git sccache
```

```bash
sudo pacman -Syu --needed base-devel git curl python python-pip libvips sccache
```

--------------------------------

### Set up macOS Xcode environment

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Set up the macOS build environment after installing Xcode from the App Store. The first command switches the active developer directory to Xcode, and the second accepts the Xcode license.

```bash
sudo xcode-select --switch /Applications/Xcode.app
sudo xcodebuild -license
```

--------------------------------

### Build with Fewer Threads (--jobs 2)

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Builds the browser with fewer threads to avoid freezing or getting stuck.

```sh
npm run build -- --jobs 2
```

--------------------------------

### Full example combining checkbox and dropdown preferences

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Combines a checkbox and a dropdown preference in preferences.json and the corresponding CSS to toggle dark mode and select background colors.

```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"
      }
    ]
  }
]
```

```css
/* Checkbox for dark mode */
@media (-moz-pref("mod.mymod.enable_dark_mode")) {
  body {
    background-color: #000;
    color: #fff;
  }
}

/* Dropdown for background color selection */
body {
  @media (-moz-pref("mod.mymod.background_color", "green")) {
    background-color: #008000;
    color: #000;
  }

  @media (-moz-pref("mod.mymod.background_color", "blue")) {
    background-color: #0000ff;
    color: #fff;
  }
}
```

--------------------------------

### Options field example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Shows the options field structure for a dropdown preference. The value must be a string or integer; strings may not contain white space or special characters.

```json
  "options": [
    {
      "label": "Light",
      "value": "light"
    },
    {
      "label": "Dark",
      "value": "dark"
    }
  ]
```

--------------------------------

### Bootstrap the browser with npm run init

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Run this command to download additional files and prepare the environment. It sets up configuration files and downloads essential resources. The process may take some time and may appear inactive, but the commands are running in the background.

```bash
npm run init
```

--------------------------------

### Build the documentation site

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Builds the static site. Fix any errors before proceeding.

```bash
npm run build
```

--------------------------------

### Build the project

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Compiles and processes all source files into a production-ready format.

```bash
pnpm run build
```

--------------------------------

### Invalid option object example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Example of an invalid option object because the value is an array, which is not allowed; only string or integer values are valid.

```json
{
  "label": "Invalid option",
  "value": [] // invalid, only string/int are allowed
}
```

--------------------------------

### Manually Bootstrap the Project

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Manually bootstraps the project when 'npm run init' fails.

```sh
npm run bootstrap
```

--------------------------------

### disabledOn field examples

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Three JSON examples showing how to use the disabledOn field to restrict a preference to specific operating systems. The first disables on macOS, the second on Windows and Linux, and the third on all operating systems.

```json
{
  "disabledOn": ["macos"] // disables the preference for MacOS
}
```

```json
{
  "disabledOn": ["windows", "linux"] // disables the preference for Windows and Linux
}
```

```json
{
  "disabledOn": ["windows", "linux", "macos"] // disables the preference entirely
}
```

--------------------------------

### Create the Custom Allowed Browsers file

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/1password.mdx

Creates the empty custom_allowed_browsers file in the 1Password config directory. Run with sudo.

```bash
sudo touch /etc/1password/custom_allowed_browsers
```

--------------------------------

### String preference example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Defines a string preference that accepts a valid CSS property value as text input.

```json
{
  "property": "mod.mymod.tab_padding",
  "label": "Set tab padding",
  "type": "string"
}
```

--------------------------------

### Dropdown preference example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Defines a dropdown preference with two options. The options array must contain one or more option objects, each with a label and a string value.

```json
{
  "property": "mod.mymod.background_color",
  "label": "Background color",
  "type": "dropdown",
  "options": [
    {
      "label": "Green",
      "value": "green"
    },
    {
      "label": "Blue",
      "value": "blue"
    }
  ]
}
```
Tokens:
Raw