diff --git a/packages/web/src/content/docs/docs/config.mdx b/packages/web/src/content/docs/docs/config.mdx
index 21eccf1c..5cf243b6 100644
--- a/packages/web/src/content/docs/docs/config.mdx
+++ b/packages/web/src/content/docs/docs/config.mdx
@@ -230,6 +230,12 @@ You can also define agents using markdown files in `~/.config/opencode/agent/` o
You can disable providers that are loaded automatically through the `disabled_providers` option. This is useful when you want to prevent certain providers from being loaded even if their credentials are available.
+---
+
+### Formatters
+
+You can configure code formatters through the `formatter` option. See [Formatters documentation](/docs/formatters) for more details.
+
```json title="opencode.json"
{
"$schema": "https://opencode.ai/config.json",
diff --git a/packages/web/src/content/docs/docs/index.mdx b/packages/web/src/content/docs/docs/index.mdx
index a43a5241..0aaf01a6 100644
--- a/packages/web/src/content/docs/docs/index.mdx
+++ b/packages/web/src/content/docs/docs/index.mdx
@@ -18,6 +18,7 @@ Let's get started.
To use opencode, you'll need:
1. A modern terminal emulator like:
+
- [WezTerm](https://wezterm.org), cross-platform
- [Alacritty](https://alacritty.org), cross-platform
- [Ghostty](https://ghostty.org), Linux and macOS
@@ -40,26 +41,10 @@ You can also install it with the following:
- **Using Node.js**
-
- ```bash
- npm install -g opencode-ai
- ```
-
-
- ```bash
- bun install -g opencode-ai
- ```
-
-
- ```bash
- pnpm install -g opencode-ai
- ```
-
-
- ```bash
- yarn global add opencode-ai
- ```
-
+ ```bash npm install -g opencode-ai ```
+ ```bash bun install -g opencode-ai ```
+ ```bash pnpm install -g opencode-ai ```
+ ```bash yarn global add opencode-ai ```
- **Using Homebrew on macOS**
@@ -138,7 +123,7 @@ You should commit your project's `AGENTS.md` file to Git.
:::
This helps opencode understand the project structure and the coding patterns
-used.
+used.
---
@@ -178,22 +163,22 @@ You can ask opencode to add new features to your project. Though we first recomm
instead suggest _how_ it'll implement the feature.
Switch to it using the **Tab** key. You'll see an indicator for this in the lower right corner.
-
+
```bash frame="none" title="Switch to Plan mode"
```
Now let's describe what we want it to do.
-
+
```txt frame="none"
When a user deletes a note, we'd like to flag it as deleted in the database.
Then create a screen that shows all the recently deleted notes.
From this screen, the user can undelete a note or permanently delete it.
```
-
+
You want to give opencode enough details to understand what you want. It helps
to talk to it like you are talking to a junior developer on your team.
-
+
:::tip
Give opencode plenty of context and examples to help it understand what you
want.
@@ -202,7 +187,7 @@ You can ask opencode to add new features to your project. Though we first recomm
2. **Iterate on the plan**
Once it gives you a plan, you can give it feedback or add more details.
-
+
```txt frame="none"
We'd like to design this new screen using a design I've used before.
[Image #1] Take a look at this image and use it as a reference.
@@ -216,16 +201,16 @@ You can ask opencode to add new features to your project. Though we first recomm
do this by dragging and dropping an image into the terminal.
3. **Build the feature**
-
+
Once you feel comfortable with the plan, switch back to _Build mode_ by
hitting the **Tab** key again.
-
+
```bash frame="none"
```
-
+
And asking it to make the changes.
-
+
```bash frame="none"
Sounds good! Go ahead and make the changes.
```
@@ -271,4 +256,4 @@ Here's an [example conversation](https://opencode.ai/s/4XP1fce5) with opencode.
And that's it! You are now a pro at using opencode.
-To make it your own, we recommend [picking a theme](/docs/themes), [customizing the keybinds](/docs/keybinds), or playing around with the [opencode config](/docs/config).
+To make it your own, we recommend [picking a theme](/docs/themes), [customizing the keybinds](/docs/keybinds), [configuring code formatters](/docs/formatters), or playing around with the [opencode config](/docs/config).
diff --git a/packages/web/src/content/docs/docs/modes.mdx b/packages/web/src/content/docs/docs/modes.mdx
index 06dbff87..133fe7bd 100644
--- a/packages/web/src/content/docs/docs/modes.mdx
+++ b/packages/web/src/content/docs/docs/modes.mdx
@@ -46,6 +46,8 @@ This mode is useful when you want the AI to analyze code, suggest changes, or cr
You can switch between modes during a session using the _Tab_ key. Or your configured `switch_mode` keybind.
+See also: [Formatters](/docs/formatters) for information about code formatting configuration.
+
---
## Configure
@@ -99,6 +101,7 @@ tools:
---
You are in code review mode. Focus on:
+
- Code quality and best practices
- Potential bugs and edge cases
- Performance implications
@@ -281,6 +284,7 @@ tools:
You are in debug mode. Your primary goal is to help investigate and diagnose issues.
Focus on:
+
- Understanding the problem through careful analysis
- Using bash commands to inspect system state
- Reading relevant files and logs
@@ -304,6 +308,7 @@ tools:
You are in refactoring mode. Focus on improving code quality without changing functionality.
Priorities:
+
- Improve code readability and maintainability
- Apply consistent naming conventions
- Reduce code duplication