### Build and Start Element Web

Source: https://github.com/element-hq/element-web/blob/develop/developer_guide.md

Install dependencies and start the development server for Element Web. This command will build the application and watch for file changes.

```bash
pnpm install
pnpm start
```

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

### Install Project Dependencies and Build

Source: https://github.com/element-hq/element-web/blob/develop/packages/shared-components/README.md

Install all project dependencies using pnpm and build the library using the prepack script.

```bash
# Install dependencies
pnpm install

# Build the library
pnpm prepack
```

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

### Install a Module using build_config.yaml

Source: https://github.com/element-hq/element-web/blob/develop/docs/deprecated-modules.md

Add a module reference to your `build_config.yaml` file to install it. This example shows how to reference a module published on NPM.

```yaml
modules:
    # Our module happens to be published on NPM, so we use that syntax to reference it.
    - "@vector-im/element-web-ilag-module@latest"
```

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

### Install Dependencies with pnpm

Source: https://github.com/element-hq/element-web/blob/develop/apps/desktop/README.md

Run this command to fetch all necessary project dependencies before proceeding.

```bash
pnpm install
```

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

### Install Element Web on Debian/Ubuntu

Source: https://context7.com/element-hq/element-web/llms.txt

Installs Element Web using apt. Requires editing the config file and pointing a web server to the installation directory.

```bash
sudo apt install -y wget apt-transport-https
    sudo wget -O /usr/share/keyrings/element-io-archive-keyring.gpg \
        https://packages.element.io/debian/element-io-archive-keyring.gpg
    echo "deb [signed-by=/usr/share/keyrings/element-io-archive-keyring.gpg] \
        https://packages.element.io/debian/ default main" \
        | sudo tee /etc/apt/sources.list.d/element-io.list
    sudo apt update
    sudo apt install element-web
    # Edit /etc/element-web/config.json, then point your web server at /usr/share/element-web
```

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

### Start Element Desktop for Development

Source: https://github.com/element-hq/element-web/blob/develop/apps/desktop/README.md

Launches the Element Desktop application locally for development purposes.

```bash
pnpm start
```

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

### Run Storybook

Source: https://github.com/element-hq/element-web/blob/develop/packages/shared-components/README.md

Start the Storybook development server to view and test components.

```bash
pnpm storybook
```

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

### Starting the OAuth Server

Source: https://github.com/element-hq/element-web/blob/develop/apps/web/playwright/plugins/oauth_server/README.md

Instructions on how to start the OAuth server for testing purposes using Playwright's task system.

```APIDOC
```javascript
cy.task("startOAuthServer").then((port) => {
    // now we can configure Synapse or Element to talk to the OAuth2 server.
});
```
```

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

### Install Playwright Browsers and System Dependencies

Source: https://github.com/element-hq/element-web/blob/develop/docs/playwright.md

Installs Playwright browsers and necessary system dependencies. Ensure Playwright is installed before running this command.

```sh
pnpm playwright install --with-deps
```

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

### Setup Docker Image for Element Desktop

Source: https://github.com/element-hq/element-web/blob/develop/apps/desktop/README.md

Builds the Docker image required for building Element Desktop within a Docker container. Run this once.

```bash
pnpm run docker:setup
```

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

### Install Rust Toolchain for x86 Targets

Source: https://github.com/element-hq/element-web/blob/develop/docs/windows-requirements.md

Installs the Rust toolchain for building i686 (x86) targets from an x64 host and adds the corresponding target architecture. This is necessary for building x86 compatible native modules.

```cmd
rustup toolchain install stable-i686-pc-windows-msvc
```

```cmd
rustup target add i686-pc-windows-msvc
```

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

### Build Element Web from Source

Source: https://context7.com/element-hq/element-web/llms.txt

Steps to clone the Element Web repository, install dependencies, configure, and build the project. Use `pnpm build` on Windows.

```bash
git clone https://github.com/element-hq/element-web.git
cd element-web/apps/web
pnpm install
cp config.sample.json config.json   # then edit config.json
pnpm dist   # builds a deployable tarball; use pnpm build on Windows
# Serve the resulting element-x.x.x/ directory as static web content
```

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

### Install Shared Components and Peer Dependency

Source: https://github.com/element-hq/element-web/blob/develop/packages/shared-components/README.md

Install the shared components library and its peer dependency, compound-web, to avoid version conflicts.

```bash
pnpm add @element-hq/web-shared-components
pnpm add @vector-im/compound-web
```

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

### Install Windows Build Tools with Chocolatey

Source: https://github.com/element-hq/element-web/blob/develop/docs/windows-requirements.md

Installs essential development tools for building native modules on Windows using Chocolatey. Ensure Chocolatey is installed and accessible in your PATH.

```cmd
choco install --no-progress -y git nodejs-lts pnpm python StrawberryPerl rustup.install nasm magicsplat-tcl-tk
```

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

### Start OAuth Server Task

Source: https://github.com/element-hq/element-web/blob/develop/apps/web/playwright/plugins/oauth_server/README.md

Use this task to start the OAuth server. The returned port can then be used to configure other applications to communicate with the OAuth server.

```javascript
cy.task("startOAuthServer").then((port) => {
    // now we can configure Synapse or Element to talk to the OAuth2 server.
});
```

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

### Building Element Web with pnpm

Source: https://github.com/element-hq/element-web/blob/develop/apps/web/README.md

Commands to clone the repository, install dependencies, and build Element Web for deployment. Note that `pnpm dist` is not supported on Windows.

```bash
git clone https://github.com/element-hq/element-web.git
cd element-web/apps/web
pnpm install
pnpm dist
```

```bash
git clone https://github.com/element-hq/element-web.git
cd element-web/apps/web
pnpm install
pnpm build
```

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

### Add Seshat for E2E Search

Source: https://github.com/element-hq/element-web/blob/develop/docs/native-node-modules.md

Install the `matrix-seshat` Node module using pnpm. Ensure Rust and SQLCipher are installed first. This enables local event indexing and full-text search in E2E encrypted rooms.

```bash
pnpm add matrix-seshat
```

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

### Clone and Build matrix-js-sdk

Source: https://github.com/element-hq/element-web/blob/develop/developer_guide.md

Clone the matrix-js-sdk repository and install its dependencies. This is a prerequisite for local development of Element Web.

```bash
git clone https://github.com/matrix-org/matrix-js-sdk.git
pushd matrix-js-sdk
pnpm install
popd
```

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

### Build Native Modules with Docker

Source: https://github.com/element-hq/element-web/blob/develop/docs/native-node-modules.md

Use these commands to set up the Docker environment, install dependencies, and build native modules for Linux. The `INDOCKER_SQLCIPHER_BUNDLED=1` flag ensures SQLCipher is bundled.

```bash
pnpm docker:setup
pnpm docker:install
INDOCKER_SQLCIPHER_BUNDLED=1 pnpm docker:build:native
```

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

### Example ViewModel Implementation

Source: https://github.com/element-hq/element-web/blob/develop/docs/MVVM.md

Implements a ViewModel with a snapshot containing title and description, and provides methods to update them. Props are passed via the constructor.

```typescript
import { type FooViewSnapshot, type FooViewModel as FooViewModelInterface } from "./FooView";

// Props are the arguments passed to the view model constructor. They are usually used to pass in dependencies (eg: stores, sdk, etc) that the view model needs to do its work. They can also be used to pass in initial values for the snapshot.
interface Props {
    title: string;
}

/**
 * This is an example view model that implements the FooViewModelInterface.
 * It extends the BaseViewModel class which provides common functionality for view models, such as managing subscriptions and snapshots.
 * The view model is responsible for managing the state of the view and providing actions that can be called from the view.
 * In this example, we have a title and description in the snapshot, and actions to set the title and reload the description.
 */
export class FooViewModel extends BaseViewModel<FooViewSnapshot, Props> implements FooViewModelInterface {
    public constructor(props: Props) {
        // Call super with initial snapshot
        super(props, { title: props.title, description: costlyDescriptionLoading() });
    }

    public setTitle(title: string): void {
        // We only update the title in the snapshot, description remains unchanged.
        // Calling `this.snapshot.merge` will trigger the view to re-render with the new snapshot value.
        // If we had called `this.snapshot.set`, we would have needed to provide the full snapshot value, including the description.
        this.snapshot.merge({ title });
    }

    public reloadDescription(): void {
        // Simulate reloading the description by calling the costly function again and updating the snapshot.
        this.snapshot.merge({ description: costlyDescriptionLoading() });
    }

    /**
     * This is an example of how to access props in the view model. Props are passed in the constructor and can be accessed through `this.props`.
     */
    public printProps(): void {
        // Access props through `this.props`
        console.log("Current props:", this.props);
    }
}
```

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

### Building Element Desktop from Source

Source: https://context7.com/element-hq/element-web/llms.txt

This sequence of bash commands outlines the process for cloning the Element Web repository, installing dependencies, fetching Element Web releases, linking a local build, and building the desktop application.

```bash
git clone https://github.com/element-hq/element-web.git
cd element-web/apps/desktop
pnpm install

# Fetch the matching Element Web release (no config)
pnpm run fetch --noverify --cfgdir ""

# Or link a local Element Web build
ln -s ../web/webapp .

# Build for the current platform
pnpm run build
# Output packages are in dist/

# Run locally without packaging
pnpm start
```

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

### Install Element Web via Debian Package

Source: https://github.com/element-hq/element-web/blob/develop/docs/install.md

Installs Element Web on Debian/Ubuntu systems. Ensure you have wget and apt-transport-https installed. This adds the Element repository and installs the package.

```shell
sudo apt install -y wget apt-transport-https
sudo wget -O /usr/share/keyrings/element-io-archive-keyring.gpg https://packages.element.io/debian/element-io-archive-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/element-io-archive-keyring.gpg] https://packages.element.io/debian/ default main" | sudo tee /etc/apt/sources.list.d/element-io.list
sudo apt update
sudo apt install element-web
```

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

### Install Dependencies in Docker

Source: https://github.com/element-hq/element-web/blob/develop/apps/desktop/README.md

Installs project dependencies inside the Docker container.

```bash
pnpm run docker:install
```

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

### Run Element Web Development Server

Source: https://context7.com/element-hq/element-web/llms.txt

Sets up a development environment by cloning Matrix JS SDK and Element Web, linking them, configuring, and starting the development server. Opens at http://127.0.0.1:8080/.

```bash
git clone https://github.com/matrix-org/matrix-js-sdk.git
pushd matrix-js-sdk && pnpm install && popd

git clone https://github.com/element-hq/element-web.git
cd element-web/apps/web
echo "matrix-js-sdk=/path/to/matrix-js-sdk" > .link-config
cp config.sample.json config.json   # configure homeserver
pnpm install
pnpm start
# Open http://127.0.0.1:8080/
```

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

### Configure Desktop and Mobile Builds

Source: https://github.com/element-hq/element-web/blob/develop/docs/config.md

Specify availability and download URLs for desktop and mobile applications. Set iOS to null to indicate it's unavailable.

```json
{
    "desktop_builds": {
        "available": true,
        "logo": "https://example.org/assets/logo-small.svg",
        "url": "https://example.org/not_element/download"
    },
    "mobile_builds": {
        "ios": null,
        "android": "https://example.org/not_element/android",
        "fdroid": "https://example.org/not_element/fdroid"
    }
}
```

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

### Configure Desktop and Mobile Build Links

Source: https://context7.com/element-hq/element-web/llms.txt

Specify URLs for downloading native desktop and mobile clients when prompted by the app. Ensure 'available' is set to true to enable these links.

```json
{
    "desktop_builds": {
        "available": true,
        "logo": "https://example.org/assets/logo-small.svg",
        "url": "https://example.org/download",
        "url_macos": "https://example.org/download/macos",
        "url_win64": "https://example.org/download/windows",
        "url_linux": "https://example.org/download/linux"
    },
    "mobile_builds": {
        "ios": "https://apps.apple.com/app/id000000",
        "android": "https://play.google.com/store/apps/details?id=example.org",
        "fdroid": "https://f-droid.org/packages/example.org/"
    }
}
```

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

### Join a Room with Playwright Fixtures

Source: https://github.com/element-hq/element-web/blob/develop/docs/playwright.md

Set up a room and invite users using the `bot` client, then have the `app` client join the room. This approach uses REST APIs for setup, which is a recommended practice.

```typescript
test("should send a message", async ({ user, app, bot }) => {
    // Use the bot client to create a room
    const roomId = await bot.createRoom({
        name: "Test Room",
        invite: [user.userId],
    });

    // Accept the invite using the app client
    await app.client.joinRoom(roomId);

    // Now ready to test messaging
});
```

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

### Recompile Seshat with Electron Build Environment

Source: https://github.com/element-hq/element-web/blob/develop/docs/native-node-modules.md

After installing `electron-build-env`, use this command to recompile Seshat against Electron's Node version. Replace `vX.Y.Z` with your installed Electron version. The `--release` flag is crucial.

```bash
ELECTRON_VERSION=$(electron --version)
pnpm electron-build-env -- --electron ${ELECTRON_VERSION#v} -- neon build matrix-seshat --release
```

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

### Fetch and Verify Element Web Package

Source: https://github.com/element-hq/element-web/blob/develop/apps/desktop/README.md

Fetches the Element package and verifies its signature using the imported GPG key. The `--cfgdir ""` option ensures no configuration file is included.

```bash
pnpm run fetch --cfgdir ""
```

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

### Fetch Element with Custom Configuration Directory

Source: https://github.com/element-hq/element-web/blob/develop/apps/desktop/README.md

Fetches the Element package and includes a custom configuration file from a specified directory. Create the directory and place 'config.json' inside it.

```bash
mkdir myconfig
cp /path/to/my/config.json myconfig/
pnpm run fetch --cfgdir myconfig
```

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

### Module Loading

Source: https://github.com/element-hq/element-web/blob/develop/packages/module-api/element-web-module-api.api.md

Provides functionality to load and start modules within the application.

```APIDOC
## ModuleLoader

### Description
Manages the loading and starting of application modules.

### Methods
#### load
Loads a module.
- **moduleExport** (ModuleExport) - The module to load.
- **Returns**: Promise<void>

#### start
Starts the module loader.
- **Returns**: Promise<void>
```

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

### Fetch Element Web (No Verification)

Source: https://github.com/element-hq/element-web/blob/develop/apps/desktop/README.md

Fetches the prebuilt Element package from GitHub releases without signature verification. The `--cfgdir ""` option ensures no configuration file is included.

```bash
pnpm run fetch --noverify --cfgdir ""
```

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

### Getting Account Data

Source: https://github.com/element-hq/element-web/blob/develop/packages/module-api/element-web-module-api.api.md

Retrieves account data for a given event type as a Watchable object.

```typescript
get(eventType: string): Watchable<unknown>;
```

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

### AccountDataApi

Source: https://github.com/element-hq/element-web/blob/develop/packages/module-api/element-web-module-api.api.md

API for managing account data, including getting, setting, and deleting account data entries.

```APIDOC
## AccountDataApi

### Description
Provides methods to interact with user-specific account data.

### Methods
#### delete
Deletes an account data entry for a given event type.

- **eventType** (string) - Required - The type of the account data to delete.

#### get
Retrieves an account data entry for a given event type.

- **eventType** (string) - Required - The type of the account data to retrieve.
- Returns: A `Watchable` object representing the account data.

#### set
Sets or updates an account data entry for a given event type.

- **eventType** (string) - Required - The type of the account data to set.
- **content** (unknown) - Required - The content of the account data.
```

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

### Running Element Desktop with Custom Profiles

Source: https://context7.com/element-hq/element-web/llms.txt

These bash commands demonstrate how to run Element Desktop with separate profiles for isolated data and configurations, or specify a custom profile directory.

```bash
# Run a separate "Work" profile (isolated data, separate config)
element-desktop --profile Work

# Specify a fully custom profile data directory
element-desktop --profile-dir /home/user/element-profiles/work
```

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

### Initialize SourceMap Consumer

Source: https://github.com/element-hq/element-web/blob/develop/apps/web/res/decoder-ring/index.html

Initializes the SourceMap consumer with the WASM module path. This is typically done once at the start of the application.

```javascript
sourceMap.SourceMapConsumer.initialize({"lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"});
```

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

### Build Native Modules for Windows 64-bit

Source: https://github.com/element-hq/element-web/blob/develop/docs/native-node-modules.md

On Windows, use this command to specifically build native modules for the 64-bit architecture.

```bash
pnpm run build:64
```

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

### Getting a Room by ID

Source: https://github.com/element-hq/element-web/blob/develop/packages/module-api/element-web-module-api.api.md

Retrieves a Room object based on its unique ID. Returns null if the room is not found.

```typescript
getRoom: (id: string) => Room | null;
```

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

### Getting Configuration Value

Source: https://github.com/element-hq/element-web/blob/develop/packages/module-api/element-web-module-api.api.md

Retrieve a specific configuration value by its key, or the entire configuration object if no key is provided.

```typescript
get<K extends keyof Config = never>(key?: K): Config | Config[K];
```

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

### Runtime Modules Configuration

Source: https://context7.com/element-hq/element-web/llms.txt

Dynamically load extension modules at startup without rebuilding Element by specifying their URLs.

```APIDOC
## Runtime Modules

Dynamically load extension modules at startup without rebuilding Element.

```json
{
    "modules": [
        "https://example.com/my-module/index.js",
        "/modules/local-module/index.js"
    ]
}
```
```

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

### Generate Translation Strings

Source: https://github.com/element-hq/element-web/blob/develop/packages/shared-components/README.md

Generate translation strings for the shared components package. Ensure you have reviewed the translation guides before running this command.

```bash
pnpm i18n
```

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

### Build Native Modules Directly

Source: https://github.com/element-hq/element-web/blob/develop/docs/native-node-modules.md

Run this command to build native modules for your system's architecture. This is the recommended approach for building on your local machine.

```bash
pnpm run build:native
```

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

### Setting Values Safely

Source: https://github.com/element-hq/element-web/blob/develop/docs/settings.md

Before setting a value, check if the level is supported and if the user can set the value. This example demonstrates the checks before calling SettingsStore.setValue.

```javascript
const isSupported = SettingsStore.isLevelSupported(SettingLevel.ROOM);
if (isSupported) {
    const canSetValue = SettingsStore.canSetValue("mySetting", "!curbf:matrix.org", SettingLevel.ROOM);
    if (canSetValue) {
        SettingsStore.setValue("mySetting", "!curbf:matrix.org", SettingLevel.ROOM, newValue);
    }
}
```