Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions api/02-creating-themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Use the template to create your repository.
### Step 3:
Clone the repository you created in Step 2 to your local machine.

Go to [https://create.phcode.dev](https://create.phcode.dev). This is a development-focused version of phcode.dev which shows non minified JS/CSS files in the browser developer tools.
Go to [https://create.phcode.dev](https://create.phcode.dev). This is a development-focused version of the browser editor which shows non minified JS/CSS files in the browser developer tools.

Now, open the cloned folder in `create.phcode.dev`. Refer to [this guide](https://docs.phcode.dev/docs/quick-start-project#open-folder) to see how to open a folder in Phoenix Code.

Expand Down Expand Up @@ -77,6 +77,6 @@ This file contains all the UI elements as variables. You can modify the colors a

When you are done developing the theme, select `Debug > Unload Project As Extension` to unload the theme.

Once the theme is complete, you can publish it to [phcode.dev](https://phcode.dev) extension repository.
Once the theme is complete, you can publish it to the extension store in [web.phcode.dev](https://web.phcode.dev).

Refer to [this link](./publishing-extensions) to see how to publish the theme.
2 changes: 1 addition & 1 deletion api/03-creating-extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Follow the steps below to run and debug your extension:

* Clone your extension repository onto the machine.

* Go to [https://create.phcode.dev](https://create.phcode.dev). This is a development-focused version of phcode.dev which shows non minified JS/CSS files in the browser developer tools.
* Go to [https://create.phcode.dev](https://create.phcode.dev). This is a development-focused version of the browser editor which shows non minified JS/CSS files in the browser developer tools.

* Now, open the cloned folder in `create.phcode.dev`.
> Refer to [this guide](https://docs.phcode.dev/docs/quick-start-project#open-folder) to see how to open a folder in Phoenix Code.
Expand Down
2 changes: 1 addition & 1 deletion api/06-publishing-extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Follow these steps:

![Publish Failed Image](./images/publishing-extensions/publish-failed.png "Publish Failed")

6. Once published, your extension will appear in the Phoenix Code Extension Store at [https://phcode.dev](https://phcode.dev).
6. Once published, your extension will appear in the Phoenix Code Extension Store at [web.phcode.dev](https://web.phcode.dev).

![Extension Store Image](./images/publishing-extensions/extension-store.png "Phoenix Code Extension Store")

Expand Down
4 changes: 2 additions & 2 deletions docs/01-Getting Started/01-installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Phoenix Code is a text editor designed to make coding as intuitive and fun as pl

## Download

Visit the official website — [phcode.io](https://phcode.io) — and click the **Download** button to grab the installer for your operating system.
Visit the official website — [phcode.dev](https://phcode.dev) — and click the **Download** button to grab the installer for your operating system.

![Download Phoenix Code from the website](../images/Website/download.png)

Expand Down Expand Up @@ -55,7 +55,7 @@ Need to install by hand, check dependencies, or uninstall? See [Advanced Linux i

## Use it in the browser

Prefer not to install anything? Run the full editor right in your browser at [phcode.dev](https://phcode.dev) — perfect for Chromebooks, tablets, or just trying things out. Everything runs locally in the browser, with nothing to download.
Prefer not to install anything? Run the full editor right in your browser at [web.phcode.dev](https://web.phcode.dev) — perfect for Chromebooks, tablets, or just trying things out. Everything runs locally in the browser, with nothing to download.

---

Expand Down
6 changes: 3 additions & 3 deletions docs/01-Getting Started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Here's what sets Phoenix Code apart.

- **Live Preview** — Edit your HTML and CSS and watch the page update in real time. Phoenix Code goes a step further: edit the preview directly to change text, add and rearrange elements, or swap images, and your source code updates automatically.
- **AI assistant** — A built-in AI agent (powered by Claude Code) works alongside you. It reads and edits your files, runs terminal commands, and because it's wired into Live Preview, it can see your running page, take screenshots, and verify its own work. Plan, Edit, and Full Auto modes keep you in control, and every change it makes is reversible.
- **Runs everywhere** — Native desktop apps for macOS, Windows, and Linux from [phcode.io](https://phcode.io), or the full editor in your browser at [phcode.dev](https://phcode.dev) with nothing to install.
- **Runs everywhere** — Native desktop apps for macOS, Windows, and Linux from [phcode.dev](https://phcode.dev), or the full editor in your browser at [web.phcode.dev](https://web.phcode.dev) with nothing to install.
- **Built-in tools** — Git, Terminal, Emmet, Beautify, and code hints all ship in the editor, so you can start working right away.
- **Visual editing** — Color pickers, gradient editors, and draggable number scrubbing let you adjust CSS values directly and see the result immediately.
- **Extensions** — Add features, themes, and language support from the built-in Extension Manager, with a marketplace of community extensions and themes.
Expand All @@ -40,7 +40,7 @@ You can build complete websites for free. The core editor, [Live Preview](/docs/
- **[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).
See plans on the [pricing page](https://phcode.dev/pricing).

**Phoenix Pro is free for students and educators.** If you have a `.edu` or `.ac.*` email, or your school requests an educational volume license, you get the full Pro feature set at no cost. See [Phoenix Pro for Education](/docs/phoenix-pro-school).

Expand All @@ -59,4 +59,4 @@ Phoenix Code is for anyone building for the web, and especially:
- **Our flagship feature:** [Live Preview](/docs/Features/Live%20Preview)
- **Try the AI assistant:** [AI](/docs/Pro%20Features/ai-chat)

Want to skip installing? Open [phcode.dev](https://phcode.dev) and start coding in your browser. Prefer the desktop app? Download it from [phcode.io](https://phcode.io).
Want to skip installing? Open [web.phcode.dev](https://web.phcode.dev) and start coding in your browser. Prefer the desktop app? Download it from [phcode.dev](https://phcode.dev).
2 changes: 1 addition & 1 deletion docs/02-Live Preview/02-live-preview-edit.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';

:::info Pro Feature
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
[Upgrade to Phoenix Code Pro](https://phcode.dev/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, style elements, and much more.
Expand Down
2 changes: 1 addition & 1 deletion docs/02-Live Preview/03-styles-bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ 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.
[Upgrade to Phoenix Code Pro](https://phcode.dev/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.
Expand Down
2 changes: 1 addition & 1 deletion docs/02-Live Preview/04-device-preview.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';

:::info Pro Feature
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
[Upgrade to Phoenix Code Pro](https://phcode.dev/pricing) to access this feature.
:::

**Device Preview** lets you check how your page looks at different screen widths without leaving Phoenix Code. This is useful for testing responsive designs and debugging CSS media queries.
Expand Down
2 changes: 1 addition & 1 deletion docs/02-Live Preview/05-measurements.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ slug: "/Pro Features/measurements"
---

:::info Pro Feature
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
[Upgrade to Phoenix Code Pro](https://phcode.dev/pricing) to access this feature.
:::

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.
Expand Down
2 changes: 1 addition & 1 deletion docs/02-Live Preview/06-image-gallery.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';

:::info Pro Feature
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
[Upgrade to Phoenix Code Pro](https://phcode.dev/pricing) to access this feature.
:::

The **Image Gallery** is a panel that appears at the bottom of the Live Preview. It lets you browse images from online image providers or select images from your device.
Expand Down
2 changes: 1 addition & 1 deletion docs/02-Live Preview/07-markdown-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ The preview toolbar also has a **theme toggle** *(sun/moon icon)* to switch betw
## Editing Markdown (Pro)

:::info Pro Feature
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
[Upgrade to Phoenix Code Pro](https://phcode.dev/pricing) to access this feature.
:::

With **Phoenix Pro**, you can go beyond just viewing. Edit your Markdown directly in the Live Preview with a full rich text editor — format text, build tables, drop in images, add links, use slash commands to insert blocks, and much more. Every change syncs back to your source code instantly.
Expand Down
4 changes: 2 additions & 2 deletions docs/03-AI/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';

:::info Pro Feature
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
[Upgrade to Phoenix Code Pro](https://phcode.dev/pricing) to access this feature.
:::

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 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.
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.dev/pricing) for unlimited access.
:::

<VideoPlayer
Expand Down
21 changes: 21 additions & 0 deletions docs/05-Workspace/05-terminal.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,27 @@ Selecting a shell sets it as the default and opens a new terminal with it right

> Only shells installed on your system are shown. Any other compatible shell on your system (for example, PowerShell Core on Windows) also appears in the list.

## Switching Projects

When you switch projects, open terminals stay in their current folders.
Running commands keep going.

The banner gives you two choices:

- **Keep Terminals** hides the banner and keeps your sessions.
- **Restart All in This Project** restarts all tabs in the new project
folder. This stops running commands and clears the output.

![Terminal project banner](../images/terminal/project-switch-banner.png)

If a command is still running, Phoenix Code asks for confirmation before restarting.

To keep your sessions and open a terminal in the new project, click **+ Terminal** shown on the bottom of the right sidebar.

<VideoPlayer
src="https://docs-images.phcode.dev/videos/terminal/project-switching.mp4"
/>

## Keyboard Shortcuts

| Action | Shortcut |
Expand Down
6 changes: 3 additions & 3 deletions docs/09-Schools & Workplaces/02-ai-control.md
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ The Phoenix Code AI Control extension provides a visual interface to verify the

#### Browser Version Status Check

1. Open https://phcode.dev in your web browser
1. Open https://web.phcode.dev in your web browser
2. Install the extension (File → Extension Manager → "Phoenix Code AI Control")
- ![Image](https://github.com/user-attachments/assets/ff282d9d-19dc-4fa2-9d39-a81eb2c59a62)
3. Navigate to View → AI Control Status
Expand Down Expand Up @@ -322,7 +322,7 @@ Only administrative users can modify this configuration.

### Network Blocking (For Browser Version)

AI is currently available only in the Phoenix Code desktop apps. The browser version at https://phcode.dev has no AI features today. When AI comes to the browser version, it will be served through `ai.phcode.dev`.
AI is currently available only in the Phoenix Code desktop apps. The browser version at https://web.phcode.dev has no AI features today. When AI comes to the browser version, it will be served through `ai.phcode.dev`.

For schools using the browser version, block the domain now so AI stays off when it becomes available:

Expand Down Expand Up @@ -413,7 +413,7 @@ sudo ./setup_phoenix_ai_control_linux.sh --managedByEmail school.admin@example.e

**Q: How can I verify that the firewall is properly blocking AI access?**

In the browser app at https://phcode.dev, install the `Phoenix Code AI Control`extension. Use the `View → AI Control Status` option. It will report whether AI is accessible or blocked.
In the browser app at https://web.phcode.dev, install the `Phoenix Code AI Control`extension. Use the `View → AI Control Status` option. It will report whether AI is accessible or blocked.

**Q: Is there a way to monitor AI usage in my organization?**

Expand Down
Binary file added docs/images/terminal/project-switch-banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ const config = {

{ to: "/blog", label: "Blog", position: "left" },
{
href: "https://phcode.io/",
href: "https://phcode.dev/",
label: "Download",
position: "left"
},
Expand Down
Loading