refactor: reorganize docs repo

Author: devvaannsh

blog/2026-03-04-phoenix-code-vs-brackets/index.md

@@ -70,19 +70,19 @@ These are the features the Brackets community asked for — and we finally built
 
 Brackets' live preview was view-only. You could see changes reflected in real time, but you always had to make edits in the code. With [Phoenix Pro](/docs/Pro%20Features/live-preview-edit), you can click on any element in the live preview and edit it right there — change text, swap images by dragging, rearrange elements visually. The source code updates automatically.
 
-![Phoenix Code live preview modes for editing HTML and CSS visually](../../docs/13-Features/images/livePreview/lp-mode.png)
+![Phoenix Code live preview modes for editing HTML and CSS visually](../../docs/images/livePreview/lp-mode.png)
 
 ### Visual CSS Editing
 
 Brackets had inline color pickers — Phoenix Code keeps those and adds number dials you can scrub to adjust CSS values like margins, padding, font sizes, and more. Hover over a number, drag to adjust, and see the result update in live preview instantly.
 
-![Phoenix Code CSS number dial for adjusting margins and padding](../../docs/13-Features/images/number-dial.gif)
+![Phoenix Code CSS number dial for adjusting margins and padding](../../docs/images/number-dial.gif)
 
 ### Built-in Git
 
 Phoenix Code ships with native Git support based on the familiar Brackets Git extension, addressing many of its earlier limitations with a simpler UX and improved reliability. Commit, push, pull, diff, and branch management, all built in.
 
-![Built-in Git integration in Phoenix Code — commit and push](../../docs/13-Features/images/git-images/git-commit.png)
+![Built-in Git integration in Phoenix Code — commit and push](../../docs/images/git-images/git-commit.png)
 
 ### Runs in Your Browser
 
@@ -92,7 +92,7 @@ Open [phcode.dev](https://phcode.dev) and start editing — no install or admin
 
 Inspect spacing between elements, measure distances, and check alignment directly in the live preview. If you work from design mockups, this replaces the constant back-and-forth between your editor and a separate design tool.
 
-![Phoenix Code measurement and inspection tools in live preview](../../docs/12-Pro%20Features/images/measurements.png)
+![Phoenix Code measurement and inspection tools in live preview](../../docs/images/pro/measurements.png)
 
 ---
 

docs/01-Getting Started/01-what-is-phoenix-code.md

@@ -0,0 +1,47 @@
+---
+title: What is Phoenix Code?
+slug: /what-is-phoenix-code
+---
+
+Phoenix Code is **Brackets, reborn** — a lightweight, web-first code editor built by the original Adobe Brackets team. It's designed for one thing above all: helping you **build the web**, with **Live Preview** sitting right at its heart.
+
+If you just arrived, this page tells you what Phoenix is, why you might use it, and where to go next.
+
+## Why Phoenix Code
+
+Phoenix focuses on the front-end workflow and bundles the tools you actually use into a fast, open editor.
+
+- **Live Preview** — The flagship feature. Edit your HTML and CSS and watch the browser update in real time, with reverse-highlight that jumps from the rendered preview straight back to the source.
+- **Runs everywhere** — Use the native apps for macOS, Windows, and Linux, or run the full editor in your browser at [https://phcode.dev](https://phcode.dev) with no install at all — perfect for Chromebooks and tablets.
+- **Lightweight and fast** — Phoenix stays quick and responsive so the editor never gets in your way.
+- **Built-in tools** — Git, Terminal, Emmet, Beautify, and code hints all ship in the box, so things that used to need extensions just work.
+- **AI assistance** — The AI understands your rendered page, not just the raw source, so its help is grounded in what you actually see.
+- **Visual editing** — Color pickers, number-scrubbing dials, and gradient editors let you tweak values by feel instead of by guesswork.
+- **Open source** — Phoenix Code is released under the AGPL-3.0 license.
+
+## Free vs Pro
+
+Everything Brackets had — and quite a bit more — is **free forever**. You can build complete websites without paying anything.
+
+**Phoenix Pro** adds advanced visual editing on top, including **Live Preview Edit** and **Design Mode**. You can see plans on the [pricing page](https://phcode.io/pricing).
+
+One important note: **Phoenix Pro is free for students and educators**. If you're learning or teaching, you get the full Pro experience at no cost.
+
+## Who it's for
+
+Phoenix Code is built for:
+
+- **Front-end developers** who live in HTML, CSS, and JavaScript every day.
+- **Web designers** who want to see and shape changes visually as they go.
+- **Students and educators** who need a capable, no-cost editor that runs anywhere — including in the browser.
+
+## Next steps
+
+Ready to dive in? Here's where to go:
+
+- **Install it:** [Installation](/docs/intro)
+- **Create your first project:** [Your First Project](/docs/quick-start-project)
+- **See the flagship feature:** [Live Preview](/docs/Features/Live Preview)
+- **Try the AI assistant:** [AI Chat](/docs/Pro Features/ai-chat)
+
+Want to skip the install entirely? Open [https://phcode.dev](https://phcode.dev) and start coding in your browser right now. Looking to download the desktop app? Head to [https://phcode.io](https://phcode.io).

docs/01-intro.md …cs/01-Getting Started/02-installation.mddocs/01-intro.md renamed to docs/01-Getting Started/02-installation.md docs/01-intro.md renamed to docs/01-Getting Started/02-installation.md

@@ -1,3 +1,7 @@
+---
+slug: "/intro"
+---
+
 # Phoenix Code Setup Guide
 
 ## Introduction
@@ -8,7 +12,7 @@ Phoenix Code is a text editor designed to make coding as intuitive and fun as pl
 
 Visit the official website - [phcode.io](https://phcode.io) and click the download button to download the apropriate app installer for your operating system.
 
-![Alt text](images/Website/download.png)
+![Alt text](../images/Website/download.png)
 
 NB: Linux users, please see below section `How to Install on Linux`
 
@@ -19,7 +23,7 @@ If you need a version for a different operating system or have specific requirem
 1. Click on the **"Download"** drop-down menu on the website.
 2. Select the desired installer from the available options.
 
-![Alt text](images/Website/downloadOptions.png)
+![Alt text](../images/Website/downloadOptions.png)
 
 Phoenix Code is compatible with a wide range of operating systems, including:
 
@@ -33,7 +37,7 @@ Run the downloaded installer(in Windows and Mac) and follow the on-screen instru
 
 ### How to Install on Linux
 
-![Alt text](images/Website/linuxCmd.png)
+![Alt text](../images/Website/linuxCmd.png)
 1. Open the Terminal. You can usually find the Terminal in your applications menu.
 1. Copy the command from the website or use the command:
 ```bash

docs/03-Linux.md docs/01-Getting Started/03-Linux.mddocs/03-Linux.md renamed to docs/01-Getting Started/03-Linux.md

@@ -1,5 +1,6 @@
 ---
 title: Install/Uninstall in Linux
+slug: "/Linux"
 ---
 
 import Tabs from '@theme/Tabs';

docs/10-quick-start-project.md …etting Started/04-quick-start-project.mddocs/10-quick-start-project.md renamed to docs/01-Getting Started/04-quick-start-project.md docs/10-quick-start-project.md renamed to docs/01-Getting Started/04-quick-start-project.md

@@ -1,5 +1,6 @@
 ---
 title: Quick Start Project
+slug: "/quick-start-project"
 ---
 
 import React from 'react';
@@ -11,12 +12,12 @@ This section provides an overview of how to create and manage projects using the
 ## Start Project Dialog
 When you open the Phoenix Code desktop app or browser app, you are greeted with the `Start Project Dialog` box. This serves as a quick access hub, allowing you to create new projects, resume recent ones, import from GitHub and many more.
 
-![Start Project Dialog Image](images/quickStartProject/start-project-dialog.png "Start Project Dialog")
+![Start Project Dialog Image](../images/quickStartProject/start-project-dialog.png "Start Project Dialog")
 
 
 > You can reopen the Start Project Dialog box anytime by clicking here.
 
-![Reopen Start Project Dialog Image](images/quickStartProject/reopen-start-project-dialog.png "Reopen Start Project Dialog image by clicking on the folder icon")
+![Reopen Start Project Dialog Image](../images/quickStartProject/reopen-start-project-dialog.png "Reopen Start Project Dialog image by clicking on the folder icon")
 
 Additionally, if you prefer that the Start Project Dialog doesn't appear every time you open Phoenix Code, follow these steps:
 1. Click the `folder icon`  in the top left corner to open the Start Project Dialog, or alternatively you can restart Phoenix Code to have it appear automatically.
@@ -48,7 +49,7 @@ You can open a folder from your desktop in Phoenix Code by following these steps
 
 > The **Open Folder** feature is not supported in Firefox browser due to local folder access restrictions. Please use Chrome, Edge, or Opera for working with local folders.
 
-![Open Folder Image](images/quickStartProject/open-folder.png "Click on Open Folder to work with local folders")
+![Open Folder Image](../images/quickStartProject/open-folder.png "Click on Open Folder to work with local folders")
 
 
 
@@ -94,11 +95,11 @@ In the Start Project Dialog, the **`Recent Projects`** section displays a list o
 
 > To remove a project from the Recent Projects list, click the **cross** button next to the project name.
 
-![Recent Projects Image](images/quickStartProject/recent-projects.png "Recent Projects displays the list of projects you've recently worked on")
+![Recent Projects Image](../images/quickStartProject/recent-projects.png "Recent Projects displays the list of projects you've recently worked on")
 
 If no recent projects are available, a YouTube video explaining the Start Project dialog options will be displayed instead.
 
-![No Recent Projects Image](images/quickStartProject/start-project-dialog.png "If no Recent Projects are available, link to a youtube vide will be displayed")
+![No Recent Projects Image](../images/quickStartProject/start-project-dialog.png "If no Recent Projects are available, link to a youtube vide will be displayed")
 
 
 

docs/01-Getting Started/_category_.json

@@ -0,0 +1,5 @@
+{
+    "label": "Getting Started",
+    "collapsible": true,
+    "collapsed": true
+}

docs/05-design-mode.md docs/02-Live Preview/01-design-mode.mddocs/05-design-mode.md renamed to docs/02-Live Preview/01-design-mode.md

@@ -1,5 +1,6 @@
 ---
 title: Design Mode
+slug: "/design-mode"
 ---
 
 import React from 'react';
@@ -25,14 +26,14 @@ There are three ways to switch to Design Mode:
 - Click the **fullscreen** button *(expand icon)* in the Live Preview toolbar, right after the reload button.
 - Choose **File > Toggle Design Mode** from the menu bar.
 
-![Design Mode entry points](./images/designMode/design-mode-toggle.png "Design Mode entry points")
+![Design Mode entry points](../images/designMode/design-mode-toggle.png "Design Mode entry points")
 
 All three toggle the same mode. Use any of them again to switch back to the code editor.
 
 ## The Design Mode layout
 
 When Design Mode is on, the sidebar stays visible alongside the maximized Live Preview. The recommended setup is to keep **AI Chat** open in the sidebar so you can ask for changes and watch them appear in the preview as the AI works. If the Live Preview is not already open, Phoenix Code opens it for you.
 
-![Design Mode layout](./images/designMode/design-mode-layout.png "Design Mode layout")
+![Design Mode layout](../images/designMode/design-mode-layout.png "Design Mode layout")
 
 To hide the sidebar too, click the **toggle sidebar** button *(double left-arrow icon)* just below the Design Mode toggle in the Control Bar. Click it again to bring the sidebar back.

…ro Features/02-edit-mode-live-preview.md …/02-Live Preview/02-live-preview-edit.mddocs/12-Pro Features/02-edit-mode-live-preview.md renamed to docs/02-Live Preview/02-live-preview-edit.md docs/12-Pro Features/02-edit-mode-live-preview.md renamed to docs/02-Live Preview/02-live-preview-edit.md

@@ -1,6 +1,6 @@
 ---
 title: Live Preview Edit
-slug: live-preview-edit
+slug: "/Pro Features/live-preview-edit"
 ---
 
 import React from 'react';
@@ -22,15 +22,15 @@ import VideoPlayer from '@site/src/components/Video/player';
 To switch to Edit Mode, click the **pen icon** in the Live Preview toolbar. This enables full interactivity in the Live Preview.
 > When enabled, the **pen icon** is highlighted in orange color.
 
-![Live Preview Edit mode](./images/lp-mode.png "Live Preview edit mode")
+![Live Preview Edit mode](../images/pro/lp-mode.png "Live Preview edit mode")
 
 Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` setting in the preferences file. 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.
 
-![Control Box](./images/control-box.png "Control Box")
+![Control Box](../images/pro/control-box.png "Control Box")
 
 > The Control Box is shown only for editable elements. It is not shown for non-editable elements that are dynamically created by JavaScript.
 
@@ -42,23 +42,23 @@ The left side of the Control Box displays information about the selected element
 - **Dimensions**: The element’s size in pixels (width × height)
 - **CSS classes**: The element’s classes, shown with a `.` prefix. If the element has more than three classes, only the first three are shown, followed by a “+N more” indicator
 
-![Element Properties panel](./images/element-properties.png "Element Properties panel")
+![Element Properties panel](../images/pro/element-properties.png "Element Properties panel")
 
 Clicking on the info section opens the [Element Properties](#edit-element-properties) editor, where you can edit the element’s tag name, classes, and ID.
 
 ### Select Parent
 
 The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it selects the parent of the currently selected element.
 
-![Select Parent button](./images/select-parent.png "Select Parent button")
+![Select Parent button](../images/pro/select-parent.png "Select Parent button")
 
 > This button appears only when a valid parent exists. It is not shown when the parent is `body`, `html`, or a JavaScript-rendered element.
 
 ### Tools
 
 The right side of the Control Box displays a set of tools you can use to modify the selected element. The available tools depend on the element type. Some buttons are shown for all elements, while others appear only for specific element types.
 
-![Tools section](./images/tools.png "Tools section")
+![Tools section](../images/pro/tools.png "Tools section")
 
 - **Insert Element** *(plus icon)*: Opens a panel where you can insert a new HTML element before, after, or inside the selected element.  
   *This option is available for all elements.*  
@@ -90,7 +90,7 @@ The right side of the Control Box displays a set of tools you can use to modify
 
 The **Hover Box** is a small tooltip that appears when you hover over an element in Edit Mode. It shows an icon and a label that describe the element type (for example, “Image”, “Button”, “Container”, “Paragraph”).
 
-![Hover Box](./images/hover-box.png "Hover Box")
+![Hover Box](../images/pro/hover-box.png "Hover Box")
 
 The Hover Box helps you quickly identify elements as you move your cursor over the page, without needing to click on them.
 
@@ -102,7 +102,7 @@ By default, in Edit Mode, hovering over elements in the Live Preview highlights
 
 To toggle this setting, click the **chevron icon** next to the **pen icon** in the Live Preview toolbar and unselect **Inspect Element on Hover**. By default, this option remains checked.
 
-![Inspect Element on Hover](./images/inspect-element-hover.png "Inspect Element on Hover option")
+![Inspect Element on Hover](../images/pro/inspect-element-hover.png "Inspect Element on Hover option")
 
 Alternatively, you can change this setting by updating the `livePreviewInspectElement` preference in the preferences file. Set it to `"hover"` (default) or `"click"`.  
 See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
@@ -113,7 +113,7 @@ The **Element Properties** panel lets you edit an element's tag name, ID, classe
 
 To open the panel, click on the **info section** (the left side showing the tag name, ID, and dimensions) of the [Control Box](#control-box).
 
-![Element Properties panel](./images/element-properties.png "Element Properties panel")
+![Element Properties panel](../images/pro/element-properties.png "Element Properties panel")
 
 The panel has four sections:
 
@@ -130,7 +130,7 @@ The **Insert Element** panel lets you add new HTML elements to your page directl
 
 To open the panel, click the **Insert Element** button *(plus icon)* in the [Control Box](#control-box).
 
-![Insert Element panel](./images/insert-element.png "Insert Element panel")
+![Insert Element panel](../images/pro/insert-element.png "Insert Element panel")
 
 ### Choosing a Position
 
@@ -149,7 +149,7 @@ The panel shows a grid of commonly used HTML elements like Paragraph, Heading, L
 
 Use the **search bar** at the top to filter elements by name or tag. If no matching element exists, you can type any valid HTML tag name and click **Create <tag>** to insert a custom element.
 
-![Create custom element](./images/insert-element-custom.png "Create custom element")
+![Create custom element](../images/pro/insert-element-custom.png "Create custom element")
 
 After inserting an element, Phoenix Code automatically selects it in the Live Preview so you can continue editing it.
 
@@ -171,7 +171,7 @@ To insert a line break, press `Shift + Enter`.
 
 When you start editing text, a **Formatting Toolbar** appears near the element. It gives you quick access to common text formatting options.
 
-![Formatting Toolbar](./images/formatting-toolbar.png "Formatting Toolbar")
+![Formatting Toolbar](../images/pro/formatting-toolbar.png "Formatting Toolbar")
 
 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.
 
@@ -188,7 +188,7 @@ Click the **More** button *(three-dots icon)* on the right side of the toolbar t
 - **Superscript**: `<sup>` tag
 - **Code**: `<code>` tag
 
-![More formatting options](./images/formatting-more.png "More formatting options")
+![More formatting options](../images/pro/formatting-more.png "More formatting options")
 
 ## 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
-![More Options dropdown](./images/more-options-dropdown.png "More Options Dropdown")
+![More Options dropdown](../images/pro/more-options-dropdown.png "More Options Dropdown")
 
 Click the **More Options** button *(three-dots icon)* in the Control Box and select **Cut**, **Copy**, or **Paste** from the dropdown menu.
 

docs/12-Pro Features/06-device-preview.md docs/02-Live Preview/03-device-preview.mddocs/12-Pro Features/06-device-preview.md renamed to 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).
 
-![Device size dropdown showing phone, tablet, and desktop entries with their widths](./images/device-size-dropdown.png "The device size dropdown")
+![Device size dropdown showing phone, tablet, and desktop entries with their widths](../images/pro/device-size-dropdown.png "The device size dropdown")
 
 > 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`.
 
-![Width ruler with breakpoint bands and device label"](./images/width-ruler.png "Width ruler with breakpoint bands and device label")
+![Width ruler with breakpoint bands and device label"](../images/pro/width-ruler.png "Width ruler with breakpoint bands and device label")
 
 ### In Design Mode