# phcode-dev/phoenix **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/phcode-dev-phoenix).** 2,855 stars · 192 forks · JavaScript · agpl-3.0 ## Links - GitHub: https://github.com/phcode-dev/phoenix - Homepage: https://phcode.io - awesome-repositories: https://awesome-repositories.com/repository/phcode-dev-phoenix.md ## Topics `brackets` `code` `css` `editor` `html` `ide` `javascript` `phoenix` `preview` `web` ## Description Phoenix is a comprehensive web development suite that provides a browser-based code editor, an AI-powered coding assistant, and a live web previewer. It integrates a visual Markdown document editor and a web-based Git client, allowing users to write and manage HTML, CSS, and JavaScript across different devices and platforms. The environment features a visual UI design system that maps canvas manipulations directly to code and enables in-place CSS editing. It supports real-time change previews and responsive layout testing across multiple device breakpoints to verify rendering on phones, tablets, and desktops. The platform includes a broad set of developer utilities for data transformation, such as JSON formatting, Base64 encoding, and Unix timestamp conversion. It also provides content creation tools for document format conversion between Markdown and DOCX, as well as a plugin architecture with an extension marketplace for third-party themes and functionality. ## Tags ### Web Development - [Browser-Based Editors](https://awesome-repositories.com/f/web-development/browser-based-editors.md) — Offers a sophisticated web-based development environment for editing files across different devices and platforms. - [Visual-to-Code Compilers](https://awesome-repositories.com/f/web-development/visual-to-code-compilers.md) — Translates manipulations on a visual canvas directly into corresponding updates in the underlying HTML and CSS files. ### Artificial Intelligence & ML - [Context-Aware Code Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/context-aware-code-generators.md) — Analyzes source code and browser output to generate intelligent suggestions for improving application logic. ([source](https://phcode.io/pricing.html)) - [Environment Snapshots](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-context-optimization/environment-snapshots.md) — Captures visual and structural state of the editor to provide the AI assistant with current UI and code context. ### Content Management & Publishing - [Live Front-End Editing](https://awesome-repositories.com/f/content-management-publishing/authoring-editorial-interfaces/content-authoring-editing/live-front-end-editing.md) — Allows modifying text, images, and layout directly within a live preview to update underlying code instantly. ([source](https://phcode.io/pricing.html)) - [Markdown Authoring Environments](https://awesome-repositories.com/f/content-management-publishing/authoring-editorial-interfaces/content-authoring-editing/document-authoring-tools/markdown-authoring-environments.md) — Provides a visual editor for creating rich Markdown documents with support for tables, diagrams, and rendered views. ([source](https://phcode.io/pricing.html)) - [Visual Markdown Editors](https://awesome-repositories.com/f/content-management-publishing/markdown-to-document-converters/visual-markdown-editors.md) — Provides a visual writing tool for creating and converting Markdown documents with DOCX export support. ### Development Tools & Productivity - [AI Coding Assistants](https://awesome-repositories.com/f/development-tools-productivity/ai-coding-assistants.md) — Provides AI-powered automation to handle repetitive coding tasks and accelerate the development process. ([source](https://phcode.io/about.html)) - [Browser-Based Development Environments](https://awesome-repositories.com/f/development-tools-productivity/local-development-environments/browser-based-development-environments.md) — Launches a full development environment and toolchain directly within a web browser to eliminate local installation. ([source](https://phcode.io/downloads.html)) - [AI Assistant Integrations](https://awesome-repositories.com/f/development-tools-productivity/ai-assistant-integrations.md) — Integrates the editor environment with an AI assistant by providing snapshots of UI layouts and source code. ([source](https://phcode.io)) - [Cross-Platform Text Editors](https://awesome-repositories.com/f/development-tools-productivity/cross-platform-text-editors.md) — Provides a lightweight text editor accessible across mobile and desktop browsers and native operating systems. ([source](https://phcode.io/about.html)) - [Developer Utility Toolsets](https://awesome-repositories.com/f/development-tools-productivity/developer-utility-toolsets.md) — Includes a broad set of developer utilities for JSON formatting, Base64 encoding, and timestamp conversion. - [Web-Based Git Explorers](https://awesome-repositories.com/f/development-tools-productivity/file-explorers/git-repository-explorers/web-based-git-explorers.md) — Provides a visual web interface for managing version control, staging changes, and synchronizing Git repositories. - [Git Repository Integrators](https://awesome-repositories.com/f/development-tools-productivity/git-repository-integrators/git-repository-integrators.md) — Includes an integrated interface for staging, committing, and pushing changes to remote Git repositories. ([source](https://phcode.io/pricing.html)) - [Remote Connection Synchronizers](https://awesome-repositories.com/f/development-tools-productivity/remote-connection-synchronizers.md) — Ensures consistent connectivity and synchronization between the editor and remote storage providers. ([source](https://cdn.jsdelivr.net/gh/phcode-dev/phoenix@main/README.md)) - [Virtual File Systems](https://awesome-repositories.com/f/development-tools-productivity/virtual-file-systems.md) — Provides a simulated browser-based file system to manage project assets without direct local disk access. ### Software Engineering & Architecture - [Live Preview Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/background-thread-dispatchers/dom-synchronization/live-preview-synchronization.md) — Links the source code editor to a rendered view to apply changes instantly without manual page refreshes. - [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Implements an extensible architecture allowing third-party functionality and themes via a standardized marketplace. ### User Interface & Experience - [Web Project Previews](https://awesome-repositories.com/f/user-interface-experience/file-previewers/html-previews/web-project-previews.md) — Renders local HTML, CSS, and JavaScript projects in real-time as changes are made in the editor. - [Live Preview Renderers](https://awesome-repositories.com/f/user-interface-experience/live-preview-renderers.md) — Ships a real-time rendering engine that displays visual updates instantly across multiple responsive device breakpoints. - [Real-Time Component Previews](https://awesome-repositories.com/f/user-interface-experience/real-time-component-previews.md) — Provides a live rendering engine that displays visual results of HTML, CSS, and JavaScript edits as they are typed. ([source](https://phcode.io/pricing.html)) - [Visual Design Editors](https://awesome-repositories.com/f/user-interface-experience/ui-styling/visual-design-editors.md) — Provides a graphical interface for modifying CSS properties and site layouts in real-time. - [Visual Canvas Editors](https://awesome-repositories.com/f/user-interface-experience/visual-canvas-editors.md) — Provides a visual canvas for manipulating site elements to make design changes without manually editing stylesheets. ([source](https://phcode.io/brackets-text-editor.html)) - [Viewport Simulation](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/code-to-html-rendering/viewport-simulation.md) — Simulates content rendering across different screen dimensions to verify responsive layouts on phones, tablets, and desktops. - [Style Sheet Inline Editing](https://awesome-repositories.com/f/user-interface-experience/in-place-editing-inputs/style-sheet-inline-editing.md) — Enables modifying stylesheets through quick inline editors to maintain context without switching between files. ([source](https://phcode.io/brackets-text-editor.html)) - [Testing Tools](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints/testing-tools.md) — Enables switching between phone, tablet, and desktop views to verify site rendering across different screen breakpoints. ([source](https://phcode.io/brackets-text-editor.html)) ### Data & Databases - [Virtual File Systems](https://awesome-repositories.com/f/data-databases/virtual-file-systems.md) — Provides a simulated browser-based file system for browsing and editing files during testing and debugging. ([source](https://cdn.jsdelivr.net/gh/phcode-dev/phoenix@main/README.md)) ### DevOps & Infrastructure - [Storage Backend Integrations](https://awesome-repositories.com/f/devops-infrastructure/storage-backend-integrations.md) — Connects the editor to external storage providers to manage and synchronize files hosted outside the local environment.