+ to="/docs/what-is-phoenix-code">
Getting Started - 2min ⏱️
` tag
-
+
## Drag and Drop
@@ -242,7 +242,7 @@ When you click an element in the Live Preview, keyboard focus moves to the Live
- **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/12-Pro Features/06-device-preview.md b/docs/02-Live Preview/03-device-preview.md
similarity index 90%
rename from docs/12-Pro Features/06-device-preview.md
rename to docs/02-Live Preview/03-device-preview.md
index 9d3520d4..e019dcb5 100644
--- a/docs/12-Pro Features/06-device-preview.md
+++ b/docs/02-Live Preview/03-device-preview.md
@@ -1,5 +1,6 @@
---
title: Device Preview
+slug: "/Pro Features/device-preview"
---
import React from 'react';
@@ -20,7 +21,7 @@ import VideoPlayer from '@site/src/components/Video/player';
The right end of the Live Preview toolbar has a device-size button.
You can click on the device icon to switch between mobile, tablet and desktop sizes. For more specific sizes, click the dropdown arrow to open a list of predefined devices and CSS breakpoints (from your stylesheets).
-
+
> Some devices might not be available if your screen is too narrow to fit the Live Preview at that size. In that case, you can try zooming out (`Ctrl/Cmd + -`) to make more space for the preview.
@@ -37,7 +38,7 @@ Phoenix Code reads your page's stylesheets and picks up the media-query breakpoi
While you drag the edge of the Live Preview panel, a ruler appears across the toolbar with tick marks and colored bands for each of your breakpoints. A label above the preview shows the current width and the closest matching device, like `iPad Mini — 768px`.
-
+
### In Design Mode
diff --git a/docs/12-Pro Features/05-measurements.md b/docs/02-Live Preview/04-measurements.md
similarity index 85%
rename from docs/12-Pro Features/05-measurements.md
rename to docs/02-Live Preview/04-measurements.md
index b3b1e346..c4e7e50b 100644
--- a/docs/12-Pro Features/05-measurements.md
+++ b/docs/02-Live Preview/04-measurements.md
@@ -1,5 +1,6 @@
---
title: Measurements
+slug: "/Pro Features/measurements"
---
:::info Pro Feature
@@ -8,7 +9,7 @@ title: Measurements
The **Measurements** feature displays ruler lines extending from the edges of a selected element to the edges of the Live Preview document, with labels showing exact pixel positions. This helps you position elements more accurately.
-
+
> Ruler lines appear in blue for editable elements and gray for non-editable (dynamically created) elements.
@@ -17,7 +18,7 @@ The **Measurements** feature displays ruler lines extending from the edges of a
While in [Edit Mode](./live-preview-edit), click the dropdown arrow next to the pen icon in the Live Preview toolbar. This opens a menu where you can toggle **Show Measurements** on or off.
> By default, measurements are disabled.
-
+
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.
diff --git a/docs/12-Pro Features/03-image-gallery.md b/docs/02-Live Preview/05-image-gallery.md
similarity index 88%
rename from docs/12-Pro Features/03-image-gallery.md
rename to docs/02-Live Preview/05-image-gallery.md
index 46cf387c..d52bc46c 100644
--- a/docs/12-Pro Features/03-image-gallery.md
+++ b/docs/02-Live Preview/05-image-gallery.md
@@ -1,5 +1,6 @@
---
title: Image Gallery
+slug: "/Pro Features/image-gallery"
---
import React from 'react';
@@ -15,7 +16,7 @@ The **Image Gallery** is a panel that appears at the bottom of the Live Preview.
By default, the Image Gallery appears when you select an `![]()
` element. You can close it by clicking the Change Image button in the Control Box or the close button in the gallery. To reopen it, click the Change Image button again.
-
+
## Browsing Images
@@ -45,7 +46,7 @@ Below each thumbnail, the photographer's name and a link to their profile is dis
Click the **Select from device** button at the top of the gallery to choose an image from your local files.
If no folder has been selected yet, Phoenix Code prompts you to choose where the image should be saved.
-
+
## Folder Selection Dialog
@@ -58,11 +59,11 @@ The dialog includes:
> If the folder does not exist, Phoenix Code creates it.
> If the folder path is left empty, images are saved to an `images` folder in the project root.
-
+
To change the saved folder later, click the **Folder Selection** button *(folder icon)* in the Image Gallery header.
-
+
## Image Size Selection
@@ -80,4 +81,4 @@ Hovering over a thumbnail displays the estimated file size in the top-left corne
* Banner (1600px)
* Retina (2200px)
-
+
diff --git a/docs/12-Pro Features/04-markdown-editor.md b/docs/02-Live Preview/06-markdown-editor.md
similarity index 66%
rename from docs/12-Pro Features/04-markdown-editor.md
rename to docs/02-Live Preview/06-markdown-editor.md
index ef6a911b..03877f73 100644
--- a/docs/12-Pro Features/04-markdown-editor.md
+++ b/docs/02-Live Preview/06-markdown-editor.md
@@ -1,21 +1,45 @@
---
title: Markdown Editor
+slug: "/Pro Features/markdown-editor"
---
-
import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';
+When you open a Markdown file (`.md`), **Live Preview** shows a nicely formatted version of your document — with syntax-highlighted code blocks, rendered Mermaid diagrams, and more. As you type in the editor, the preview updates in real time. With **Phoenix Pro**, you can go a step further and edit your Markdown directly in the preview with a full rich text editor.
+
+
+
+## Scroll and Cursor Sync
+
+The editor and preview stay in sync as you work. When you scroll or move your cursor in the editor, the preview follows along to show the same section. Clicking a line in the preview scrolls the editor to the matching line and briefly highlights it, so you can see where you landed. Scrolling in either view keeps the other in step.
+
+You can turn sync on or off using the **cursor sync toggle** *(link icon)* in the preview toolbar.
+
+
-
-
-
-Update your package list:
-```bash
-sudo apt update
-```
-
-Install WebKitGTK and GTK:
-```bash
-sudo apt install libgtk-3-0 libwebkit2gtk-4.0-37
-```
-*Note: In Ubuntu 22+ versions, WebKitGTK may be pre-installed.*
-
-Install optional GStreamer plugins for media playback:
-```bash
-sudo apt install gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly gstreamer1.0-tools gstreamer1.0-libav
-```
-
-
-
-
-Update your package list:
-```bash
-sudo dnf update
-```
-
-Install WebKitGTK and GTK:
-```bash
-sudo dnf install webkit2gtk3 gtk3
-```
-
-Install optional GStreamer plugins for media playback:
-```bash
-sudo dnf install gstreamer1-plugins-base gstreamer1-plugins-good gstreamer1-plugins-bad-free gstreamer1-plugins-bad-freeworld gstreamer1-plugins-ugly gstreamer1-libav
-```
-
-
-
-
-Ensure your system is up to date:
-```bash
-sudo pacman -Syu
-```
-
-Install WebKitGTK and GTK:
-```bash
-sudo pacman -S webkit2gtk gtk3
-```
-
-Install optional GStreamer plugins for media playback:
-```bash
-sudo pacman -S gst-plugins-base gst-plugins-good gst-plugins-bad gst-plugins-ugly gst-libav
-```
-
-
-
\ No newline at end of file
diff --git a/docs/12-Pro Features/01-ai-chat.md b/docs/03-ai.md
similarity index 84%
rename from docs/12-Pro Features/01-ai-chat.md
rename to docs/03-ai.md
index 2c984447..cc88323f 100644
--- a/docs/12-Pro Features/01-ai-chat.md
+++ b/docs/03-ai.md
@@ -1,5 +1,6 @@
---
-title: AI Chat
+title: AI
+slug: "/Pro Features/ai-chat"
---
import React from 'react';
@@ -11,7 +12,7 @@ import VideoPlayer from '@site/src/components/Video/player';
Phoenix Code comes with a built-in AI assistant powered by Claude Code. You can ask it to write code, fix bugs, explain files, and more. The AI can read and edit your project files, run terminal commands, take screenshots, and work alongside you as you code.
-> AI Chat is available only in desktop apps.
+> AI is available only in desktop apps.
:::note
Free users get a daily and monthly chat limit. Once you're past halfway on either limit, a usage bar appears at the top of the chat. [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) for unlimited access.
@@ -34,7 +35,7 @@ Free users get a daily and monthly chat limit. Once you're past halfway on eithe
## Getting Started
-AI Chat requires the Claude Code CLI to be installed on your machine. If it's not installed, Phoenix Code shows a setup screen with the install command for your platform.
+AI requires the Claude Code CLI to be installed on your machine. If it's not installed, Phoenix Code shows a setup screen with the install command for your platform.
Once installed, click **Set up Claude Code** to log in. Phoenix Code detects when the login is complete and opens the chat panel automatically.
@@ -46,7 +47,7 @@ Once installed, click **Set up Claude Code** to log in. Phoenix Code detects whe
Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel.
-
+
## Sending Messages
@@ -56,7 +57,7 @@ While the AI is working, you can type your next message. It shows up as a queued
To stop the AI mid-response, click the **stop button** *(square icon)* that appears next to the send button while the AI is working, or press `Escape`.
-
+
### Context
@@ -68,7 +69,7 @@ Phoenix Code automatically provides context about what you're working on. Small
You can dismiss any of these by clicking the **x** button on the chip.
-
+
## Attachments and Screenshots
@@ -77,7 +78,7 @@ Click the **paperclip button** to attach a file or folder. The dropdown lets you
- **Attach a file** - attach a single file. Supported image formats include PNG, JPG, GIF, WebP, and SVG. You can also attach code or document files.
- **Add folder as context** - attach an entire folder so the AI can read its contents.
-
+
You can also paste an image directly from your clipboard into the input box.
@@ -89,7 +90,7 @@ Click the **camera button** to take a screenshot and attach it. The dropdown let
- **Select Area** - a custom region you select with a crop tool
- **Upload from Device** - choose an existing image from your computer instead of taking a new screenshot
-
+
## Permission Modes
@@ -99,7 +100,7 @@ The AI has three permission levels that control how much it can do on its own. C
- **Edit** (default) - the AI can read and edit files on its own, but asks for your approval before running terminal commands.
- **Full Auto** - the AI runs everything without pausing — file edits, terminal commands, and tool calls all execute without confirmation. The first time you turn this on in a project, Phoenix Code shows a one-time warning so you understand the risk.
-
+
## Approving Terminal Commands
@@ -115,13 +116,13 @@ Every edit card shows the number of lines added and removed, along with a **Show
- **Collapse all** - hide every diff section on the card
- **Always show** - keep diffs open by default on future edits without clicking Show diff each time
-
+
## Session History
Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them.
-
+
> Sessions are saved per project, so each project has its own chat history.
@@ -131,14 +132,14 @@ Before each AI response that edits files, Phoenix Code creates a **restore point
The first time you undo or restore in a session, Phoenix Code shows a confirmation dialog before reverting.
-> Restore only reverts changes made by the AI. Edits you made outside the AI Chat are not tracked and may be lost if they overlap with files the AI also edited. For full version history, use version control like Git.
+> Restore only reverts changes made by the AI. Edits you made outside the AI panel are not tracked and may be lost if they overlap with files the AI also edited. For full version history, use version control like Git.
-
+
## Settings
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
@@ -148,7 +149,7 @@ This will open a dialog where you can:
When a custom provider with a base URL is active, the chat shows a one-time **Using custom endpoint: \** notice on your next message.
-
+
### Compatible providers
diff --git a/docs/07-editing-text.md b/docs/04-Editing & Code/01-editing-text.md
similarity index 88%
rename from docs/07-editing-text.md
rename to docs/04-Editing & Code/01-editing-text.md
index 491df949..6fac1c09 100644
--- a/docs/07-editing-text.md
+++ b/docs/04-Editing & Code/01-editing-text.md
@@ -1,5 +1,6 @@
---
title: Editing Text
+slug: "/editing-text"
---
import React from 'react';
@@ -33,7 +34,7 @@ To revert back to a single cursor, just press the `Esc` key.
1. Right click on the element you want details about.
2. A context menu will appear, click on **Quick Docs** or simply press `F1` to bring up Quick Docs directly.
-
+
## Auto Rename Tag
The **Auto Rename Tag** feature updates matching tags automatically when you rename one. It works with HTML, XHTML, HTM, XML, SVG, PHP, and JSP files.
@@ -49,7 +50,7 @@ When you rename an opening or closing tag, the corresponding tag updates instant
#### Toggle the Feature
To enable or disable the **Auto Rename Tag** feature, go to `Edit` > `Auto Rename HTML Tags`.
-
+
*The **Auto Rename HTML Tags** feature is enabled by default.*
@@ -89,7 +90,7 @@ When in **Insert Mode**, any text you type is inserted at the current cursor pos
#### **Using Editor Interface**
Click on the `INS(OVR)` button on the status bar to toggle between Insert Mode and Overwrite Mode. `INS` represents Insert Mode. `OVR` represents Overwrite Mode.
-
+
#### **Using Keyboard**
Press the `Ins` or the Insert key to toggle between Insert Mode and Overwrite Mode.
@@ -111,7 +112,7 @@ You can toggle between spaces and tab size by clicking the `Tab Size` or `Spaces
You can adjust the tab size width or number of spaces by clicking the value in the status bar and modifying it as needed.
-
+
### Quick Tips
* If you need to recompute the tab spacing configuration for a file, toggle the `Auto` button twice (switch to Fixed mode and back to Auto). This will refresh the spacing settings for the current file.
@@ -128,7 +129,7 @@ You can adjust the tab size width or number of spaces by clicking the value in t
You can personalize Phoenix to suit your workflow by adjusting the preferences.
### Open the Preferences File:
-
+
To modify the preferences, go to `File` > `Open Preferences File`.
### Understanding the Preferences Layout
@@ -137,6 +138,6 @@ Once selected, two files will appear side by side:
* phcode.json (on the right) :- This file is editable and used for any custom preferences you wish to apply.
### Modifying Preferences
-
+
To change a preference, simply write the desired configuration and values in the **phcode.json** and save the file. These custom settings will automatically override the corresponding values in the default preferences.
diff --git a/docs/08-editing-colors.md b/docs/04-Editing & Code/02-editing-colors.md
similarity index 87%
rename from docs/08-editing-colors.md
rename to docs/04-Editing & Code/02-editing-colors.md
index e2b8a3d5..01e07f54 100644
--- a/docs/08-editing-colors.md
+++ b/docs/04-Editing & Code/02-editing-colors.md
@@ -1,5 +1,6 @@
---
title: Editing Colors
+slug: "/editing-colors"
---
import React from 'react';
@@ -12,10 +13,10 @@ This section provides an overview of the core color editing features in **Phoeni
### Accessing the Inline Color Editor
To open the **Inline Color Editor** just hover over the color you want to edit.
-
+
The **Inline Color Editor** provides you an `Edit` button, click on it to open the color picker.
-
+
### Understanding the Color Picker Dialog
@@ -51,14 +52,14 @@ ___
## Color Preview
The **Color Preview** feature displays the color(s) used in the current line in the gutter area.
-
+
> A maximum of four colors can be displayed for a single line.
### Hover Interaction
* Hovering over a color box highlights the corresponding color text in the editor with a background of the same color.
* If a container has multiple colors, the hovered color box enlarges for easier accessibility, and its color text gets highlighted with the same color.
-
+
### Click Behavior
@@ -70,11 +71,11 @@ You can enable/disable the feature by updating the `colorPreview` property in th
## Color Hints
After typing a color related property, **Phoenix Code** displays a list of color suggestions.
-
+
### Previously Used Color Suggestions
If a file already contains colors, **Phoenix Code** prioritizes those colors in the color hint list. Colors are sorted in *descending order* based on their usage count in the file.
-
+
> This helps in reusing frequently used colors without manually searching for them.
diff --git a/docs/13-Features/09-quick-edit.md b/docs/04-Editing & Code/03-quick-edit.md
similarity index 80%
rename from docs/13-Features/09-quick-edit.md
rename to docs/04-Editing & Code/03-quick-edit.md
index 1cc056f2..8844c4fe 100644
--- a/docs/13-Features/09-quick-edit.md
+++ b/docs/04-Editing & Code/03-quick-edit.md
@@ -1,5 +1,6 @@
---
title: Quick Edit
+slug: "/Features/quick-edit"
---
import React from 'react';
@@ -14,7 +15,7 @@ Follow these steps to use the Quick Edit feature:
1. **Position the Cursor**:
Place the cursor where you need to start Quick Edit in the HTML file.
- 
+ 
2. **Access Quick Edit**:
You can access Quick Edit in one of three ways:
@@ -22,12 +23,12 @@ Follow these steps to use the Quick Edit feature:
- **Mouse Shortcut**: Combine `Ctrl + click` (Windows/Linux) or `Cmd + click` (Mac).
- **Context Menu**: Right-click to open the context menu and choose Quick Edit.
- 
+ 
3. **Edit CSS**:
The Quick Edit window will appear, showing the CSS related to your selected HTML element.
- 
+ 
4. **Save and Close**:
After you've made the necessary changes, save your edits and close the Quick Edit window to continue your work.
diff --git a/docs/13-Features/10-syntax-highlighting.md b/docs/04-Editing & Code/04-syntax-highlighting.md
similarity index 79%
rename from docs/13-Features/10-syntax-highlighting.md
rename to docs/04-Editing & Code/04-syntax-highlighting.md
index 7bdddd97..a2acad5a 100644
--- a/docs/13-Features/10-syntax-highlighting.md
+++ b/docs/04-Editing & Code/04-syntax-highlighting.md
@@ -1,5 +1,6 @@
---
title: Syntax Highlighting
+slug: "/Features/syntax-highlighting"
---
**Syntax highlighting** improves code readability by coloring different syntax elements in your code. This feature helps you quickly identify keywords, variables, and other code components, aiding in error detection and code comprehension.
@@ -17,7 +18,7 @@ Syntax highlighting works by analyzing the code and applying color schemes to va
Phoenix uses predefined rules for different programming languages to apply the appropriate colors.
-
+
Syntax Highlighting Example in a JavaScript File
@@ -27,10 +28,10 @@ The colors used for syntax highlighting depend on the theme you are using. Theme
Syntax Highlighting Example [Theme : `Monokai Dark Soda`]
-
+
Syntax Highlighting Example [Theme : `Material Color Light`]
-
+
To learn more about Themes. [Click Here](../customizing-editor#themes)
@@ -42,7 +43,7 @@ If you create a new file and the file type is not recognized, it will be treated
1. Click on the **Text** Button: Locate the `Text` button in the Status Bar at the bottom of the editor.
2. Select a Language: From the dropdown list, choose the language whose syntax rules you want to apply for highlighting this file.
-
+
The file will now be treated as the selected language type, and syntax highlighting will be applied accordingly.
diff --git a/docs/13-Features/03-emmet.md b/docs/04-Editing & Code/05-emmet.md
similarity index 94%
rename from docs/13-Features/03-emmet.md
rename to docs/04-Editing & Code/05-emmet.md
index 2a7cd802..a15b49f7 100644
--- a/docs/13-Features/03-emmet.md
+++ b/docs/04-Editing & Code/05-emmet.md
@@ -1,5 +1,6 @@
---
title: Emmet
+slug: "/Features/emmet"
---
import React from 'react';
@@ -46,7 +47,7 @@ import VideoPlayer from '@site/src/components/Video/player';
### Emmet in Stylesheet Languages
**Emmet** also works in stylesheets (**CSS**, **SCSS**, **Less**). In stylesheets, the Emmet icon acts as a clickable link that opens the corresponding MDN documentation for that property (if available).
-
+
**Examples:**
* `bgc` expands to:
@@ -70,7 +71,7 @@ import VideoPlayer from '@site/src/components/Video/player';
### Enabling/Disabling Emmet
To enable or disable the **Emmet** feature, go to `Edit` > `Emmet`.
-
+
You can also toggle Emmet by updating the `emmet` property in the preferences file.
See [Editing Preferences](../editing-text#editing-preferences) for more details.
diff --git a/docs/13-Features/02-custom-snippets.md b/docs/04-Editing & Code/06-custom-snippets.md
similarity index 84%
rename from docs/13-Features/02-custom-snippets.md
rename to docs/04-Editing & Code/06-custom-snippets.md
index da13913c..bb5f7443 100644
--- a/docs/13-Features/02-custom-snippets.md
+++ b/docs/04-Editing & Code/06-custom-snippets.md
@@ -1,5 +1,6 @@
---
title: Custom Snippets
+slug: "/Features/custom-snippets"
---
import React from 'react';
@@ -7,7 +8,7 @@ import VideoPlayer from '@site/src/components/Video/player';
**Custom Snippets** let you create your own reusable code hints. You can define short abbreviations that expand into full code snippets when selected from the code hints that appear as you type. In the code hint, **Phoenix Code** displays a small `Snippet` label on the right, indicating that the hint comes from custom snippets.
-
+
You can also specify which file types each snippet should work with, so they appear only where they’re relevant.
@@ -25,22 +26,22 @@ The snippets you define are available globally, so you don’t need to recreate
You can manage all your snippets from the **Custom Snippets** panel.
To access it, navigate to `File` → `Custom Snippets...`.
-
+
The panel appears at the bottom of the editor.
-
+
If you haven’t added any snippets yet, the panel will be empty.
### Add Snippet
To add a snippet, click on the `'+'` button that appears on the panel header.
> Alternatively, if your snippets panel is empty, **Phoenix Code** shows a large `Add Snippet` button in the panel itself.
-
+
Clicking on it opens the **Add Snippet** panel.
-
+
#### Understanding the Add Snippet Panel
The **Add Snippet** panel contains four input fields, each with placeholder examples to guide you:
@@ -55,23 +56,23 @@ The **Add Snippet** panel contains four input fields, each with placeholder exam
#### Example Snippet
The image below shows a complete snippet configuration:
-
+
After entering the values, click `Save`.
> Your snippet will be added to the list and can be used immediately in **Phoenix Code**.
-
+
In the panel header, you can see the total number of snippets you’ve added. You can create as many snippets as you like.
### Edit Snippet
You can edit an existing snippet whenever you need to make changes. To edit a snippet, click the snippet you want to edit from the snippets list. This will open the **Edit Snippet** panel.
-
+
Update the fields you want to modify.
For example, in the snippet shown below, we’ve updated the **Abbreviation** from `scr` to `script`.
After making your changes, click `Save`.
-
+
You can see that the snippet is now updated with the new **Abbreviation**.
@@ -79,7 +80,7 @@ You can see that the snippet is now updated with the new **Abbreviation**.
Deleting a snippet is simple. From the snippets list, click the *Trash Bin* icon on the right side of the snippet you want to remove.
This will immediately delete the snippet.
-
+
> ⚠️ Caution: Deleting a snippet is permanent and cannot be undone.
@@ -87,7 +88,7 @@ This will immediately delete the snippet.
When you have a large collection of snippets, the **Filter** feature helps you quickly narrow down the list.
You’ll find it on the top-right side of the snippets panel.
-
+
You can filter the list by any value, such as **Abbreviation**, **Description**, **File Extension**, or **Template Text**.
@@ -111,7 +112,7 @@ When the snippet expands:
Here’s an example of a snippet with numbered cursor placeholders:
-
+
> To move backward through the placeholders, press `Shift + Tab`.
diff --git a/docs/13-Features/01-beautify-code.md b/docs/04-Editing & Code/07-beautify-code.md
similarity index 83%
rename from docs/13-Features/01-beautify-code.md
rename to docs/04-Editing & Code/07-beautify-code.md
index d110e3a7..6a452f95 100644
--- a/docs/13-Features/01-beautify-code.md
+++ b/docs/04-Editing & Code/07-beautify-code.md
@@ -1,5 +1,6 @@
---
title: Beautify Code
+slug: "/Features/beautify-code"
---
import React from 'react';
@@ -14,7 +15,7 @@ You can format your code using Beautify Code through the following methods:
* Right-click in the editor.
* Select **Beautify Code** from the context menu.
- 
+ 
### Keyboard Shortcut :
@@ -30,7 +31,7 @@ You can format your code using Beautify Code through the following methods:
To automatically format your code every time you save :
1. Go to `Edit` > `Beautify Code After Save`.
2. Toggle this option on.
-
+
@@ -65,10 +66,10 @@ When you open the preferences, two files will appear:
Default value of bracketSameLine is *True*.
When set to *True* :
- 
+ 
When set to *False* :
- 
+ 
---
@@ -112,10 +113,10 @@ When you open the preferences, two files will appear:
Default value of singleAttributePerLine is *false*.
When set to *True* :
- 
+ 
When set to *False* :
- 
+ 
---
@@ -125,10 +126,10 @@ When you open the preferences, two files will appear:
Default value of singleQuote is *false*.
When set to *True* :
- 
+ 
When set to *False* :
- 
+ 
---
@@ -143,13 +144,13 @@ When you open the preferences, two files will appear:
Default value of trailingComma is *none*.
When set to *none*:
- 
+ 
When set to *es5*:
- 
+ 
When set to *all*:
- 
+ 
---
diff --git a/docs/04-Editing & Code/_category_.json b/docs/04-Editing & Code/_category_.json
new file mode 100644
index 00000000..58d08218
--- /dev/null
+++ b/docs/04-Editing & Code/_category_.json
@@ -0,0 +1,5 @@
+{
+ "label": "Editing & Code",
+ "collapsible": true,
+ "collapsed": true
+}
diff --git a/docs/09-file-management.md b/docs/05-Workspace/01-file-management.md
similarity index 86%
rename from docs/09-file-management.md
rename to docs/05-Workspace/01-file-management.md
index b9dfa932..b1491339 100644
--- a/docs/09-file-management.md
+++ b/docs/05-Workspace/01-file-management.md
@@ -1,5 +1,6 @@
---
title: File Management
+slug: "/file-management"
---
import React from 'react';
@@ -12,7 +13,7 @@ This section covers how **Phoenix Code** lets you manage, organize, and navigate
The **File Tree** appears in the sidebar and shows the complete folder structure of the open project.
It lists all files and folders in a hierarchical view.
-
+
### File Tree Context Menu
@@ -26,7 +27,7 @@ The element you right-click in the File Tree becomes the selected context, meani
> In the image shown below, `index.html` is selected as the context. Any action from the context menu will apply to that file.
-
+
You can also assign or update keyboard shortcuts for any File Tree action through the context menu using the keyboard button at the side.
@@ -40,13 +41,13 @@ To sort folders and files together:
1. Click the **double-arrow** at the top-right of the sidebar.
2. In the dropdown, uncheck **Sort Folders First**.
-
+
Alternatively, you can control this behavior by updating the `sortDirectoriesFirst` property in the preferences file.
See [Editing Preferences](./editing-text#editing-preferences) for details.
Now, files and folders are sorted together in one ascending list.
-
+
> Notice how the `images` folder now appears in alphabetical order with other items.
### Collapse All Folders
@@ -67,7 +68,7 @@ The **Tab Bar** appears at the top of the editor and displays all open files.
Each file in the Tab Bar is referred to as a **tab**, and you can open as many tabs as you like.
*The Tab Bar helps you switch quickly between files while working.*
-
+
The active tab is highlighted with a *blue* marker to distinguish it from inactive ones.
To switch between tabs, simply click the tab you want to view.
@@ -82,12 +83,12 @@ If you try to close a tab with unsaved changes, **Phoenix Code** displays a conf
* **Save**: Saves the file and then closes the tab.
* **Cancel**: Keeps the tab open and returns you to editing.
-
+
When multiple tabs have the same filename, **Phoenix Code** displays their parent folder name so you can easily tell them apart.
> Hovering over a tab will show a tooltip with its full path.
-
+
> The image above shows various UI elements of a tab.
@@ -97,7 +98,7 @@ Preview Tabs are temporary tabs created when you single-click a file in the File
Preview Tabs are only visible in the Tab Bar and are not added to the Working Set. They appear in *italic* with a lighter *gray* text.
-
+
A preview tab becomes a permanent tab and is added to your Working Set when you:
- Make any change to the file
@@ -115,7 +116,7 @@ When multiple panes are open, each pane has its own Tab Bar and maintains its ow
The active tab in the **active pane** is marked in *blue*,
while the active tab in an **inactive pane** appears in *gray*.
-
+
> A file can appear as a tab in more than one pane.
@@ -123,7 +124,7 @@ while the active tab in an **inactive pane** appears in *gray*.
When you open a new file, its tab is added to the right of the existing tabs.
If there are more tabs than can fit within the visible area, **Phoenix Code** displays a **Show Hidden Tabs** button.
-
+
Clicking this button opens a dropdown list of all tabs that are not fully visible.
From this list, you can select a tab to bring it into view or close tabs directly from the dropdown.
@@ -144,13 +145,13 @@ Tabs can also be dragged between panes.
### Tab Bar Context Menu
When you right-click a tab, a context menu appears which has multiple options so that you can work with tabs easily.
-
+
> These options provide quick access to common file operations directly from the Tab Bar.
### Git - Tab Bar
The Tab Bar displays Git file status indicators, showing which files are **untracked** or **modified**.
-
+
- A **green marker** indicates an **untracked** file.
- An **orange marker** indicates a **modified** file.
@@ -182,13 +183,13 @@ You can enable or disable the Tab Bar in several ways:
#### 1. From the View Menu
Go to `View > File Tab Bar` to toggle it on or off.
-
+
#### 2. From the Sidebar
Click the **double-arrow** icon in the top-right corner of the sidebar,
then use the `Show File Tab Bar` option in the dropdown to toggle the Tab Bar.
-
+
#### 3. From Preferences
You can also toggle the Tab Bar by updating the `showTabBar` option in the preferences file.
@@ -204,7 +205,7 @@ See [Editing Preferences](./editing-text#editing-preferences) if you need help i
## Working Files
**Working Files** (also called **Working Tree**) provides another way to view and manage open files. It appears in the sidebar, above the **File Tree**.
-
+
Working Files and Tab Bar are synchronized, which means that any operation performed on one (closing, reordering, opening files, etc.) is automatically reflected on the other.
@@ -226,7 +227,7 @@ The panes are labeled based on the split orientation:
* **Vertical Split**: *Left* (first pane) and *Right* (second pane)
* **Horizontal Split**: *Top* (first pane) and *Bottom* (second pane)
-
+
### Drag-Drop in Working Files
You can reorder files in Working Files by dragging and dropping them, just like in the Tab Bar.
@@ -238,7 +239,7 @@ You can reorder files in Working Files by dragging and dropping them, just like
### Working Files Context Menu
When you right-click a file in Working Files, a context menu appears with various file operations.
-
+
> These options provide quick access to common file operations directly from Working Files.
### Showing or Hiding Working Files
@@ -247,7 +248,7 @@ You can show or hide the Working Files panel in two ways:
#### 1. From the Sidebar
Click the **double-arrow** icon in the top-right corner of the sidebar, then use the `Show Working Files` option in the dropdown to toggle Working Files.
-
+
#### 2. From Preferences
You can also toggle Working Files by updating the `showWorkingSet` property in the preferences file.
@@ -267,7 +268,7 @@ The **Recent Files** dialog provides quick access to files you've recently worke
To customize the keyboard shortcut, refer to the [Keyboard Shortcuts Guide](./Features/keyboard-shortcuts#changing-a-keyboard-shortcut).
-
+
The dialog shows your recently opened files. Closed files appear in gray. Hover over them to see an `x` icon. Click it to remove them from the list. The `Clear` button at the bottom removes all closed files at once.
@@ -282,7 +283,7 @@ To view a file's full path, hover over it or check the bottom-left corner of the
### Recovering Files After a Crash
When you reopen the editor, if there are any unsaved changes from the previous session, a dialog box will appear with two options: `Discard` and `Restore`.
-
+
* **Restore**: Recovers your unsaved files by reinstating all changes made before the last save.
@@ -301,7 +302,7 @@ Each file has two settings that control how **Phoenix Code** interprets its cont
1. Click on the `utf8` button on the status bar. (UTF-8 represents the default encoding format).
2. A list of available encoding formats will appear. Select your desired format, or start typing to filter and find matching options in the drop-down menu.
-
+
### File Type Associations
**File Type Associations** *(Associating a file type with a language)* allows Phoenix Code Editor to provide language-specific features, such as syntax highlighting, code completion, and error checking, based on the file extension. This ensures that your files are treated according to their intended programming or markup language.
@@ -314,7 +315,7 @@ To associate a new file type with a specific language in Phoenix Code Editor, us
2. Click on `Text` button on the status bar.
3. A list of all the supported languages will appear. Select the language you want to associate with the file type. For our example, we select `JavaScript`.
-
+
4. At the top of the popup box, you'll find an option labeled `Set as default for .myjs files`. Click on it.
diff --git a/docs/13-Features/04-find-in-files.md b/docs/05-Workspace/02-find-in-files.md
similarity index 92%
rename from docs/13-Features/04-find-in-files.md
rename to docs/05-Workspace/02-find-in-files.md
index ef7bd8c1..1cbcb425 100644
--- a/docs/13-Features/04-find-in-files.md
+++ b/docs/05-Workspace/02-find-in-files.md
@@ -1,10 +1,14 @@
+---
+slug: "/Features/find-in-files"
+---
+
# Find In Files
The Find in Files feature in Phoenix Code is a powerful tool to quickly search for specific text across multiple files within a project. This feature is useful for developers working on large codebases to find references, variable names, or specific lines of code.
To search across your project files, use `Ctrl-Shift-F` on Windows/Linux or `Cmd-Shift-F` on Mac, or select `Find > Find in Files` from the menu. This feature searches for your term throughout the project's files and displays each occurrence with its file name, line number, and a snippet of the code for context.
-
+
## Searching Within a Folder
@@ -13,11 +17,11 @@ To search within a specific folder in Phoenix:
1. Right-click on the folder in the Files panel where you want to perform the search.
1. From the context menu that appears, select "Find in...".
- 
+ 
3. The find bar will now appear with search restricted to that folder (See `in y/` in the below image).
- 
+ 
## Using File Filters
@@ -25,7 +29,7 @@ By default, Find in Files searches all files in your project folder. You can exc
* Click the "No Files Excluded" dropdown from the search bar.
- 
+ 
Phoenix Code allows you to specify which files and folders should be excluded or included during project searches.
@@ -33,7 +37,7 @@ Phoenix Code allows you to specify which files and folders should be excluded or
When you select `Search in files` option from the above dropdown, the filter will search only within files and folders that match the entered patterns. Entering `*.json,*.css` will include only JSON and css files in your search results, or just enter `json` to select any files having charecters `json` in its path. See more patterns below.
-
+
### For Excluding files
diff --git a/docs/06-customizing-editor.md b/docs/05-Workspace/03-customizing-editor.md
similarity index 86%
rename from docs/06-customizing-editor.md
rename to docs/05-Workspace/03-customizing-editor.md
index 19f6f237..da8ffd50 100644
--- a/docs/06-customizing-editor.md
+++ b/docs/05-Workspace/03-customizing-editor.md
@@ -1,5 +1,6 @@
---
title: Customizing the Editor
+slug: "/customizing-editor"
---
import React from 'react';
@@ -20,7 +21,7 @@ You can install more themes, create your own, or remove themes you have installe
Open `View > Themes...` and pick a theme from the **Current Theme** dropdown. The change applies immediately.
-
+
Click **Get More...** to browse community themes. See [Extensions](./extensions) for installation steps.
@@ -35,7 +36,7 @@ The **Use Theme Scrollbars** checkbox controls scrollbar styling.
Phoenix Code uses **SourceCodePro** as the default editor font. Change the size and family from `View > Themes...`.
-
+
### Font Size
@@ -82,7 +83,7 @@ To adjust line height:
2. Navigate to the `Themes...` option.
3. Use the Line Height slider to set a value between 1 and 3. The default is 1.5.
-
+
Adjustments apply instantly, updating the editor dynamically.
@@ -100,7 +101,7 @@ You can also modify the line height by updating the `themes.editorLineHeight` pr
2. Select `Themes...`.
3. Use the **Scroll Sensitivity** slider to set a value between `0.1` and `10`. The default is `1` (normal speed).
-
+
The new value applies immediately.
@@ -110,11 +111,11 @@ Set the `mouseWheelScrollSensitivity` property in the preferences file. Accepts
## Indent Guide Lines
-
+
**Indent Guide Lines** are vertical lines that help visually align code blocks and indicate indentation levels. They assist in understanding code hierarchy and nested structures, improving overall readability.
### Enabling/Disabling Indent Guide Lines
-
+
To enable or disable Indent Guide Lines, go to `View > Indent Guide Lines`.
@@ -176,7 +177,7 @@ shown in the example above.
#### **Using Editor Interface** :
Toggle between `No-Distractions` Mode and `Normal` Mode through `View > Menu` option.
-
+
#### **Using Keyboard** :
Press `Shift + F11` to toggle between `No-Distractions` Mode and `Normal` Mode.
diff --git a/docs/13-Features/06-keyboard-shortcuts.md b/docs/05-Workspace/04-keyboard-shortcuts.md
similarity index 91%
rename from docs/13-Features/06-keyboard-shortcuts.md
rename to docs/05-Workspace/04-keyboard-shortcuts.md
index 9749a04b..919fbc28 100644
--- a/docs/13-Features/06-keyboard-shortcuts.md
+++ b/docs/05-Workspace/04-keyboard-shortcuts.md
@@ -1,3 +1,7 @@
+---
+slug: "/Features/keyboard-shortcuts"
+---
+
# Keyboard Shortcuts
Now you can make your own shortcuts for any menu, so you don't have to memorize a bunch of different ones for every app. It's like customizing your game controls to play your way!
@@ -16,14 +20,14 @@ This feature is accessible in two ways: via the menu items or through the Keyboa
### Via Keyboard Shortcuts Panel
-
+
- Open the Keyboard Shortcuts panel by selecting `Keyboard Shortcuts...` from the `File` menu.
- The panel displays a list of all available commands with their associated shortcuts.
- Locate the command for which you want to change the shortcut.
- Double-click on the shortcut, or click the command and then the `Change Keyboard Shortcut` button that appears.
-
+
## Changing a Keyboard Shortcut
@@ -36,7 +40,7 @@ This feature is accessible in two ways: via the menu items or through the Keyboa
- Press the keys for your new desired shortcut.
- If the combination is already assigned to another command, you will be notified and given the option to choose another combination or to overwrite the existing one by pressing `Assign`.
-
+
3. **Confirmation**:
- After pressing the desired combination, if it is free, it will be set immediately.
@@ -49,7 +53,7 @@ This feature is accessible in two ways: via the menu items or through the Keyboa
## Resetting Shortcuts
-
+
Users can reset all shortcuts to factory defaults using the 'Reset' button in the Keyboard Shortcuts panel.
## Additional Notes
diff --git a/docs/13-Features/11-terminal.md b/docs/05-Workspace/05-terminal.md
similarity index 99%
rename from docs/13-Features/11-terminal.md
rename to docs/05-Workspace/05-terminal.md
index 663e0632..b727b453 100644
--- a/docs/13-Features/11-terminal.md
+++ b/docs/05-Workspace/05-terminal.md
@@ -1,5 +1,6 @@
---
title: Terminal
+slug: "/Features/terminal"
---
import React from 'react';
diff --git a/docs/13-Features/05-git.md b/docs/05-Workspace/06-git.md
similarity index 80%
rename from docs/13-Features/05-git.md
rename to docs/05-Workspace/06-git.md
index 780f1592..0f99e581 100644
--- a/docs/13-Features/05-git.md
+++ b/docs/05-Workspace/06-git.md
@@ -1,5 +1,6 @@
---
title: Git
+slug: "/Features/git"
---
import React from 'react';
@@ -9,7 +10,7 @@ import VideoPlayer from '@site/src/components/Video/player';
**Phoenix Code** includes built-in Git support, allowing you to manage version control directly within the editor. Git can be accessed from the toolbar icon or the File menu in the menu bar.
-
+
> To use Git features inside Phoenix Code, ensure Git is installed on your computer. [Download Git](https://git-scm.com/downloads)
@@ -18,18 +19,18 @@ import VideoPlayer from '@site/src/components/Video/player';
To clone an existing repository in **Phoenix Code**, follow these steps:
-1. Click on the `Start Project` button.
+1. Click on the `Start Project` button.
-
+
> 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`.
-
+
3. 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.
@@ -41,13 +42,13 @@ You can also clone a repository through the menu:
1. Go to `File > Git > Clone`.
2. Enter the repository URL in the dialog that appears.
-
+
#### More Options
In the Clone Repository dialog, clicking on `More Options` expands additional settings for authentication.
-
+
**Credentials**: This section allows you to enter your *username* and *password* for repositories that require authentication. Typically, if your credentials are already stored in a credential manager (like SSH keys or a Git credential manager), you don't need to fill in these fields.
@@ -60,13 +61,13 @@ In the Clone Repository dialog, clicking on `More Options` expands additional se
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.
-
+
> Note: *For projects without an existing Git repository, the Git icon won’t appear by default. To initialize or connect a Git repository, use the File menu to set up Git for your project.*
Once Git is set up, the Git Panel provides a user-friendly interface to manage version control. You can track changes, commit updates, interact with remote repositories, and more—all within the editor.
-
+
@@ -74,12 +75,12 @@ Once Git is set up, the Git Panel provides a user-friendly interface to manage v
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.
-
+
*Git diff is used to display the changes made to a file — Green lines indicate added content, while red lines show removed content.*
Clicking on the Git diff icon opens up the Git diff dialog page.
-
+
### Discard changes
@@ -87,11 +88,11 @@ For *Modified* and *Deleted* file statuses, a `Discard Changes...` button is sho
For *Untracked* files, a `Delete File...` button is available. Clicking it will delete the file.
-
+
You can also discard all changes made to all files at once by clicking the three dots at the top-right and selecting the `Discard all changes since the last commit...` option. This will remove all modifications made since your last commit.
-
+
@@ -100,14 +101,14 @@ You can also discard all changes made to all files at once by clicking the three
When viewing a file with multiple Git changes, you can use the Next Change and Previous Change buttons to quickly move between modifications.
* **Next Change**: Moves the cursor to the next change in the file.
-
+
* **Previous Change**: Moves the cursor to the previous change in the file.
-
+
**Visual Reference**
-