diff --git a/app-links.js b/app-links.js index ccb8c59e..35015d45 100644 --- a/app-links.js +++ b/app-links.js @@ -159,5 +159,25 @@ export const appLinks = [ { from: '/app-links/themes', to: '/docs/customizing-editor#themes', + }, + { + from: '/app-links/styles-bar', + to: '/docs/Pro Features/styles-bar', + }, + { + from: '/app-links/code-intelligence', + to: '/docs/Features/Code Intelligence', + }, + { + from: '/app-links/ai-models', + to: '/docs/Pro Features/ai-chat#choosing-a-model', + }, + { + from: '/app-links/video-audio-preview', + to: '/docs/Features/video-audio-preview', + }, + { + from: '/app-links/doc-comments', + to: '/docs/Features/doc-comments', } ]; diff --git a/blog/2026-05-08-Release-5.1/index.md b/blog/2026-05-08-Release-5.1/index.md index f3f8d4e4..82d209a1 100644 --- a/blog/2026-05-08-Release-5.1/index.md +++ b/blog/2026-05-08-Release-5.1/index.md @@ -11,7 +11,7 @@ import VideoPlayer from '@site/src/components/Video/player'; Phoenix Code 5.1 is now available at [phcode.io](https://phcode.io). -This release brings AI into the editor with [Claude Code](#try-ideas-build-pages-and-fix-issues-with-ai), a new [Design Mode](#design-mode) for visual editing, a rich [Markdown editor](#rich-markdown-editor), a built-in [terminal](#built-in-terminal), responsive [device previews](#view-your-page-at-any-device-size), a [rebuilt Linux app](#linux), and a fresh new look with the [Phoenix Neo](#phoenix-neo-themes) themes. +This release brings AI into the editor with [Claude Code](#ai-with-visual-and-runtime-context), a new [Design Mode](#design-mode) for visual editing, a rich [Markdown editor](#rich-markdown-editor), a built-in [terminal](#built-in-terminal), responsive [device previews](#view-your-page-at-any-device-size), a [rebuilt Linux app](#linux), and a fresh new look with the [Phoenix Neo](#phoenix-neo-themes) themes. ## AI with visual and runtime context diff --git a/blog/2026-08-05-Release-5.2/branch-dropdown.png b/blog/2026-08-05-Release-5.2/branch-dropdown.png new file mode 100644 index 00000000..604fb5e4 Binary files /dev/null and b/blog/2026-08-05-Release-5.2/branch-dropdown.png differ diff --git a/blog/2026-08-05-Release-5.2/index.md b/blog/2026-08-05-Release-5.2/index.md new file mode 100644 index 00000000..d046a10d --- /dev/null +++ b/blog/2026-08-05-Release-5.2/index.md @@ -0,0 +1,109 @@ +--- +slug: release-5.2 +title: "Phoenix Code 5.2: Styles Bar, Code Intelligence & More" +description: "Phoenix Code 5.2 introduces the Styles Bar for visual styling in Live Preview, IDE-grade code intelligence for JavaScript, TypeScript, JSON, Python, and PHP, AI model selection, an improved Git panel, and video and audio preview." +authors: [arun, charly, devvaannsh, electrofist, ansu, phoenixBot] +tags: [Styles Bar, Code Intelligence, Live Preview Edit, AI, Claude Code, Git, Phoenix Pro, Windows, Linux, Mac, Release] +--- + +import React from 'react'; +import VideoPlayer from '@site/src/components/Video/player'; + +Phoenix Code 5.2 is now available at [phcode.io](https://phcode.io). + +This release brings the [Styles Bar](#style-your-page-visually-with-the-styles-bar) for styling your page visually, [Code Intelligence](#code-intelligence-for-javascript-typescript-json-python-and-php) for JavaScript, TypeScript, JSON, Python, and PHP, a [Starter Bar](#start-from-a-blank-page) for blank pages, [Doc Comment Generation](#generate-doc-comments), [AI Model Selection](#choose-your-ai-model), an [Improved Git Panel](#git-improvements), and [Video and Audio Preview](#video-and-audio-preview) right in the editor. + +## Style your page visually with the Styles Bar + +Select an element in Live Preview and the new Styles Bar appears with controls for fonts, colors, backgrounds, borders, spacing, and layout. Every change syncs to your code in real time. + +Pick where your edits are saved - inline on the element, in an existing CSS rule, or in a new rule the bar creates for you. You can also style `hover`, `focus`, and other element states, and the Live Preview turns the state on while you edit. + +The font picker covers system fonts and the full Google Fonts collection, with each font previewed in its own style. [Read More...](https://docs.phcode.dev/app-links/styles-bar) + + + +## Start from a blank page + +Edit Mode needs an element to work on, and a blank page has none. Now a Starter Bar appears on empty pages so you can add your first element right from the preview, and Phoenix Code creates the page structure for you. [Read More...](https://docs.phcode.dev/app-links/live-preview-edit) + + + +## Code Intelligence for JavaScript, TypeScript, JSON, Python, and PHP + +Phoenix Code now ships IDE-grade code intelligence: context-aware completions with documentation beside them, parameter hints, hover info, jump to definition, find usages, and live error checking with quick fixes. + +- **JavaScript & TypeScript** - full project intelligence with auto imports and automatically managed configuration. +- **JSON** - schema-based completion and validation for well-known config files. In `package.json`, get npm package name and version suggestions as you type, and dependencies with known vulnerabilities are flagged. +- **Python** - type-aware intelligence via Pyrefly, with Ruff powering code formatting. +- **PHP** - full intelligence via Intelephense, installed on demand when you open a PHP file. + +Language servers set themselves up automatically in the background and run locally on your machine, so your code is not sent anywhere. [Read More...](https://docs.phcode.dev/app-links/code-intelligence) + + + +> Code intelligence powered by language servers is available only in desktop apps. + +## Generate Doc Comments + +Type `/**` on the line above a function or class and accept the hint that appears. Phoenix Code reads the signature and generates a documentation comment with every parameter filled in, in each language's own convention: JSDoc for JavaScript and TypeScript, PHPDoc for PHP, docstrings for Python, and more. [Read More...](https://docs.phcode.dev/app-links/doc-comments) + + + +## Choose your AI model + +Pick which Claude model powers your AI chat, right from the chat header, and switch models even in the middle of a conversation. Each model shows a short description so you can pick the right one for the task. + +Prefer an editor without AI? It can now be switched off completely from `View > Enable AI` or the AI settings dialog. [Read More...](https://docs.phcode.dev/app-links/ai-models) + +![AI model selection](https://docs-images.phcode.dev/in-app/pro-aiModels.png) + +## Git improvements + +Your current branch is now shown in the sidebar and on the Git panel toolbar. Click either one to switch branches or create a new one. + +The panel's menu also gets a new `Open All Changed Files` action that opens every modified file at once. [Read More...](https://docs.phcode.dev/app-links/git) + +![Git branch dropdown](./branch-dropdown.png) + +## Video and Audio Preview + +Click a video or audio file in your project to play it right inside the editor, with the file's dimensions, duration, and size shown alongside. [Read More...](https://docs.phcode.dev/app-links/video-audio-preview) + +![Video preview](https://docs-images.phcode.dev/in-app/videoAudioPreview.jpg) + +## Notable changes and fixes + +- Pasting from Excel and other spreadsheets now inserts text instead of an image. ([#3033](https://github.com/phcode-dev/phoenix/pull/3033)) +- Editing an element's attributes in source code now updates the Control Box immediately. ([#3020](https://github.com/phcode-dev/phoenix/pull/3020)) +- Element selection in Live Preview no longer lands on the wrong element after property edits. ([#3055](https://github.com/phcode-dev/phoenix/pull/3055)) +- Media and image previews now show the file's real path instead of an internal path. ([#3032](https://github.com/phcode-dev/phoenix/pull/3032)) +- The Markdown editor's slash menu now opens at the cursor instead of the right edge. ([#2940](https://github.com/phcode-dev/phoenix/pull/2940)) +- The Markdown editor no longer indents image-only links on save. ([#2937](https://github.com/phcode-dev/phoenix/pull/2937)) +- Live Preview toolbar buttons are no longer hidden by long file names. ([#2942](https://github.com/phcode-dev/phoenix/pull/2942)) +- Quick access panel buttons no longer overflow when the bottom panel is small. ([#2945](https://github.com/phcode-dev/phoenix/pull/2945)) +- Opening the terminal now exits Design Mode correctly. ([#2915](https://github.com/phcode-dev/phoenix/pull/2915)) +- Fixed the Git toolbar icon causing exceptions at startup. ([#2904](https://github.com/phcode-dev/phoenix/pull/2904)) +- An expired Claude Code login is now detected, with a prompt to log in again from the chat panel. ([#3065](https://github.com/phcode-dev/phoenix/pull/3065)) +- The Claude CLI is now detected when installed via Homebrew or Linuxbrew. ([#2897](https://github.com/phcode-dev/phoenix/pull/2897)) +- The guided tour now appears for users who updated from older versions. ([#2892](https://github.com/phcode-dev/phoenix/pull/2892)) + +## Performance & Stability + +- Fixed sidebar resize issues and removed unused title bar space in desktop apps. ([#3021](https://github.com/phcode-dev/phoenix/pull/3021)) +- Working set selection bugs fixed and rendering performance improved. ([#3039](https://github.com/phcode-dev/phoenix/pull/3039)) +- Screenshots are sharper on high-DPI displays and no longer fail from rounding errors. ([#2947](https://github.com/phcode-dev/phoenix/pull/2947), [#2953](https://github.com/phcode-dev/phoenix/pull/2953)) + +## Platform Notes + +### Linux + +- Fixed auto-update failing to detect the installed AppImage path. ([#2926](https://github.com/phcode-dev/phoenix/pull/2926), [#2927](https://github.com/phcode-dev/phoenix/pull/2927))