diff --git a/.markdownlint.json b/.markdownlint.json
index c1e9da20..59b85650 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -1,4 +1,5 @@
{
"MD013": false,
- "MD025": false
+ "MD025": false,
+ "MD033": false
}
diff --git a/docs/01-Getting Started/index.md b/docs/01-Getting Started/index.md
index c7925804..f9ab3b25 100644
--- a/docs/01-Getting Started/index.md
+++ b/docs/01-Getting Started/index.md
@@ -28,16 +28,17 @@ Here's what sets Phoenix Code apart.
## Free vs Pro
-You can build complete websites for free. The core editor, Live Preview, Design Mode, Git, Terminal, and code tools are all included at no cost.
+You can build complete websites for free. The core editor, [Live Preview](/docs/Features/Live%20Preview), [Design Mode](/docs/design-mode), [Git](/docs/Features/git), [Terminal](/docs/Features/terminal), and code tools are all included at no cost.
**Phoenix Pro** adds:
-- **Live Preview Edit** — edit the rendered page directly and sync changes back to your source automatically.
-- **AI** — unlimited AI use (free users get a daily and monthly chat limit).
-- **Device Preview** — check how your page looks at phone, tablet, and desktop sizes.
-- **Measurements** — ruler lines from a selected element to the edges of the page, labeled with exact pixel positions, for precise alignment.
-- **Image Gallery** — browse stock images from providers like Unsplash and Pexels and embed or download them into your project without leaving Phoenix Code.
-- **Markdown Editor** — edit Markdown directly in the preview with a full rich-text editor that keeps your source in sync.
+- **[Live Preview Edit](/docs/Pro%20Features/live-preview-edit)**: edit the rendered page directly and sync changes back to your source automatically.
+- **[Styles Bar](/docs/Pro%20Features/styles-bar)**: style any element visually from the Live Preview, with fonts, colors, spacing, and layout controls that save straight to your CSS.
+- **[AI](/docs/Pro%20Features/ai-chat)**: unlimited AI use (free users get a daily and monthly chat limit).
+- **[Device Preview](/docs/Pro%20Features/device-preview)**: check how your page looks at phone, tablet, and desktop sizes.
+- **[Measurements](/docs/Pro%20Features/measurements)**: ruler lines from a selected element to the edges of the page, labeled with exact pixel positions, for precise alignment.
+- **[Image Gallery](/docs/Pro%20Features/image-gallery)**: browse stock images from providers like Unsplash and Pexels and embed or download them into your project without leaving Phoenix Code.
+- **[Markdown Editor](/docs/Pro%20Features/markdown-editor)**: edit Markdown directly in the preview with a full rich-text editor that keeps your source in sync.
See plans on the [pricing page](https://phcode.io/pricing).
diff --git a/docs/02-Live Preview/02-live-preview-edit.md b/docs/02-Live Preview/02-live-preview-edit.md
index a23a2afb..9ef9ae7e 100644
--- a/docs/02-Live Preview/02-live-preview-edit.md
+++ b/docs/02-Live Preview/02-live-preview-edit.md
@@ -10,7 +10,7 @@ import VideoPlayer from '@site/src/components/Video/player';
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
:::
-**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more.
+**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, insert new elements, rearrange them with drag and drop, swap images, edit links, style elements, and much more.
**Phoenix Code** updates your source code automatically as you make changes.
+
+The bar shows the most common elements: Heading, Paragraph, Image, Link, Button, and Div. Click one to add it to the page.
+
+To pick from the full element list, click the **three-dots icon** at the end of the bar. This opens a searchable list with the same elements as the [Insert Element](#insert-element) panel.
+
+
+
+When you pick an element:
+
+- If the file is empty, Phoenix Code creates the standard HTML page structure and places the element inside ``.
+- If the file already has some markup, it is preserved and the element is added to it.
+
+The new element is automatically selected so you can continue editing. Press `Ctrl/Cmd + Z` to undo the insert.
+
+> The Starter Bar disappears once your page has content, and comes back if the page becomes empty again, for example after you delete every element.
+
+To turn the Starter Bar off, set the `livePreviewShowStarterBar` preference to `false`. It is `true` by default.
+See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
+
## Control Box
When you click an element in the Live Preview, a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it.
@@ -37,6 +63,7 @@ When you click an element in the Live Preview, a **Control Box** appears near it
### Element Info
The left side of the Control Box displays information about the selected element:
+
- **Tag name**: The element type (for example, `div`, `p`, `img`)
- **ID**: The element’s ID attribute (if present), shown with a `#` prefix
- **Dimensions**: The element’s size in pixels (width × height)
@@ -176,6 +203,7 @@ When you start editing text, a **Formatting Toolbar** appears near the element.
Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting is applied to the entire element. Clicking a format that is already applied removes it.
The toolbar shows three primary formatting buttons:
+
- **Bold** (`Ctrl/Cmd + B`): `` tag
- **Italic** (`Ctrl/Cmd + I`): `` tag
- **Underline** (`Ctrl/Cmd + U`): `` tag
@@ -183,6 +211,7 @@ The toolbar shows three primary formatting buttons:
#### More Formatting Options
Click the **More** button *(three-dots icon)* on the right side of the toolbar to see additional formatting options:
+
- **Strikethrough**: `` tag
- **Subscript**: `` tag
- **Superscript**: `` tag
@@ -200,11 +229,12 @@ To drag an element: click and hold the element, then move your mouse to the desi
src="https://docs-images.phcode.dev/videos/live-preview-edit/drag-drop.mp4"
/>
-#### Visual Indicators
+### Visual Indicators
+
- **Arrow markers** to indicate the drop position:
- - **Up (↑) or Down (↓) arrows**: Places the element before or after the target element
- - **Left (←) or Right (→) arrows**: Places the element before or after the target element (appears for flex row layouts)
- - **⊕ symbol with a dashed border**: Places the element inside the target as a child
+ - **Up (↑) or Down (↓) arrows**: Places the element before or after the target element
+ - **Left (←) or Right (→) arrows**: Places the element before or after the target element (appears for flex row layouts)
+ - **⊕ symbol with a dashed border**: Places the element inside the target as a child
- **Target label**: A small box next to the marker displays the target element's tag name, ID, and classes
@@ -237,11 +267,13 @@ You can cut, copy, and paste elements in Edit Mode using standard keyboard short
### Using Keyboard Shortcuts
When you click an element in the Live Preview, keyboard focus moves to the Live Preview. You can then use:
+
- **Ctrl/Cmd + X**: Cut the selected element
- **Ctrl/Cmd + C**: Copy the selected element
- **Ctrl/Cmd + V**: Paste the copied or cut element below the currently selected element
### Using the More Options Menu
+
Click the **More Options** button *(three-dots icon)* in the Control Box and select **Cut**, **Copy**, or **Paste** from the dropdown menu.
diff --git a/docs/02-Live Preview/03-styles-bar.md b/docs/02-Live Preview/03-styles-bar.md
new file mode 100644
index 00000000..27430a57
--- /dev/null
+++ b/docs/02-Live Preview/03-styles-bar.md
@@ -0,0 +1,214 @@
+---
+title: Styles Bar
+slug: "/Pro Features/styles-bar"
+---
+
+import VideoPlayer from '@site/src/components/Video/player';
+
+:::info Pro Feature
+[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
+:::
+
+The **Styles Bar** lets you style elements visually right inside the Live Preview, and it automatically syncs your code in real time.
+When you select an element in [Edit Mode](./live-preview-edit), a bar appears at the bottom of the Live Preview with controls for **fonts**, **colors**, **borders**, **spacing**, **layout**, and more.
+
+
+
+> The controls shown depend on the selected element. For example, text controls are not shown for images.
+
+You can move the bar to the top of the Live Preview using the **dock button** at the right end of the bar.
+
+
+
+## Save Changes To
+
+Phoenix Code gives you control to choose where you want to save your edits. By default, all the changes are saved directly on the element as an inline style. If you want to save the changes in one of the CSS rules, you can click on the **Save changes to** button:
+
+
+
+It shows all the available selectors for that element. Select the one you want, and all the changes made to that element will automatically get saved in that selector.
+> Each selector also shows the number of elements it affects on the page.
+
+### Creating a New Rule
+
+Click **Create new rule…** to save your edits in a new CSS rule. Type a class like `.card` or an id like `#hero` and click **Create**. Phoenix Code creates the rule and also adds the class or id to the element, so the rule applies right away.
+
+
+
+### Editing Element States
+
+The **State** dropdown in the popover lets you style the element's `hover`, `focus`, and `active` states. Pick a state and the Live Preview turns it on while you edit, with a banner showing which state you are editing.
+
+For any other state, type it in the **Create new rule** field, for example `.button:disabled`.
+
+
+
+> States need a CSS rule to live in, so they are not available when saving to inline styles.
+
+## Font Family
+
+Opens a font picker with three tabs:
+
+- **System**: Common system fonts like Arial, Georgia, and Verdana. These need no download and work everywhere.
+- **Google**: The full Google Fonts collection. Popular fonts are shown first, and you can search for any font. Each font is shown in its own style, so you can see how it looks before picking it. Picking one adds the Google Fonts link to your HTML.
+- **Manual**: Type any font name yourself. You can also upload a font file (`.ttf`, `.otf`, `.woff`, `.woff2`), and Phoenix Code adds it to your project and applies it.
+
+Fonts already used on the page appear in an **On this page** group, so you can reuse them quickly.
+
+
+
+## Font Size
+
+Sets the font size. Type a value or use the **+/-** buttons. Click the unit button to switch between `px`, `em`, `rem`, and `%`, and the value is converted to the new unit automatically.
+
+> These shortcuts work in every number field of the Styles Bar: scroll over a field to change its value, hold `Shift` while clicking **+/-** for bigger steps `(x10)`, or hold `Alt` for smaller ones `(x0.1)`.
+
+
+
+## Text Style
+
+The text style popover has two tabs.
+
+The **Format** tab:
+
+- **Font weight**: Controls how thick the text is, with a slider from Thin (100) to Black (900).
+- **Format**: Italic, underline, strikethrough, and overline.
+- **Alignment**: Aligns text left, center, right, or justified.
+- **Case**: Shows text as uppercase, lowercase, or capitalized, without changing the text in your HTML.
+- **Cursor**: The mouse cursor shown when hovering over the element, like pointer or grab.
+
+The **Spacing** tab:
+
+- **Line height**: The vertical space between lines of text.
+- **Letter spacing**: The space between characters.
+- **Word spacing**: The space between words.
+- **Text indent**: How far the first line of text is indented.
+
+To learn more about these properties, see [MDN's text styling guide](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals).
+
+
+
+> Looking for bold? Use the font weight slider.
+
+## Background Color
+
+The **Background color** button shows the element's current background color. Click it to open a full color picker:
+
+- Pick a color visually, or type one as Hex, RGB, or HSL.
+- The **opacity** field controls how see-through the color is.
+- The **eyedropper** lets you pick a color from anywhere on the page.
+- **Swatches** shown on the left side displays all the colors already used in the page, plus a set of common colors.
+
+
+
+> The eyedropper is not available in Firefox, Safari and in the Linux desktop app.
+
+## Text Color
+
+The **Text color** button works the same way as [Background Color](#background-color), but it controls the color of the element's text. It opens the same color picker.
+
+## Border & Outline
+
+The popover has two tabs, **Border** and **Outline**.
+
+The **Border** tab:
+
+- **Style**: None, solid, dashed, dotted, or double. Hovering an option previews it on the element.
+- **Width**: The thickness of the border.
+- **Color**: Click the swatch to open the color picker to set the color of the border.
+- **Radius**: Rounds the corners of the bordered element.
+
+By default, edits apply to all four sides of the border. Use the **sides button** in the popover header to edit only the top, right, bottom, or left side.
+
+The **Outline** tab has the same style, width, and color options, plus:
+
+- **Offset**: The gap between the outline and the element's edge.
+
+> An outline is drawn outside the element's border and takes up no space on the page.
+
+
+
+## Box Model
+
+The popover has three tabs, **Size**, **Padding**, and **Margin**. They sit together because they measure one element from the inside out.
+
+The **Size** tab:
+
+- **Width and Height**: The element's size. Empty fields show the current size of the element as placeholders.
+- **Min / max**: Click the chip to set minimum and maximum size limits. This is very useful for creating responsive web pages.
+
+The **Padding** and **Margin** tabs each show four fields for the top, right, bottom, and left sides, arranged around a frame just like they sit on the page.
+
+> Padding is the space inside the element, between its content and its border. Margin is the space outside it.
+
+The button in the center of the frame controls how the sides are linked:
+
+- **Independent**: Each side has its own value.
+- **Paired**: Top and bottom are linked, left and right are linked.
+- **All linked**: One value for every side.
+
+Linked fields are color coded so you can see which sides move together.
+
+
+
+## Layout
+
+The popover has two tabs, **Display** and **Position**.
+
+The **Display** tab:
+
+- **Display**: How the element is laid out: `Block`, `Inline`, `Flex`, `Grid`, `Hidden`, and more. Picking `Flex` or `Grid` reveals options like `direction`, `alignment`, `wrap`, and `gap`.
+- **Opacity**: How see-through the element is. This fades the whole element, including its text and children.
+
+The **Position** tab:
+
+- **Position**: `Static`, `Relative`, `Absolute`, `Fixed`, or `Sticky`, with fields to offset the element from each side.
+- **Z-index**: Which element appears on top when elements overlap.
+
+To learn more about these properties, see MDN's guides on [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) and [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+
+
+
+## When a Change Is Overridden
+
+Sometimes a more specific CSS rule wins over the rule you are editing, so your change has no visible effect. In that case, Phoenix Code automatically adds `!important` to your change to make it take effect.
+
+If the change is still overridden even after the `!important` property, Phoenix Code shows a notification with an **Apply anyway** button, which applies the style directly on the element so it always takes effect.
+
+Read more about [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity) on MDN.
+
+## Reset and Undo
+
+Every popover has a **Reset** button in its header. It reverts all the changes you made since opening that popover. If you have not changed anything, the button stays disabled.
+
+
+
+You can also undo any Styles Bar edit with `Ctrl/Cmd + Z`, like every other Edit Mode operation. See [Undo and Redo](./live-preview-edit#undo-and-redo).
+
+## Hiding the Styles Bar
+
+To hide the bar, open the **More Options** menu *(three-dots icon)* in the Control Box and unselect **Show Styles Bar**. While hidden, a **palette icon** appears in the Control Box tools to bring it back.
+
+
diff --git a/docs/02-Live Preview/03-device-preview.md b/docs/02-Live Preview/04-device-preview.md
similarity index 99%
rename from docs/02-Live Preview/03-device-preview.md
rename to docs/02-Live Preview/04-device-preview.md
index e019dcb5..7e2af616 100644
--- a/docs/02-Live Preview/03-device-preview.md
+++ b/docs/02-Live Preview/04-device-preview.md
@@ -44,5 +44,3 @@ While you drag the edge of the Live Preview panel, a ruler appears across the to
In [Design Mode](./live-preview-edit), the Live Preview takes over the full window. In that case, you'll see resize handles directly on the page: drag the left or right handle to change the **width**, or drag the bottom handle to change the **height**. The same ruler appears, and the label now shows both dimensions, like `iPad Mini — 768px × 1024px`.
In Design Mode, a **Fit to screen** option is also available in the device dropdown. This resizes the page to fit the available space in the Live Preview.
-
-
diff --git a/docs/02-Live Preview/04-measurements.md b/docs/02-Live Preview/05-measurements.md
similarity index 97%
rename from docs/02-Live Preview/04-measurements.md
rename to docs/02-Live Preview/05-measurements.md
index c4e7e50b..64fb2a80 100644
--- a/docs/02-Live Preview/04-measurements.md
+++ b/docs/02-Live Preview/05-measurements.md
@@ -22,5 +22,5 @@ While in [Edit Mode](./live-preview-edit), click the dropdown arrow next to the
Alternatively, you can enable measurements from the **More Options** menu *(three-dots icon)* in the Control Box. Select **Show Measurements** to toggle it on or off.
-You can also change this setting by updating the `livePreviewShowMeasurements` preference in the preferences file. Set it to `true` or `false` (default).
+You can also change this setting by updating the `livePreviewShowMeasurements` preference in the preferences file. Set it to `true` or `false` (default).
See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
diff --git a/docs/02-Live Preview/05-image-gallery.md b/docs/02-Live Preview/06-image-gallery.md
similarity index 96%
rename from docs/02-Live Preview/05-image-gallery.md
rename to docs/02-Live Preview/06-image-gallery.md
index d52bc46c..b6b16a49 100644
--- a/docs/02-Live Preview/05-image-gallery.md
+++ b/docs/02-Live Preview/06-image-gallery.md
@@ -33,7 +33,7 @@ To download the image to your project instead, click the **Download image** butt
> If this is your first time selecting an image, Phoenix Code prompts you to choose a folder where images should be saved. See [Folder Selection Dialog](#folder-selection-dialog) for details.
-> Images are embedded or downloaded at the currently selected size. See [Image Size Selection](#image-size-selection) for details.
+> Images are embedded or downloaded at the currently selected size. See [Image Size Selection](#image-size-selection) for details.
Below each thumbnail, the photographer's name and a link to their profile is displayed.
@@ -53,6 +53,7 @@ If no folder has been selected yet, Phoenix Code prompts you to choose where the
The first time you select an image, Phoenix Code prompts you to choose where images should be saved in your project.
The dialog includes:
+
- **Folder path input**: Enter a folder path relative to your project root. Phoenix Code suggests matching folders as you type.
- **Remember this folder for this project**: When checked (default), Phoenix Code reuses this folder for future image downloads in the same project.
@@ -72,13 +73,14 @@ Hovering over a thumbnail displays the estimated file size in the top-left corne
> Higher resolutions produce larger image files. Standard (1080px) is the default size.
### Available Image size options
-* Thumbnail (200px)
-* Avatar (320px)
-* Card (640px)
-* Content (960px)
-* Standard (1080px)
-* Hero (1280px)
-* Banner (1600px)
-* Retina (2200px)
+
+- Thumbnail (200px)
+- Avatar (320px)
+- Card (640px)
+- Content (960px)
+- Standard (1080px)
+- Hero (1280px)
+- Banner (1600px)
+- Retina (2200px)
diff --git a/docs/02-Live Preview/06-markdown-editor.md b/docs/02-Live Preview/07-markdown-editor.md
similarity index 97%
rename from docs/02-Live Preview/06-markdown-editor.md
rename to docs/02-Live Preview/07-markdown-editor.md
index 03877f73..e3968058 100644
--- a/docs/02-Live Preview/06-markdown-editor.md
+++ b/docs/02-Live Preview/07-markdown-editor.md
@@ -101,11 +101,11 @@ Start typing to filter the list. Use the arrow keys to navigate and press `Enter
You can also use standard Markdown shortcuts as you type:
-- `# ` through `##### ` for headings
-- `- ` or `* ` for bullet lists
-- `1. ` for numbered lists
-- `- [ ] ` for task lists
-- `> ` for blockquotes
+- `#` through `#####` for headings
+- `-` or `*` for bullet lists
+- `1.` for numbered lists
+- `- [ ]` for task lists
+- `>` for blockquotes
- ` ``` ` for code blocks
- `---` for dividers
@@ -161,7 +161,7 @@ Click an existing link to see a popover showing the URL, with options to **Edit*
### Keyboard Shortcuts
| Action | Shortcut |
-|--------|----------|
+| -------- | ---------- |
| Bold | `Ctrl/Cmd + B` |
| Italic | `Ctrl/Cmd + I` |
| Underline | `Ctrl/Cmd + U` |
diff --git a/docs/02-Live Preview/07-php-live-preview.md b/docs/02-Live Preview/08-php-live-preview.md
similarity index 92%
rename from docs/02-Live Preview/07-php-live-preview.md
rename to docs/02-Live Preview/08-php-live-preview.md
index 3805af15..e99b8260 100644
--- a/docs/02-Live Preview/07-php-live-preview.md
+++ b/docs/02-Live Preview/08-php-live-preview.md
@@ -8,6 +8,8 @@ import VideoPlayer from '@site/src/components/Video/player';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+This page covers running PHP pages in the Live Preview. For PHP editing features like completions and error checking, see [PHP Code Intelligence](/docs/Features/php-code-intelligence).
+
Setting up Live Preview for PHP projects is straightforward with *Apache* and *XAMPP*. Below are the installation and configuration steps for each operating system:
\ No newline at end of file
+/>
diff --git a/docs/02-Live Preview/08-live-preview-settings.md b/docs/02-Live Preview/09-live-preview-settings.md
similarity index 75%
rename from docs/02-Live Preview/08-live-preview-settings.md
rename to docs/02-Live Preview/09-live-preview-settings.md
index a44bfe1d..6aed72d8 100644
--- a/docs/02-Live Preview/08-live-preview-settings.md
+++ b/docs/02-Live Preview/09-live-preview-settings.md
@@ -16,11 +16,12 @@ There are two ways to access the Live Preview Settings dialog:
-2. **From the Live Preview Panel**:
+1. **From the Live Preview Panel**:
- Locate the live preview panel, typically found at the right side of the editor.
- Hover over the live preview panel title bar and click the gear icon (⚙️) located at the top right of the panel title bar.
+
## Configuring Your Server
@@ -31,11 +32,11 @@ Within the Live Preview Settings dialog, you can configure the following options
- **Use Custom Development Server for This Project**: Enable this option to use your custom server for the live preview.
- - **Server URL**: Enter the full URL where your server is running, including the port number (e.g., `http://localhost:8000`).
+ - **Server URL**: Enter the full URL where your server is running, including the port number (e.g., `http://localhost:8000`).
- - **Serving Folder in Project**: Specify the path to the folder in your project that your server serves (e.g., `www/`, default is `/`, ie the full project is assumed to be served by the given server).
+ - **Serving Folder in Project**: Specify the path to the folder in your project that your server serves (e.g., `www/`, default is `/`, ie the full project is assumed to be served by the given server).
- - **Server Framework**: Choose the framework or environment your server uses from the dropdown menu. If your server supports hot reloading, check the corresponding box to enable this feature. Currently 2 options are supported- [Docusaurus](https://docusaurus.io/) and `Custom`. Select `Custom` for all frameworks that are not `Docusaurus`.
+ - **Server Framework**: Choose the framework or environment your server uses from the dropdown menu. If your server supports hot reloading, check the corresponding box to enable this feature. Currently 2 options are supported- [Docusaurus](https://docusaurus.io/) and `Custom`. Select `Custom` for all frameworks that are not `Docusaurus`.
After configuring these settings, click 'Done' to save and apply your settings. The live preview will now use your custom server.
diff --git a/docs/03-ai.md b/docs/03-ai.md
index cc88323f..0ad59585 100644
--- a/docs/03-ai.md
+++ b/docs/03-ai.md
@@ -27,6 +27,7 @@ Free users get a daily and monthly chat limit. Once you're past halfway on eithe
- **[Plan, Auto-Edit, and Edit modes](#permission-modes)** let you decide how much freedom the AI has. Plan mode confirms before any change, Auto-Edit applies safe edits automatically, and Edit lets you approve each action.
- **[Restore points and a visual undo timeline](#undo-and-restore)** mean every AI change is reversible. If you don't like what it did, roll back with one click.
- **Live preview integration** — the AI can see your running app, take screenshots, click around, and verify its own work.
+- **[Choose the model](#choosing-a-model)** you want, and switch it even in the middle of a chat.
- **[Bring your own provider](#settings)** — Claude from Anthropic (the default) gives the best results, or bring your own API key from any Claude Code CLI-compatible provider.
- **Privacy-first onboarding** with a clear consent dialog and a video walkthrough.
- **[Type while the AI is still working](#sending-messages)** — your next message gets queued.
@@ -39,6 +40,8 @@ AI requires the Claude Code CLI to be installed on your machine. If it's not ins
Once installed, click **Set up Claude Code** to log in. Phoenix Code detects when the login is complete and opens the chat panel automatically.
+If your login expires later, the chat shows a **Claude Code is signed out or your login has expired** notice with a **Log in to Claude in Terminal** button. Click it, type `/login` in the terminal that opens, then send your message again.
+
@@ -92,6 +95,19 @@ Click the **camera button** to take a screenshot and attach it. The dropdown let
+## Choosing a Model
+
+The chat header shows which model is answering you. Hover over the panel and the model name appears on the left. Click it to pick a different one.
+
+
+
+The dropdown lists:
+
+- **Default**: lets Claude Code pick. The row shows which model that is right now, for example *Currently Fable*.
+- The models your provider offers, such as **Fable**, **Opus**, **Sonnet**, and **Haiku**. Fable appears only on plans that include it.
+
+You can switch models in the middle of a chat. The new model takes over from your next message and keeps the conversation history.
+
## Permission Modes
The AI has three permission levels that control how much it can do on its own. Click the **permission label** at the bottom of the panel to cycle between them.
@@ -142,6 +158,7 @@ Click the **gear icon** in the chat panel to open AI settings.
This will open a dialog where you can:
+
- Pick the **active provider** from a dropdown at the top
- Add a custom API provider with a name, API key (masked), and base URL
- Edit or delete any custom provider you've added
@@ -159,10 +176,20 @@ Phoenix Code uses the Claude Code CLI under the hood, so it works with any provi
- **z.ai GLM** — tested working as a drop-in alternative. Use z.ai's Anthropic-compatible endpoint as the base URL.
- **Other Anthropic-API-compatible providers** — add the provider's base URL and API key in the dialog above.
+## Turning AI Off
+
+If you don't want AI in your editor, you can switch it off completely. Go to `View > Enable AI` and unselect it. Phoenix Code asks you to confirm, and the change takes effect after you restart the app.
+
+You can also do this from the AI settings dialog, with the **Enable AI features** checkbox.
+
+This turns off everything: the AI tab in the sidebar and the chat panel. To get it back, go to `View > Enable AI` again.
+
+> This is a user controlled preference. For schools and workplaces, please refer to [AI Control For School And Work](/docs/control-ai).
+
## Keyboard Shortcuts
| Action | Shortcut |
-|--------|----------|
+| -------- | ---------- |
| Send message | `Enter` |
| New line | `Shift + Enter` |
| Cycle permission mode | `Shift + Tab` |
diff --git a/docs/04-Editing & Code/07-doc-comments.md b/docs/04-Editing & Code/07-doc-comments.md
new file mode 100644
index 00000000..1b5e9f1a
--- /dev/null
+++ b/docs/04-Editing & Code/07-doc-comments.md
@@ -0,0 +1,52 @@
+---
+title: Doc Comments
+slug: "/Features/doc-comments"
+---
+
+import VideoPlayer from '@site/src/components/Video/player';
+
+**Phoenix Code** can write documentation comments for your functions and classes. Type `/**` on the line above a function and accept the hint that appears. Phoenix Code reads the function's signature and generates a comment with all its parameters filled in.
+
+
+
+## Generating a Doc Comment
+
+1. Place your cursor on an empty line right above a function or class.
+2. Type `/**`. A code hint appears, for example **Add JSDoc comment**.
+3. Press `Enter` or `Tab` to accept it.
+
+
+
+The comment expands with a description placeholder, one `@param` tag for each parameter, and an `@returns` tag if the function returns something.
+
+The description is selected first, so you can start typing right away. Press `Tab` to jump to the next field, like a parameter type.
+
+## Supported Languages
+
+Each language gets a comment in its own convention:
+
+| Language | Comment style |
+| ---------- | --------------- |
+| JavaScript, JSX | JSDoc, with `@param {type} name` tags |
+| TypeScript, TSX | JSDoc without `{type}` braces, since the types already live in the code |
+| PHP | PHPDoc, with `@param type $name` tags |
+| Java | Javadoc |
+| C, C++ | Doxygen |
+| Python | Docstring with `Args:` and `Returns:` sections |
+
+> In Python, type `"""` on the first line inside a `def` or `class` instead, since docstrings sit below the definition.
+
+
+
+## What Gets Filled In
+
+The generated comment is built from the actual signature, not a generic template:
+
+- Every parameter gets its own tag. Optional parameters are shown as `[name]`.
+- In JavaScript, parameter and return types are taken from the signature when declared, and default to `*` otherwise.
+- `@returns` is skipped for constructors and functions that return nothing.
+- In Python, `self` and `cls` are skipped, and the `Returns:` section is added only when the function has a return type annotation.
diff --git a/docs/04-Editing & Code/07-beautify-code.md b/docs/04-Editing & Code/08-beautify-code.md
similarity index 73%
rename from docs/04-Editing & Code/07-beautify-code.md
rename to docs/04-Editing & Code/08-beautify-code.md
index 6a452f95..275005bd 100644
--- a/docs/04-Editing & Code/07-beautify-code.md
+++ b/docs/04-Editing & Code/08-beautify-code.md
@@ -8,42 +8,42 @@ import VideoPlayer from '@site/src/components/Video/player';
The **Beautify Code** feature ensures your code is consistently formatted, improving readability and maintainability. It automatically aligns your code with your preferred style, taking into account indentation, spacing, and other formatting rules.
-
## How to Use
+
You can format your code using Beautify Code through the following methods:
-### Context Menu :
+
+### Context Menu
+
* Right-click in the editor.
* Select **Beautify Code** from the context menu.
+### Keyboard Shortcut
-### Keyboard Shortcut :
* Press `Ctrl+B` to format your code. (`Cmd+B` in MacOS)
-
**Note**: *You can also format just a selected part of your code using the Beautify Code feature. However, this option will only work if the selected code is syntactically valid.*
-
-
## Automatic Formatting on Save
To automatically format your code every time you save :
+
1. Go to `Edit` > `Beautify Code After Save`.
2. Toggle this option on.
-
-
## Customizing Beautify Code
You can adjust the settings for Beautify Code to match your coding preferences:
+
1. Go to `File` > `Open Preferences File`.
When you open the preferences, two files will appear:
* **defaultPreferences.json** on the left pane: This file contains the default settings and is not editable.
* **phcode.json** on the right pane: This is the file you should edit to customize your settings.
2. Look for the section named `beautify.options`.
+
```json
{
"beautify.options": {
@@ -59,9 +59,9 @@ When you open the preferences, two files will appear:
}
```
-3. Modify the options as needed to control aspects like :
+3. Modify the options as needed to control aspects like :
- * **bracketSameLine** :- This option controls the placement of the closing > bracket in multi-line HTML, JSX, Vue, or Angular elements. When set to `false`, the closing bracket is placed on its own line. Setting this option to `true` positions the closing bracket at the end of the last line, aligning it with the content for a more compact and readable format, but this does not apply to self-closing elements.
+* **bracketSameLine** :- This option controls the placement of the closing > bracket in multi-line HTML, JSX, Vue, or Angular elements. When set to `false`, the closing bracket is placed on its own line. Setting this option to `true` positions the closing bracket at the end of the last line, aligning it with the content for a more compact and readable format, but this does not apply to self-closing elements.
Default value of bracketSameLine is *True*.
@@ -73,15 +73,13 @@ When you open the preferences, two files will appear:
---
-
- * **printWidth**: Sets the maximum line length for code formatting. The beautifier will wrap lines that exceed the number of characters specified by the `printWidth` value.
+* **printWidth**: Sets the maximum line length for code formatting. The beautifier will wrap lines that exceed the number of characters specified by the `printWidth` value.
Default value of printWidth is *120*.
---
-
- * **proseWrap**: Determines how text in Markdown files is wrapped. The different values of `proseWrap` are :
+* **proseWrap**: Determines how text in Markdown files is wrapped. The different values of `proseWrap` are :
**"always"**: Automatically wraps prose to fit within the printWidth, regardless of original formatting.
**"never"**: Prevents any automatic wrapping, keeping prose as-is even if it exceeds the printWidth.
**"preserve"**: Maintains the original formatting of prose, wrapping text only where line breaks are already present.
@@ -90,8 +88,7 @@ When you open the preferences, two files will appear:
---
-
- * **quoteProps**: Determines when properties in objects should be quoted:
+* **quoteProps**: Determines when properties in objects should be quoted:
**"as-needed"**: Quotes properties only when necessary, such as when a property name contains special characters or conflicts with reserved keywords.
**"consistent"**: Quotes all properties consistently based on the first property's quoting style. If the first property is quoted, all properties will be quoted, and vice versa.
**"preserve"**: Maintains the existing quoting style of properties, leaving them quoted or unquoted as they are in the original code.
@@ -100,15 +97,13 @@ When you open the preferences, two files will appear:
---
-
- * **semi**: Determines whether to add a semicolon at the end of every statement. When set to `true`, a semicolon is automatically inserted at the end of each statement. If set to `false`, semicolons are omitted.
+* **semi**: Determines whether to add a semicolon at the end of every statement. When set to `true`, a semicolon is automatically inserted at the end of each statement. If set to `false`, semicolons are omitted.
Default value of semi is *true*.
---
-
- * **singleAttributePerLine**: Controls whether to enforce placing each attribute on a new line in HTML, Vue, and JSX elements. When set to `false`, multiple attributes can be on the same line. If set to `true`, each attribute will be placed on its own line.
+* **singleAttributePerLine**: Controls whether to enforce placing each attribute on a new line in HTML, Vue, and JSX elements. When set to `false`, multiple attributes can be on the same line. If set to `true`, each attribute will be placed on its own line.
Default value of singleAttributePerLine is *false*.
@@ -120,8 +115,7 @@ When you open the preferences, two files will appear:
---
-
- * **singleQuote**: Determines whether to use single quotes instead of double quotes in your code. When set to `false`, double quotes are used for strings. If set to `true`, single quotes are used instead.
+* **singleQuote**: Determines whether to use single quotes instead of double quotes in your code. When set to `false`, double quotes are used for strings. If set to `true`, single quotes are used instead.
Default value of singleQuote is *false*.
@@ -133,8 +127,7 @@ When you open the preferences, two files will appear:
---
-
- * **trailingComma**: Controls the use of trailing commas in multi-line comma-separated structures.
+* **trailingComma**: Controls the use of trailing commas in multi-line comma-separated structures.
**"none"**: No trailing commas are added.
**"es5"**: Adds trailing commas where valid in ES5 (e.g., in objects, arrays, etc., but not in function parameters).
**"all"**: Adds trailing commas in all possible places, including function parameters and imports.
@@ -154,18 +147,18 @@ When you open the preferences, two files will appear:
---
-
## Modifying Indentation with Beautify Code
To adjust the indentation style or size in your code, use the Spaces/Tabs button in the status bar.
- * **Toggle between spaces and tabs**: Click on the button to switch between `spaces` or `tabs` for indentation.
- * **Adjust the number of spaces or tabs**: Click on the value in the status bar beside `spaces`/`tabs` and modify it as required to select your desired indentation size.
+* **Toggle between spaces and tabs**: Click on the button to switch between `spaces` or `tabs` for indentation.
+* **Adjust the number of spaces or tabs**: Click on the value in the status bar beside `spaces`/`tabs` and modify it as required to select your desired indentation size.
After you change the indentation style or size, use **Beautify Code** to reformat the entire file.
## Visual Demonstration
- To use Git features inside Phoenix Code, ensure Git is installed on your computer. [Download Git](https://git-scm.com/downloads)
-
### Cloning a Repository
To clone an existing repository in **Phoenix Code**, follow these steps:
@@ -24,16 +23,15 @@ To clone an existing repository in **Phoenix Code**, follow these steps:
> This will open the Quick Start project dialog box, which offers various options. [Read more](../quick-start-project) about Quick Start project here.
-2. Select `Get from Git`.
+1. Select `Get from Git`.
-3. Enter the *Git Clone URL* and choose a *location* to save the project.
+1. Enter the *Git Clone URL* and choose a *location* to save the project.
-4. Click `Create Project`. The repository will be cloned to the specified location.
-
+1. Click `Create Project`. The repository will be cloned to the specified location.
### Alternative Cloning Method
@@ -56,7 +54,6 @@ In the Clone Repository dialog, clicking on `More Options` expands additional se
*If cloning fails due to authentication issues (e.g., timeout errors), you might need to manually provide your credentials.*
-
### Initializing a Git repository
To initialize a Git repository in a project that doesn’t already have one, click on `File > Git > Init`. This will set up Git for your current project. After initialization, the Git icon will appear in the toolbar, indicating that version control is active.
@@ -69,8 +66,6 @@ Once Git is set up, the Git Panel provides a user-friendly interface to manage v
-
-
## File status
All files with changes are displayed in the Git panel along with their status, such as *Modified*, *Untracked*, and *Deleted*. For modified files, a Git diff button is available.
@@ -94,7 +89,15 @@ You can also discard all changes made to all files at once by clicking the three
+## Open All Changed Files
+
+To open every changed file at once, click the three dots at the top-right of the Git panel and select `Open All Changed Files`.
+
+
+Every modified and untracked file opens in the editor. Deleted files are skipped, since they no longer exist on disk. Untracked files are also skipped if you turned on `Hide untracked files in panel`.
+
+Files that are already open stay as they are. If the file you are viewing is one of the changed files, Phoenix Code keeps you on it. Otherwise it takes you to the first changed file.
## Navigate Git Changes
@@ -112,16 +115,12 @@ When viewing a file with multiple Git changes, you can use the Next Change and P
src="https://docs-images.phcode.dev/videos/git-videos/navigation-git-changes.mp4"
/>
-
-
## Refresh Panel
The **Refresh Panel** button ensures that the displayed repository information is up to date. While changes are usually updated automatically, this button helps in cases where the interface lags behind, ensuring all modifications are reflected correctly.
-
-
## Commit
To stage/unstage the files, click the checkbox icon at the top-left of the Git panel. This will affect all the files in the working tree.
@@ -144,6 +143,7 @@ You can enter your commit message in the input box provided.
*If your commit message is longer, you can use the `Extended` button at the top-right of the dialog. This expands the input area, making it easier to write detailed commit messages.*
The commit dialog box also provides options to :-
+
* **Amend Last Commit**: Selecting this option allows you to modify the most recent commit instead of creating a new one.
* **Skip Pre-Commit Checks**: Enabling this option bypasses any pre-commit hooks or validation steps.
@@ -151,8 +151,6 @@ The commit dialog box also provides options to :-
-
-
## Push
To upload your local commits to the remote repository, use the `Push` option in the Git panel. This ensures your changes are synchronized with the remote repository.
@@ -188,16 +186,12 @@ Clicking More Options expands additional push settings, allowing for more contro
* **Save Credentials to Remote URL**: If enabled, the provided credentials (username and password) will be stored in plain text within the remote URL.
-
-
## Fetch
To download the latest changes from the remote repository without modifying your local repository, use the `Fetch` option in the Git panel. This will pull the latest changes from the remote repository but does not update your working directory or merge the changes into your local branches.
-
-
## Pull
To download the latest changes from the remote repository to your local machine, use the `Pull` option in the Git panel. This ensures your local repository is up to date with the latest changes from the remote repository.
@@ -208,13 +202,11 @@ When you initiate a pull, the **Pull from Remote** dialog appears, allowing you
-
### Target Branch
* **Pull from current tracking branch**: Pulls the latest changes from the currently tracked remote branch.
* **Pull from another branch**: Allows you to pull changes from a different remote branch.
-
### Pull Behavior
* **Default merge**: Merges fetched changes into your current branch.
@@ -223,8 +215,6 @@ When you initiate a pull, the **Pull from Remote** dialog appears, allowing you
* **Use rebase**: Applies incoming changes on top of your local commits for a cleaner history.
* **Use soft reset**: Resets to the latest remote commit without discarding local changes.
-
-
## Log (History)
**Phoenix Code** provides two options to view Git history:
@@ -254,9 +244,13 @@ When selecting a specific commit from the history panel, the **History Viewer**
This lets you inspect changes directly within the editor.
+## Branch
+The Git branch is shown in two places: in the sidebar, and on the Git panel toolbar. Clicking either one opens the same branch dropdown, next to the button you clicked.
-## Branch
+
+
+> The branch button is hidden when the Git panel is too narrow to fit it. The sidebar always shows the branch name.
### Creating a new branch
@@ -267,12 +261,12 @@ To create a new branch in Git, click on the `main > Create new branch...` button
This will open a dialog box where you can:
+
* Select the branch from which the new branch will originate.
* Enter a name for your new branch.
Once created, it automatically switches to the new branch and you can start working independently.
-
### Merging a branch
To merge a branch into the current branch, click on the current branch name (e.g., main) in the sidebar. This will open a popup displaying all available branches.
@@ -291,8 +285,6 @@ This will open a merge dialog box with the following options:
* **Use REBASE**: If checked, it rebases the commits instead of merging them.
* **Create a merge commit even when the merge resolves as a fast-forward**: If checked, it forces a merge commit even if a fast-forward merge is possible.
-
-
### Deleting a branch
To delete a local branch in Git, click on the current branch name (e.g., main) in the sidebar. This will open a dropdown menu displaying the list of all available branches.
@@ -301,8 +293,6 @@ To delete a local branch in Git, click on the current branch name (e.g., main) i
Next, hover over the branch you want to delete and click the cross 'x' icon next to it. This will delete the selected branch.
-
-
## Remote
### Adding a New Remote
@@ -337,8 +327,6 @@ To switch between remotes in your Git repository, click on the current remote na
Select the remote you want to switch to, and Git will use that remote for operations like fetch, pull, or push.
-
-
## Git Menu
The Git Menu provides various Git-related actions to manage version control within the application. To access this menu, navigate to `File > Git`.
@@ -352,41 +340,47 @@ Alternatively, you can also access the Git menu by clicking the three dots in th
Here are the available options in Git panel:
### General options
+
* **Show Git Panel**: Toggles the visibility of the Git panel in the interface.
* **Refresh Git**: Updates the Git panel to reflect the latest changes in the repository.
[Read more](#refresh-panel) about refresh git.
+* **Open All Changed Files**: Opens every modified and untracked file in the editor. [Read more](#open-all-changed-files) about opening all changed files.
### Navigation options
+
* **Go to Next Git Change**: Moves the cursor to the next Git-tracked change in the file.
* **Go to Previous Git Change**: Moves the cursor to the previous Git-tracked change in the file.
[Read more](#navigate-git-changes) about navigation options.
* **Close Unmodified Files**: Closes all open files that have no uncommitted changes.
### Version history
+
* **View Authors of Selection...**: Displays the Git history of a selected portion of code, showing who made changes and when.
* **View Authors of File...**: Shows the commit history and contributors for the entire file.
### Committing Changes
+
* **Commit Current File...**: Opens a dialog to commit changes in the currently active file.
* **Commit All Files...**: Opens a dialog to commit all staged changes in the repository.
[Read more](#commit) about committing changes.
### Remote Operations
+
* **Fetch from Remote**: Retrieves the latest changes from the remote repository without merging them into the local branch. [Read more](#fetch) about fetching changes from remote.
* **Pull from Remote...**: Fetches and integrates changes from the remote repository into the current branch. [Read more](#pull) about pulling changes from remote.
* **Push to Remote...**: Pushes local commits to the remote repository (shows the number of commits ahead of the remote branch). [Read more](#push) about pushing changes to remote.
### Configuration
+
* **Use Gerrit-compatible Push Ref**: Enables push references compatible with Gerrit, a web-based code review system. [Read more](https://www.gerritcodereview.com/) about Gerrit.
* **Change Git Username...**: Allows updating the Git username for commits.
* **Change Git Email...**: Allows updating the Git email address for commits.
### Settings
-* **Git Settings...**: Opens the Git Settings dialog to configure Git behavior within the application. [Read more](#git-settings) about Git settings.
-
+* **Git Settings...**: Opens the Git Settings dialog to configure Git behavior within the application. [Read more](#git-settings) about Git settings.
## Git Settings
@@ -420,15 +414,13 @@ Alternatively, you can access it from the Git panel by clicking the three dots i
* **Path to Git executable**: Allows specifying a custom path to the Git installation if needed.
* **Default Git operation timeout (in seconds)**: Sets the maximum duration for Git operations before they time out (default: 30 seconds).
-
-
## FAQ
-#### Q. Why is the Git icon not displayed in the Phoenix toolbar?
+### Q. Why is the Git icon not displayed in the Phoenix toolbar?
The Git icon does not appear in the toolbar if the project you opened is not a Git repository. It may also be missing if Git is not installed on your machine.
-#### Q. Why do I get an error when trying to push changes to remote?
+### Q. Why do I get an error when trying to push changes to remote?
If you see a "Pushing to remote failed" error, it means there are new changes in the remote repository that you haven't pulled yet.
@@ -436,4 +428,3 @@ If you see a "Pushing to remote failed" error, it means there are new changes in
**How to Fix:**
Before pushing your changes, pull the latest updates from the remote repository. [Learn how to pull changes](#pull).
-
diff --git a/docs/05-Workspace/07-extensions.md b/docs/05-Workspace/07-extensions.md
deleted file mode 100644
index e084b564..00000000
--- a/docs/05-Workspace/07-extensions.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Extensions
-slug: "/extensions"
----
-
-import React from 'react';
-import VideoPlayer from '@site/src/components/Video/player';
-
-Phoenix Code supports extensions for adding features, themes, and language support. Everything is managed through the built-in **Extension Manager**.
-
-To open the Extension Manager, click the extension icon on the right-hand toolbar, as shown below.
-
-
-
-The dialog has four tabs:
-
-| Tab | Contents |
-| --- | --- |
-| **Available** | Marketplace extensions. A search box at the top filters the list. |
-| **Themes** | Marketplace themes. |
-| **Installed** | Everything you've installed. Apply, update, or remove from here. |
-| **Default** | Built-in extensions that ship with Phoenix Code. |
-
-A **Sort** dropdown at the top of the dialog orders the list by **Last Updated** (most recently published first), **Downloads** (most-installed first), **Star Rating** (highest GitHub stars), or **Verified** (Phoenix-verified extensions first).
-
-
-
-- **Install**: pick an item from **Available** or **Themes** and click **Install**.
-- **Update**: when a newer version is available, an **Update** button appears on the extension's card in **Installed**.
-- **Remove**: click **Remove** on the card in **Installed**, then confirm with **Remove Extensions and Reload**.
-
-## Themes
-
-Themes use the same flow under the **Themes** tab.
-
-
-
-To switch to an installed theme, either pick it from `View > Themes...` (see [Customizing the Editor → Themes](./customizing-editor#themes)) or click **Apply** next to the theme in **Installed**.
-
-## Create your own
-
-For authoring extensions and themes, see the API section:
-
-- [Creating Themes](/api/creating-themes)
-- [Creating Extensions](/api/creating-extensions)
-- [Creating Node Extensions](/api/creating-node-extensions)
-- [Debugging Extensions](/api/debugging-extensions)
-- [Publishing Extensions](/api/publishing-extensions)
-
-## Popular extensions
-
-A curated list of community extensions worth checking out.
-
-### Minimap
-Created by: [Zorgzerg](https://github.com/zorgzerg)
-
-This extension adds a minimap preview of your code on the side of your editor, making it easier to navigate and get an overview of your code structure.
-
-For more details, visit the [GitHub repository](https://github.com/zorgzerg/brackets-minimap) of the extension.
-
-`Minimap` in action :-
-
-
-
-### Show Whitespace
-Created by: [Dennis Kehrig](https://github.com/DennisKehrig)
-
-This extension allows users to visualize spaces and tabs, making code more readable and helping maintain formatting consistency.
-
-For more details, visit the [GitHub repository](https://github.com/DennisKehrig/brackets-show-whitespace) of the extension.
-
-`Show Whitespace` in action :-
-
-
-
-### 1-2-3
-Created by: [Michal Jeřábek](https://github.com/michaljerabek)
-
-This extension generates number sequences directly in your editor, making it easy to create ordered lists or numbered markers with minimal effort.
-
-For more details, visit the [GitHub repository](https://github.com/michaljerabek/1-2-3) of the extension.
-
-`1-2-3` in action :-
-
-
-
-### FuncDocr
-Created by: [Ole Kröger](https://github.com/Wikunia)
-
-This extension generates JS/PHPDocs for your functions, keeping your code documented and organized.
-
-For more details, visit the [GitHub repository](https://github.com/wikunia/brackets-funcdocr) of the extension.
-
-`FuncDocr` in action :-
-
-
-
-### Remove Comments
-Created by: [Pluto](https://github.com/devvaannsh)
-
-This extension allows you to remove unwanted comments from your code. You can delete all comments at once or only those within a selected section.
-
-For more details, visit the [GitHub repository](https://github.com/devvaannsh/Remove-Comments) of the extension.
-
-`Remove Comments` in action :-
-
-
-
-### Autosave Files on Window Blur
-Created by: [Marty Penner](https://github.com/martypenner)
-
-This extension automatically saves all unsaved files whenever Phoenix Code loses focus (for example, when you switch to another application).
-
-For more details, visit the [GitHub repository](https://github.com/martypenner/brackets-autosave-files-on-window-blur) of the extension.
-
-`Autosave Files on Window Blur` in action :-
-
-
diff --git a/docs/05-Workspace/07-video-audio-preview.md b/docs/05-Workspace/07-video-audio-preview.md
new file mode 100644
index 00000000..01e106ae
--- /dev/null
+++ b/docs/05-Workspace/07-video-audio-preview.md
@@ -0,0 +1,19 @@
+---
+title: Video & Audio Preview
+slug: "/Features/video-audio-preview"
+---
+
+**Phoenix Code** plays video and audio files right in the editor. Click a media file in the file tree and it opens with playback controls, no setup needed.
+
+
+
+Above the player you see the file's details: dimensions (for videos), duration, and file size, followed by the file's path.
+
+## Supported Formats
+
+- **Video**: `mp4`, `m4v`, `webm`, `mkv`, `ogv`, `mov`
+- **Audio**: `mp3`, `wav`, `ogg`, `m4a`, `flac`, `aac`, `aif`, `aiff`
+
+> Whether a format plays can also depend on the codecs your operating system provides. If a file cannot be played, Phoenix Code shows a message stating that it cannot be played.
+
+Files up to 16 MB can be previewed. If you edit a media file outside Phoenix Code, the preview refreshes automatically.
diff --git a/docs/06-Code Quality/02-ESLint.md b/docs/06-Code Quality/02-ESLint.md
index c006e251..eea5bdb6 100644
--- a/docs/06-Code Quality/02-ESLint.md
+++ b/docs/06-Code Quality/02-ESLint.md
@@ -10,24 +10,26 @@ Phoenix Code provides a comprehensive interface for identifying and resolving
`ESLint` is only available in desktop apps. In Browsers, `JSHint` is the default
linter for javascript files.
+> On desktop, JavaScript is also checked by the [TypeScript language server](/docs/Features/js-ts-code-intelligence), and JSHint turns off automatically.
+
-### Basic Usage
+## Basic Usage
To activate `ESLint`, the project must have a node `package.json` file with
-ESLint as a dependency. Opening or editing+saving a `js` or `jsx` file will lint
-the file with ESLint and .
+ESLint as a dependency. Opening a `js` or `jsx` file, or editing and saving it,
+lints the file and shows the results in the Problems panel.
-#### Features
+### Features
-- Errors and warnings are underlined directly in the editor.
-- Hovering over a highlighted line provides detailed information about the
+- Errors and warnings are underlined directly in the editor.
+- Hovering over a highlighted line provides detailed information about the
specific ESLint problem and a suggested fix if available.
-- Fix individual issues by clicking on the `Fix` button next to the specific
+- Fix individual issues by clicking on the `Fix` button next to the specific
problem, or you can resolve all fixable issues in the file by clicking on
the `Fix All` button at the top of the panel.
-### Advanced Use
+## Advanced Use
Phoenix Code uses ESLint configured in the opened project directory. Any changes
to your ESLint configuration files will be automatically picked up. To learn
@@ -36,13 +38,13 @@ more about how to use and configure ESLint, see
## FAQ
-#### Q: Which version of ESLint are supported
+### Q: Which version of ESLint are supported
Phoenix Code supports **ESLint versions 7 and above** only.
-#### Q: Why is ESLint not working in my project.
+### Q: Why is ESLint not working in my project
-Most problems are usually reported in the problesm panel itself. These are the
+Most problems are usually reported in the Problems panel itself. These are the
most common errors:
1. Ensure that ESLint is listed in `dependencies` or `devDependencies` section
@@ -61,9 +63,9 @@ most common errors:
}
```
-2. Ensure to run `npm install` on the project and `node_modules` folder is
+1. Ensure to run `npm install` on the project and `node_modules` folder is
present in the project at the top level.
-3. ESLint config files may have errors. Check if the problem message contains
+2. ESLint config files may have errors. Check if the problem message contains
any references to your ESLint config file.
-*Note: ESLint runs automatically when you save your file. Issues and errors are displayed in the Problems Panel.*
\ No newline at end of file
+*Note: ESLint runs automatically when you save your file. Issues and errors are displayed in the Problems Panel.*
diff --git a/docs/07-Code Intelligence/01-javascript-typescript.md b/docs/07-Code Intelligence/01-javascript-typescript.md
new file mode 100644
index 00000000..631f3f3a
--- /dev/null
+++ b/docs/07-Code Intelligence/01-javascript-typescript.md
@@ -0,0 +1,56 @@
+---
+title: JavaScript & TypeScript
+slug: "/Features/js-ts-code-intelligence"
+---
+
+import VideoPlayer from '@site/src/components/Video/player';
+
+**Phoenix Code** ships full code intelligence for JavaScript, TypeScript, JSX, and TSX, powered by the TypeScript language server. It understands your whole project, so completions, navigation, and error checking work across files. It is on by default, so you don't need to setup anything!
+
+
+
+:::info Desktop Only
+Browser version runs on classic JavaScript hints. For smarter Code intelligence, switch to the desktop app.
+:::
+
+Code hints, parameter hints, hover info, jump to definition, and error checking all work as described in [Code Intelligence](./Code%20Intelligence). This page covers what is specific to JavaScript and TypeScript.
+
+## Auto Imports
+
+Suggestions are drawn from your project and the libraries you use.
+
+- Picking a symbol from another file or module automatically adds the import at the top of your file.
+- If the same name exists in several modules, the hint shows how many and lets you choose which one to import.
+
+
+
+## Type Checking
+
+Errors and warnings from the language server appear in the [Problems panel](/docs/Features/Problems%20Panel/ESLint) as you type, with a **Fix** button when a fix is available.
+
+> In plain JavaScript files, type warnings are off by default. Turn on **Type-check JavaScript** in the [config panel](#the-config-panel) to get them.
+
+## Project-Wide Intelligence
+
+To understand your whole project, Phoenix Code needs a small config file (`jsconfig.json` or `tsconfig.json`) in the project root. It creates this file automatically the first time you open a JavaScript or TypeScript file, and keeps it updated for you. The file itself contains a note explaining why it is there and states that Phoenix Code auto-created this file.
+
+To disable or self-manage Project-Wide Intelligence:
+
+- **To turn it off**, delete the file. Phoenix Code will not create it again, and the [Problems panel](/docs/Features/Problems%20Panel/ESLint) offers a one-click re-enable if you change your mind.
+- **To manage the file yourself**, set `autoManage` to `false` inside it. Phoenix Code will never modify it again.
+- **To stop it for all projects**, set the `codeIntel.autoCreateConfig` [preference](/docs/editing-text#editing-preferences) to `false`.
+
+## The Config Panel
+
+When you open `jsconfig.json` or `tsconfig.json`, Phoenix Code shows a **Code Intelligence** panel that explains the most useful ones in plain words:
+
+- **Type-check JavaScript**: Finds typos and type mistakes in your JS files and shows them in the Problems panel. Warnings only, your code runs unchanged.
+- **Auto-download types**: Fetches type definitions for your npm packages, so code hints for them work even before you run `npm install`.
+- **Managed by Phoenix Code**: Whether Phoenix Code keeps the file updated automatically.
+- **Target**, **Module**, and **JSX**: The JavaScript version, module system, and JSX handling your project uses.
+
+
+
+Click **All options…** to read about every available setting in the [TypeScript config reference](https://www.typescriptlang.org/tsconfig/).
diff --git a/docs/07-Code Intelligence/02-php.md b/docs/07-Code Intelligence/02-php.md
new file mode 100644
index 00000000..088bd39e
--- /dev/null
+++ b/docs/07-Code Intelligence/02-php.md
@@ -0,0 +1,32 @@
+---
+title: PHP
+slug: "/Features/php-code-intelligence"
+---
+
+**Phoenix Code** supports full code intelligence for PHP: completions with documentation, parameter hints, hover info, Go to Definition, Find Usages, and error checking in the Problems panel.
+
+Everything works the same way as described in [Code Intelligence](./Code%20Intelligence).
+
+:::info Desktop Only
+PHP code intelligence runs in the desktop app.
+:::
+
+## Automatic Setup
+
+PHP code intelligence is powered by [Intelephense](https://intelephense.com). Phoenix Code downloads it the first time you open a PHP file. The progress shows in the status bar, with a stop button to cancel.
+
+
+
+> Updates are automatic, and if you are offline, the download waits for a connection.
+
+To turn PHP code intelligence off, set the `codeIntelligence.php` [preference](/docs/editing-text#editing-preferences) to `false`. Setting it back to `true` downloads the server again.
+
+> HTML, CSS, and JavaScript inside your PHP files keep their existing code hints. Intelephense handles only the PHP parts.
+
+## Premium Features
+
+The free version of Intelephense covers everything described above. If you own an [Intelephense premium license](https://intelephense.com), set the `php.licenseKey` [preference](/docs/editing-text#editing-preferences) to your license key, or to the path of your license file.
+
+## Running PHP Pages
+
+This page is about editing PHP. To preview PHP pages in the Live Preview, see [PHP Live Preview Setup](/docs/Features/Live%20Preview/php-live-preview).
diff --git a/docs/07-Code Intelligence/03-json.md b/docs/07-Code Intelligence/03-json.md
new file mode 100644
index 00000000..38b6737d
--- /dev/null
+++ b/docs/07-Code Intelligence/03-json.md
@@ -0,0 +1,30 @@
+---
+title: JSON
+slug: "/Features/json-code-intelligence"
+---
+
+**Phoenix Code** has code intelligence for JSON files, with extra features for `package.json`. Hints, hover info, and error checking work as described in [Code Intelligence](./Code%20Intelligence).
+
+## package.json
+
+When you edit the dependencies in `package.json`:
+
+- Typing a package name shows live suggestions from the npm registry.
+- Typing a version shows the package's real versions, newest first, with `^` and `~` shortcuts at the top.
+- Hovering over a dependency shows the package's description, latest version, license, and links to its homepage and docs.
+
+Your dependencies are also checked against npm's security advisories, the same data `npm audit` uses. If a dependency has a known vulnerability, it is underlined in the editor and listed in the [Problems panel](/docs/Features/Problems%20Panel/ESLint) with its severity.
+
+
+
+:::info Desktop Only
+The security check runs in the desktop app. The package name, version, and hover hints work everywhere.
+:::
+
+## Config File Intelligence
+
+Phoenix Code knows the valid fields of well-known config files like `package.json`, `tsconfig.json`, `.eslintrc`, `.babelrc`, and `.prettierrc`. It suggests fields as you type, shows what each field means on hover, and flags mistakes in the Problems panel.
+
+:::info Desktop Only
+Config file intelligence runs in the desktop app.
+:::
diff --git a/docs/07-Code Intelligence/04-python.md b/docs/07-Code Intelligence/04-python.md
new file mode 100644
index 00000000..4277359b
--- /dev/null
+++ b/docs/07-Code Intelligence/04-python.md
@@ -0,0 +1,28 @@
+---
+title: Python
+slug: "/Features/python-code-intelligence"
+---
+
+**Phoenix Code** supports full code intelligence for Python: completions with documentation, parameter hints, hover info, Go to Definition, Find Usages, and type error checking with quick fixes in the Problems panel.
+
+Everything works the same way as described in [Code Intelligence](./Code%20Intelligence).
+
+:::info Desktop Only
+Python code intelligence runs in the desktop app.
+:::
+
+## Automatic Setup
+
+Python support is powered by [Pyrefly](https://pyrefly.org), a language server built by Meta. Phoenix Code downloads it (~25 MB) the first time you open a Python file. The progress shows in the status bar, with a stop button to cancel.
+
+
+
+> Updates are automatic, and if you are offline, the download waits for a connection.
+
+To turn Python code intelligence off, set the `codeIntelligence.python` [preference](/docs/editing-text#editing-preferences) to `false`. Setting it back to `true` downloads the server again.
+
+## Formatting with Ruff
+
+The download also includes [Ruff](https://docs.astral.sh/ruff/), a Python formatter. The [Beautify Code](/docs/Features/beautify-code) command uses it to format your Python files.
+
+If your project has its own Ruff config (`pyproject.toml` or `ruff.toml`), it is respected, so formatting matches what you get on the command line.
diff --git a/docs/07-Code Intelligence/_category_.json b/docs/07-Code Intelligence/_category_.json
new file mode 100644
index 00000000..16181e56
--- /dev/null
+++ b/docs/07-Code Intelligence/_category_.json
@@ -0,0 +1,5 @@
+{
+ "label": "Code Intelligence",
+ "collapsible": true,
+ "collapsed": true
+}
diff --git a/docs/07-Code Intelligence/index.md b/docs/07-Code Intelligence/index.md
new file mode 100644
index 00000000..63ca5f56
--- /dev/null
+++ b/docs/07-Code Intelligence/index.md
@@ -0,0 +1,209 @@
+---
+title: Code Intelligence
+slug: "/Features/Code Intelligence"
+---
+
+import VideoPlayer from '@site/src/components/Video/player';
+
+**Phoenix Code** helps you write code faster with code hints, parameter hints, documentation popups, jump to definition, and live error checking. Most of it works out of the box with no setup.
+
+
+
+This page explains what each feature does and how to tune it. For what you get in a specific language, see [JavaScript & TypeScript](./js-ts-code-intelligence), [PHP](./php-code-intelligence), [JSON](./json-code-intelligence), and [Python](./python-code-intelligence).
+
+## Code Hints
+
+As you type, a popup suggests what could come next: HTML tags, CSS properties and values, JavaScript symbols, JSON keys, file paths, and more.
+
+- Hints appear automatically as you type.
+- Press `Ctrl + Space` to open them any time, or use `Edit > Show Code Hints`.
+- Use the arrow keys to pick one, then press `Enter` or `Tab` to insert it.
+- Press `Esc` to close the popup.
+
+
+
+### Documentation Beside Hints
+
+For languages with full code intelligence, the selected hint shows a documentation popup next to the list, with a short description of the function, property, or symbol. This lets you confirm it is the right one before you insert it.
+
+
+
+## Parameter Hints
+
+When you type inside a function call, right after `(` or `,`, a popup shows the function's parameters and highlights the one you are on. It follows your cursor as you move between arguments.
+
+Press `Ctrl + Shift + Space` to show it any time, or use `Edit > Show Parameter Hint`.
+
+
+
+## Hover Info
+
+Hold your cursor over any symbol to see its type signature and documentation. The popup also has two buttons, **Go to Definition** and **Find Usages**.
+
+
+
+## Jump to Definition and Find Usages
+
+Place your cursor on a symbol and press `Ctrl/Cmd + J` to go to where it is defined, even in another file. This is also in `Navigate > Jump to Definition`.
+
+Press `Shift + F12` to list every place the symbol is used across the project. This is also in `Find > Find All References`.
+
+
+
+Both are in the right-click menu too.
+
+## Error Checking
+
+Phoenix Code checks your code as you type and shows problems in two places:
+
+- **Squiggly underlines** in the editor, under the exact code with the problem. Hover over the underline to read the message.
+- The **Problems panel** at the bottom of the window, listing every problem in the file with its line number. Click a row to jump to it.
+
+Problems come in three levels: **Error** (red), **Warning** (yellow), and **Info** (blue).
+
+Two kinds of problems also change how the code looks, so you can spot them at a glance:
+
+- **Unused code**, like a variable that is never read or an import that is never used, is drawn faded.
+- **Deprecated code**, like calling a function marked `@deprecated`, is drawn with a strikethrough.
+
+These still get their underline and their row in the Problems panel. The styling is an extra hint on top.
+
+
+
+### Quick Fixes
+
+When a problem can be fixed automatically, a **Fix** button appears next to it in the Problems panel. Use **Fix All** to apply every fix in the file at once.
+
+## Language Support
+
+### Works Everywhere
+
+These hints work in the desktop app and in the browser:
+
+| Language or context | What you get |
+| --- | --- |
+| HTML | Tag names, attribute names and values |
+| HTML entities | Special characters like `&` and ` ` |
+| CSS, LESS, SCSS | Property names and property values |
+| SVG | Tag and attribute hints |
+| JavaScript | Symbol completion |
+| URLs | File path completion inside `href`, `src`, and `url()` |
+| Preferences files | Hints for every setting name and value while editing Phoenix Code's own settings files |
+
+### Desktop App
+
+The desktop app also runs **language servers**. A language server understands your whole project, not just the open file, so you get context-aware completion, documentation popups, parameter hints, jump to definition, and project-wide error checking.
+
+| Language server | Languages | What you get |
+| --- | --- | --- |
+| TypeScript | JavaScript, TypeScript, JSX, TSX | Type-aware completion, parameter hints, docs on hover, jump to definition, type errors, unused and deprecated detection. Respects your `jsconfig.json` or `tsconfig.json`. See [JavaScript & TypeScript](./js-ts-code-intelligence). |
+| JSON | JSON | Schema-based key and value completion and validation for well-known config files. In `package.json`, dependencies with known security problems are flagged. See [JSON](./json-code-intelligence). |
+| Intelephense | PHP | Completion, docs on hover, parameter hints, jump to definition, error checking. See [PHP](./php-code-intelligence). |
+| Pyrefly and Ruff | Python | Type-aware completion, docs on hover, parameter hints, jump to definition, type checking with Pyrefly, and formatting with Ruff. See [Python](./python-code-intelligence). |
+
+The PHP and Python language servers download and set themselves up the first time you open a PHP or Python file. There is nothing to install by hand.
+
+Language servers run on your own machine as background processes, so your code is not sent anywhere. Because they need those processes, they run in the desktop app only. In the browser, the hints in the table above still work.
+
+Extensions can add language servers for more languages. Each one gets its own on and off setting automatically, see [Language Servers](#language-servers) below.
+
+:::note JavaScript type checking
+By default, JavaScript files get completion, docs, and navigation, but not full type checking. This matches what other editors do. To also get type errors and unused variable warnings in plain `.js` files, add `"checkJs": true` to your project's `jsconfig.json`, or put a `// @ts-check` comment at the top of the file.
+:::
+
+## Settings
+
+You can turn every part of this on or off from your preferences file. See [Editing Preferences](/docs/editing-text#editing-preferences) to learn how to open and edit it. Preferences files get code hints too, so `Ctrl + Space` works while you edit them.
+
+### General
+
+| Setting | Default | What it does |
+| --- | --- | --- |
+| `showCodeHints` | `true` | The master switch. Set it to `false` to turn off all code hint popups. |
+| `showCodeHintDocs` | `true` | Set to `false` to hide the documentation popup shown beside code hints. |
+| `showParameterHints` | `true` | Set to `false` to turn off the parameter hint popup, including `Ctrl + Shift + Space`. |
+| `insertHintOnTab` | `true` | Set to `false` if you don't want `Tab` to insert the selected hint. `Enter` still works. |
+| `maxCodeHints` | `50` | How many suggestions the popup shows at once. |
+
+### Per-Language Hints
+
+Turn hints off for one language and keep the rest:
+
+| Setting | Default | What it controls |
+| --- | --- | --- |
+| `codehint.TagHints` | `true` | HTML tag hints |
+| `codehint.AttrHints` | `true` | HTML attribute hints |
+| `codehint.SpecialCharHints` | `true` | HTML entity hints |
+| `codehint.CssPropHints` | `true` | CSS, LESS, and SCSS property and value hints |
+| `codehint.SVGHints` | `true` | SVG hints |
+| `codehint.JSHints` | `true` | JavaScript hints |
+| `codehint.UrlCodeHints` | `true` | File path and URL hints |
+| `codehint.PrefHints` | `true` | Hints in Phoenix Code settings files |
+
+### Language Servers
+
+Each language server has its own switch. Turning one off stops it right away, so completion, docs, parameter hints, jump to definition, and error checking for that language all stop, and any simpler built-in checker takes over. Turning it back on restarts the server. You don't need to restart the app.
+
+| Setting | Default | What it controls |
+| --- | --- | --- |
+| `codeIntelligence.typescript` | `true` | JavaScript and TypeScript code intelligence |
+| `codeIntelligence.json` | `true` | JSON code intelligence |
+| `codeIntelligence.php` | `true` | PHP code intelligence. Set to `false` before you open a PHP file and the server is never downloaded. |
+| `codeIntelligence.python` | `true` | Python code intelligence. Set to `false` before you open a Python file and the server is never downloaded. |
+| `codeIntelligence.` | `true` | Any language server added by an extension gets its own setting. Look for the `codeIntelligence.` prefix in the default preferences file to see what is available. |
+
+### Examples
+
+Turn off the popups but keep error checking:
+
+```json
+{
+ "showCodeHints": false,
+ "showParameterHints": false
+}
+```
+
+Keep the hints, but make them quieter:
+
+```json
+{
+ "showCodeHintDocs": false,
+ "maxCodeHints": 20
+}
+```
+
+### Settings for One Project
+
+To change a setting for a single project only, create a `.phcode.json` file in the project folder and put the same settings in it. Project settings win over your global ones.
+
+For example, to turn off JavaScript and TypeScript code intelligence in one project:
+
+```json
+{
+ "codeIntelligence.typescript": false
+}
+```
+
+## Troubleshooting
+
+### Q. Why don't I see any code hints?
+
+Check that `showCodeHints` is not set to `false`, both in your preferences file and in the project's `.phcode.json`.
+
+### Q. Why do HTML and CSS hints work, but JavaScript feels basic or JSON validation is missing?
+
+Those come from language servers, so they need the desktop app. If you are already on the desktop app, check that `codeIntelligence.typescript` and `codeIntelligence.json` are not set to `false`.
+
+### Q. Why don't I see parameter hints inside a function call?
+
+Check `showParameterHints`. Parameter hints come from a language server, so they also need the desktop app and that language's `codeIntelligence.*` setting turned on.
+
+### Q. Why are unused variables in my `.js` file not flagged?
+
+Plain JavaScript is not type-checked by default. Add `"checkJs": true` to `jsconfig.json`, or put a `// @ts-check` comment at the top of the file.
+
+### Q. How do I stop `Tab` from inserting a hint?
+
+Set `insertHintOnTab` to `false`. `Enter` still inserts the selected hint.
diff --git a/docs/08-Extensions & Themes/01-extensions.md b/docs/08-Extensions & Themes/01-extensions.md
new file mode 100644
index 00000000..d04dfc3c
--- /dev/null
+++ b/docs/08-Extensions & Themes/01-extensions.md
@@ -0,0 +1,52 @@
+---
+title: Extensions
+slug: "/extensions"
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+Phoenix Code supports extensions for adding features, themes, and language support. Everything is managed through the built-in **Extension Manager**.
+
+To open the Extension Manager, click the extension icon on the right-hand toolbar, as shown below.
+
+
+
+The dialog has four tabs:
+
+| Tab | Contents |
+| --- | --- |
+| **Available** | Marketplace extensions. A search box at the top filters the list. |
+| **Themes** | Marketplace themes. |
+| **Installed** | Everything you've installed. Apply, update, or remove from here. |
+| **Default** | Built-in extensions that ship with Phoenix Code. |
+
+A **Sort** dropdown at the top of the dialog orders the list by **Last Updated** (most recently published first), **Downloads** (most-installed first), **Star Rating** (highest GitHub stars), or **Verified** (Phoenix-verified extensions first).
+
+
+
+- **Install**: pick an item from **Available** or **Themes** and click **Install**.
+- **Update**: when a newer version is available, an **Update** button appears on the extension's card in **Installed**.
+- **Remove**: click **Remove** on the card in **Installed**, then confirm with **Remove Extensions and Reload**.
+
+## Themes
+
+Themes use the same flow under the **Themes** tab.
+
+
+
+To switch to an installed theme, either pick it from `View > Themes...` (see [Customizing the Editor → Themes](./customizing-editor#themes)) or click **Apply** next to the theme in **Installed**.
+
+## Create your own
+
+For authoring extensions and themes, see the API section:
+
+- [Creating Themes](/api/creating-themes)
+- [Creating Extensions](/api/creating-extensions)
+- [Creating Node Extensions](/api/creating-node-extensions)
+- [Debugging Extensions](/api/debugging-extensions)
+- [Publishing Extensions](/api/publishing-extensions)
+
+## Popular Extensions
+
+For a curated list of community extensions worth checking out, see [Popular Extensions](./popular-extensions).
diff --git a/docs/08-Extensions & Themes/02-popular-extensions.md b/docs/08-Extensions & Themes/02-popular-extensions.md
new file mode 100644
index 00000000..14e4fe1b
--- /dev/null
+++ b/docs/08-Extensions & Themes/02-popular-extensions.md
@@ -0,0 +1,69 @@
+---
+title: Popular Extensions
+slug: "/popular-extensions"
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+A curated list of community extensions worth checking out. Install any of them from the [Extension Manager](./extensions).
+
+## Minimap
+
+Created by: [Zorgzerg](https://github.com/zorgzerg)
+
+This extension adds a minimap preview of your code on the side of your editor, making it easier to navigate and get an overview of your code structure.
+
+For more details, visit the [GitHub repository](https://github.com/zorgzerg/brackets-minimap) of the extension.
+
+`Minimap` in action :-
+
+
+
+## Show Whitespace
+
+Created by: [Dennis Kehrig](https://github.com/DennisKehrig)
+
+This extension allows users to visualize spaces and tabs, making code more readable and helping maintain formatting consistency.
+
+For more details, visit the [GitHub repository](https://github.com/DennisKehrig/brackets-show-whitespace) of the extension.
+
+`Show Whitespace` in action :-
+
+
+
+## 1-2-3
+
+Created by: [Michal Jeřábek](https://github.com/michaljerabek)
+
+This extension generates number sequences directly in your editor, making it easy to create ordered lists or numbered markers with minimal effort.
+
+For more details, visit the [GitHub repository](https://github.com/michaljerabek/1-2-3) of the extension.
+
+`1-2-3` in action :-
+
+
+
+## Remove Comments
+
+Created by: [Pluto](https://github.com/devvaannsh)
+
+This extension allows you to remove unwanted comments from your code. You can delete all comments at once or only those within a selected section.
+
+For more details, visit the [GitHub repository](https://github.com/devvaannsh/Remove-Comments) of the extension.
+
+`Remove Comments` in action :-
+
+
+
+## Autosave Files on Window Blur
+
+Created by: [Marty Penner](https://github.com/martypenner)
+
+This extension automatically saves all unsaved files whenever Phoenix Code loses focus (for example, when you switch to another application).
+
+For more details, visit the [GitHub repository](https://github.com/martypenner/brackets-autosave-files-on-window-blur) of the extension.
+
+`Autosave Files on Window Blur` in action :-
+
+
diff --git a/docs/08-Extensions & Themes/_category_.json b/docs/08-Extensions & Themes/_category_.json
new file mode 100644
index 00000000..4c8dc1ee
--- /dev/null
+++ b/docs/08-Extensions & Themes/_category_.json
@@ -0,0 +1,5 @@
+{
+ "label": "Extensions & Themes",
+ "collapsible": true,
+ "collapsed": true
+}
diff --git a/docs/images/codeIntelligence/code-hints.png b/docs/images/codeIntelligence/code-hints.png
new file mode 100644
index 00000000..d11f2588
Binary files /dev/null and b/docs/images/codeIntelligence/code-hints.png differ
diff --git a/docs/images/codeIntelligence/config-panel.png b/docs/images/codeIntelligence/config-panel.png
new file mode 100644
index 00000000..7d47c727
Binary files /dev/null and b/docs/images/codeIntelligence/config-panel.png differ
diff --git a/docs/images/codeIntelligence/error-checking.png b/docs/images/codeIntelligence/error-checking.png
new file mode 100644
index 00000000..1a5977d5
Binary files /dev/null and b/docs/images/codeIntelligence/error-checking.png differ
diff --git a/docs/images/codeIntelligence/find-usages.png b/docs/images/codeIntelligence/find-usages.png
new file mode 100644
index 00000000..eca668a3
Binary files /dev/null and b/docs/images/codeIntelligence/find-usages.png differ
diff --git a/docs/images/codeIntelligence/hint-docs.png b/docs/images/codeIntelligence/hint-docs.png
new file mode 100644
index 00000000..4b6d0f0d
Binary files /dev/null and b/docs/images/codeIntelligence/hint-docs.png differ
diff --git a/docs/images/codeIntelligence/hover-info.png b/docs/images/codeIntelligence/hover-info.png
new file mode 100644
index 00000000..ee29f558
Binary files /dev/null and b/docs/images/codeIntelligence/hover-info.png differ
diff --git a/docs/images/codeIntelligence/json-vulnerability.png b/docs/images/codeIntelligence/json-vulnerability.png
new file mode 100644
index 00000000..12b36bb1
Binary files /dev/null and b/docs/images/codeIntelligence/json-vulnerability.png differ
diff --git a/docs/images/codeIntelligence/parameter-hints.png b/docs/images/codeIntelligence/parameter-hints.png
new file mode 100644
index 00000000..0bbcd73c
Binary files /dev/null and b/docs/images/codeIntelligence/parameter-hints.png differ
diff --git a/docs/images/codeIntelligence/php-setup.png b/docs/images/codeIntelligence/php-setup.png
new file mode 100644
index 00000000..ff1e56c4
Binary files /dev/null and b/docs/images/codeIntelligence/php-setup.png differ
diff --git a/docs/images/codeIntelligence/python-setup.png b/docs/images/codeIntelligence/python-setup.png
new file mode 100644
index 00000000..0dd6f6f4
Binary files /dev/null and b/docs/images/codeIntelligence/python-setup.png differ
diff --git a/docs/images/docComments/jsdoc-hint.png b/docs/images/docComments/jsdoc-hint.png
new file mode 100644
index 00000000..1f4479c6
Binary files /dev/null and b/docs/images/docComments/jsdoc-hint.png differ
diff --git a/docs/images/git-images/git-branch-dropdown.png b/docs/images/git-images/git-branch-dropdown.png
new file mode 100644
index 00000000..604fb5e4
Binary files /dev/null and b/docs/images/git-images/git-branch-dropdown.png differ
diff --git a/docs/images/git-images/open-all-changed-files.png b/docs/images/git-images/open-all-changed-files.png
new file mode 100644
index 00000000..545174e2
Binary files /dev/null and b/docs/images/git-images/open-all-changed-files.png differ
diff --git a/docs/images/popular-extensions/Func-Docr.gif b/docs/images/popular-extensions/Func-Docr.gif
deleted file mode 100644
index 36f65c57..00000000
Binary files a/docs/images/popular-extensions/Func-Docr.gif and /dev/null differ
diff --git a/docs/images/pro/ai-model-dropdown.png b/docs/images/pro/ai-model-dropdown.png
new file mode 100644
index 00000000..ec8d9a94
Binary files /dev/null and b/docs/images/pro/ai-model-dropdown.png differ
diff --git a/docs/images/pro/starter-bar-element-list.png b/docs/images/pro/starter-bar-element-list.png
new file mode 100644
index 00000000..33b3d681
Binary files /dev/null and b/docs/images/pro/starter-bar-element-list.png differ
diff --git a/docs/images/pro/styles-bar-disable.png b/docs/images/pro/styles-bar-disable.png
new file mode 100644
index 00000000..a35c9d57
Binary files /dev/null and b/docs/images/pro/styles-bar-disable.png differ
diff --git a/docs/images/pro/styles-bar-reset.png b/docs/images/pro/styles-bar-reset.png
new file mode 100644
index 00000000..419c15ec
Binary files /dev/null and b/docs/images/pro/styles-bar-reset.png differ
diff --git a/docs/images/pro/styles-bar-save-changes.png b/docs/images/pro/styles-bar-save-changes.png
new file mode 100644
index 00000000..c9fe433a
Binary files /dev/null and b/docs/images/pro/styles-bar-save-changes.png differ
diff --git a/docs/images/videoAudioPreview/video-preview.jpg b/docs/images/videoAudioPreview/video-preview.jpg
new file mode 100644
index 00000000..dd3b3c31
Binary files /dev/null and b/docs/images/videoAudioPreview/video-preview.jpg differ