# Phoenix Code documentation > Official user guides and tutorials for Phoenix Code, a code editor for building websites, with Live Preview and visual editing features. The tutorials distinguish the free Community edition from Phoenix Pro. Pro offers visual editing; Community guides explain how to locate and edit the HTML. Check the edition and platform requirements on each page. Links below open the complete documentation pages, including screenshots, videos, code examples, and both edition tabs. This index is regenerated from the current public documentation on every site build. ## Tutorials - [Tutorials](https://docs.phcode.dev/docs/tutorials): Follow a small project from your first photo and page link to a website you can share. Includes Community and Phoenix Pro instructions. - [Add an image in Phoenix Code](https://docs.phcode.dev/docs/tutorials/add-images): Add a photo in Phoenix Code using Pro's Image Gallery or free Community Highlight Mode. Follow screenshots, videos, and a downloadable practice website. - [Link to another page](https://docs.phcode.dev/docs/tutorials/link-pages): Make a Contact me link open another page of your website. Follow the Community or Phoenix Pro steps using a small practice project. - [Share your website](https://docs.phcode.dev/docs/tutorials/share-website): Send someone a link to your website or a ZIP of its files. Step-by-step instructions for Community and Phoenix Pro. - [Build a page with Bootstrap](https://docs.phcode.dev/docs/tutorials/bootstrap): Open a Bootstrap starter page, make its button green, and test its layout. A guided exercise for Community and Phoenix Pro users. - [Run your first Python program](https://docs.phcode.dev/docs/tutorials/run-python): Install Python 3, create hello.py, and run your first program in Phoenix Code's desktop terminal. Includes Windows, macOS, and Linux steps. ## Getting Started - [What is Phoenix Code?](https://docs.phcode.dev/docs/what-is-phoenix-code): Phoenix Code is a lightweight editor built for the web. See your HTML and CSS changes instantly in Live Preview, or edit the page visually and let Phoenix update your code. - [Installation Guide](https://docs.phcode.dev/docs/intro): Phoenix Code is a text editor designed to make coding as intuitive and fun as playing a video game — specially crafted for web developers, designers, and students. This guide walks you through downloading and installing Phoenix Code on… - [Quick Start Project](https://docs.phcode.dev/docs/quick-start-project): This section provides an overview of how to create and manage projects using the Start Project Dialog in Phoenix Code. ## Live Preview - [Live Preview](https://docs.phcode.dev/docs/Features/Live%20Preview): The Live Preview feature in Phoenix Code provides instant feedback on changes made to HTML and CSS files, letting you see your edits in real-time. - [Design Mode](https://docs.phcode.dev/docs/design-mode): Design Mode is a layout that hides the code editor and gives that entire space to your Live Preview. It is built for visual-first work: chatting with the AI while you watch changes land in the preview, editing your page directly in Live… - [Live Preview Edit](https://docs.phcode.dev/docs/Pro%20Features/live-preview-edit): Upgrade to Phoenix Code Pro to access this feature. - [Styles Bar](https://docs.phcode.dev/docs/Pro%20Features/styles-bar): Upgrade to Phoenix Code Pro to access this feature. - [Layers Panel](https://docs.phcode.dev/docs/Pro%20Features/layers-panel): Upgrade to Phoenix Code Pro to access this feature. - [Device Preview](https://docs.phcode.dev/docs/Pro%20Features/device-preview): Upgrade to Phoenix Code Pro to access this feature. - [Measurements](https://docs.phcode.dev/docs/Pro%20Features/measurements): Upgrade to Phoenix Code Pro to access this feature. - [Image Gallery](https://docs.phcode.dev/docs/Pro%20Features/image-gallery): Upgrade to Phoenix Code Pro to access this feature. - [Markdown Editor](https://docs.phcode.dev/docs/Pro%20Features/markdown-editor): 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.… - [PHP Live Preview Setup](https://docs.phcode.dev/docs/Features/Live%20Preview/php-live-preview): This page covers running PHP pages in the Live Preview. For PHP editing features like completions and error checking, see PHP Code Intelligence. - [Custom Live Preview Server](https://docs.phcode.dev/docs/Features/Live%20Preview/live-preview-settings): Phoenix Code now allows you to integrate your custom development server directly into the editor, enabling a Live Preview of your project as it would appear when served by your server. This is especially useful for dynamic projects that… ## AI - [AI](https://docs.phcode.dev/docs/Pro%20Features/ai-chat): Free accounts get a limited number of Visual AI chats each day and month. Phoenix Code Pro removes the limits and adds the Claude Code CLI and Codex CLI inside the panel. See Free Account Limits. - [Setup](https://docs.phcode.dev/docs/Pro%20Features/ai-setup): AI in Phoenix Code is powered by Claude Code, the coding agent from Anthropic. Claude Code ships inside the desktop app, so there is nothing to install. To start chatting you need two things: - [Chatting](https://docs.phcode.dev/docs/Pro%20Features/ai-chatting): The Start Screen - [Permission Modes](https://docs.phcode.dev/docs/Pro%20Features/ai-permissions): The permission mode decides how much the AI can do without asking you. The current mode is shown at the bottom left of the panel. Click it to pick another one, or press Shift + Tab in the message box to cycle through them. - [Reviewing and Undoing Changes](https://docs.phcode.dev/docs/Pro%20Features/ai-review): Reviewing Diffs - [Live Preview and Editor](https://docs.phcode.dev/docs/Pro%20Features/ai-ask): Ask AI lets you ask about the thing you are looking at: an element in the Live Preview, a passage in a Markdown page, or a selection in the code. Your question goes to the AI panel with a screenshot or the exact source location… - [Claude Code CLI and Codex CLI](https://docs.phcode.dev/docs/Pro%20Features/ai-cli): Upgrade to Phoenix Code Pro to access this feature. - [Image Search](https://docs.phcode.dev/docs/Pro%20Features/ai-images): Ask the AI for pictures and it searches Unsplash for you. The results appear in the chat, and the AI can put the photo you want on the page, either linked from Unsplash or downloaded into your project. - [Usage and Cost](https://docs.phcode.dev/docs/Pro%20Features/ai-usage): Phoenix Code keeps track of the tokens the AI uses and what they would cost at API list prices. Nothing here is billed by Phoenix Code. With a Claude subscription the cost is included in your plan, and with an API key your provider… - [Models and Providers](https://docs.phcode.dev/docs/Pro%20Features/ai-models): Choosing a Model - [Turning AI Off](https://docs.phcode.dev/docs/Pro%20Features/ai-disable): If you don't want AI in your editor, you can switch it off completely. Go to View \> Enable AI and unselect it. Phoenix Code asks you to confirm with the Disable AI and Restart button, then restarts right away to apply the change. You… ## Editing & Code - [Editing Text](https://docs.phcode.dev/docs/editing-text): This section provides an overview of the core text and code editing features in Phoenix Code. - [Editing Colors](https://docs.phcode.dev/docs/editing-colors): This section provides an overview of the core color editing features in Phoenix Code. - [Quick Edit](https://docs.phcode.dev/docs/Features/quick-edit): The Quick Edit feature in Phoenix Code allows you to edit CSS files directly within HTML files. This integration helps you focus on one file at a time, reducing distractions. Using Quick Edit with the Live Preview function provides… - [Syntax Highlighting](https://docs.phcode.dev/docs/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. - [Emmet](https://docs.phcode.dev/docs/Features/emmet): Emmet helps you quickly expand shorthand abbreviations into full code blocks. When you type an Emmet-compatible abbreviation, Phoenix Code displays a code hint with the abbreviation text and a small Emmet icon on the right, indicating… - [Custom Snippets](https://docs.phcode.dev/docs/Features/custom-snippets): 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… - [Doc Comments](https://docs.phcode.dev/docs/Features/doc-comments): Phoenix Code can write documentation comments for your functions and classes. Type / on the line above a function and accept the hint that appears. Phoenix Code reads the function's signature and generates a comment with all its… - [Beautify Code](https://docs.phcode.dev/docs/Features/beautify-code): The Beautify Code feature ensures your code is consistently formatted, improving readability and maintainability. It automatically aligns your code with your preferred style, taking into account indentation, spacing, and other… ## Workspace - [File Management](https://docs.phcode.dev/docs/file-management): This section covers how Phoenix Code lets you manage, organize, and navigate files and folders within your projects. - [Find In Files](https://docs.phcode.dev/docs/Features/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… - [Customizing the Editor](https://docs.phcode.dev/docs/customizing-editor): This section provides an overview of the editor appearance and display settings in Phoenix Code. - [Keyboard Shortcuts](https://docs.phcode.dev/docs/Features/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! - [Terminal](https://docs.phcode.dev/docs/Features/terminal): Phoenix Code has a built-in terminal so you can run commands without leaving the editor. - [Git](https://docs.phcode.dev/docs/Features/git): Getting Started with Git in Phoenix Code - [Video & Audio Preview](https://docs.phcode.dev/docs/Features/video-audio-preview): Phoenix Code plays video and audio files right in the editor. Click a media file in the file tree and it opens with playback controls, no setup needed. ## Code Quality - [HTML Validator](https://docs.phcode.dev/docs/Features/Problems%20Panel/html-lint): HTML Validator helps you find errors when you open or edit an HTML file. E.g. - [ESLint for Javascript Problems](https://docs.phcode.dev/docs/Features/Problems%20Panel/ESLint): Phoenix Code provides a comprehensive interface for identifying and resolving ## Code Intelligence - [Code Intelligence](https://docs.phcode.dev/docs/Features/Code%20Intelligence): Phoenix Code helps you write code faster with code hints, parameter hints, documentation popups, jump to definition, and live error checking. Most of it works out of the box with no setup. - [JavaScript & TypeScript](https://docs.phcode.dev/docs/Features/js-ts-code-intelligence): Phoenix Code ships full code intelligence for JavaScript, TypeScript, JSX, and TSX, powered by the TypeScript language server. It understands your whole project, so completions, navigation, and error checking work across files. It is on… - [PHP](https://docs.phcode.dev/docs/Features/php-code-intelligence): Phoenix Code supports full code intelligence for PHP: completions with documentation, parameter hints, hover info, Go to Definition, Find Usages, and error checking in the Problems panel. - [JSON](https://docs.phcode.dev/docs/Features/json-code-intelligence): Phoenix Code has code intelligence for JSON files, with extra features for package.json. Hints, hover info, and error checking work as described in Code Intelligence. - [Python](https://docs.phcode.dev/docs/Features/python-code-intelligence): Phoenix Code supports full code intelligence for Python: completions with documentation, parameter hints, hover info, Go to Definition, Find Usages, and type error checking with quick fixes in the Problems panel. ## Extensions & Themes - [Extensions](https://docs.phcode.dev/docs/extensions): Phoenix Code supports extensions for adding features, themes, and language support. Everything is managed through the built-in Extension Manager. - [Popular Extensions](https://docs.phcode.dev/docs/popular-extensions): A curated list of community extensions worth checking out. Install any of them from the Extension Manager. ## Schools & Workplaces - [Phoenix Pro for Education (Free)](https://docs.phcode.dev/docs/phoenix-pro-school): A large portion of the Phoenix Code community comes from schools and universities, where students and teachers value ease of use and a low learning curve. Education has always been central to our mission, and we want every student to… - [AI Control For School And Work](https://docs.phcode.dev/docs/control-ai): 🔐 Disable or manage AI features in Phoenix Code for educational and enterprise environments. - [Managing App Updates](https://docs.phcode.dev/docs/managed-updates): 🔄 Point the Phoenix Code desktop app at your own update server. ## Optional - [Extension developer documentation](https://docs.phcode.dev/api/llms.txt): A separate index of extension and theme development guides, UI recipes, and API reference pages.