diff --git a/blog/2026-01-23-vscode-live-preview-vs-live-server/index.md b/blog/2026-01-23-vscode-live-preview-vs-live-server/index.md new file mode 100644 index 00000000..d46b4653 --- /dev/null +++ b/blog/2026-01-23-vscode-live-preview-vs-live-server/index.md @@ -0,0 +1,138 @@ +--- +title: VS Code Live Preview vs Live Server vs Five Server (and when to switch) +description: Compare VS Code's Live Preview, Live Server, and Five Server extensions. See which fits your HTML/CSS workflow and when Phoenix Code's Highlight Mode offers a faster alternative. +authors: [charly] +tags: + - live-preview + - vscode + - live-server + - five-server + - html + - css +--- + +import VideoPlayer from '@site/src/components/Video/player'; + +You're editing HTML. Switch to browser. Refresh. Switch back. *Where were you?* Scroll... scroll... find your place... repeat. 50+ times a day—that's hours lost per week. + + + +After years of using Live Server, you've probably noticed something: the original creator is seeking maintainers. The forums are full of the same complaints. So what happens when you test all the alternatives? + +## Quick Decision Guide + +| Your situation | Try this | +|----------------|-------------| +| You just want save → reload | **Live Server** | +| You want instant updates while typing | **Five Server** | +| You want a built-in preview panel | **Live Preview (Microsoft)** | +| You want to click an element → jump to its code | **Phoenix Code** | +| You want to edit directly in the preview | **Phoenix Code Pro** | + +--- + +## The Three VS Code Options + +### Live Server + +The classic. 73M+ downloads. Save your file, browser reloads. + +⚠️ The original creator is [seeking maintainers](https://github.com/ritwickdey/vscode-live-server)—it works but development has slowed. + +[View on Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) + +### Five Server + +Modern fork of Live Server. Instant updates while typing, element highlighting, built-in PHP support. Actively maintained. + +Five Server covers everything Live Server does—plus typing-speed updates and active maintenance. + +[View on Marketplace](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) + +### Live Preview (Microsoft) + +Microsoft's official extension. Embeds a browser panel directly in VS Code—no external window. + +⚠️ Microsoft's own description says it's "still under development" and not for framework projects. + +[View on Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) + +--- + +## Comparison + +| Feature | Live Server | Five Server | Live Preview (MS) | +|---------|-------------|-------------|-------------------| +| Update speed | On save | While typing | On save | +| Maintained | ⚠️ Seeking maintainer | ✅ Yes | ✅ Yes | +| Preview location | External browser | External browser | In-editor panel | +| PHP support | Setup needed | Built-in | No | +| Element → code | No | Limited | No | + +--- + +## The Workflow Problem They Don't Solve + +All three extensions give you live reload. That's useful. But watch what happens next: + +1. You spot something wrong in the preview +2. You switch to your editor +3. You scroll... searching... wrong `div`... keep scrolling... +4. You find the element (maybe) +5. You make your edit +6. You save and check the preview +7. Repeat + +**The reload takes milliseconds. Finding the right line of code takes minutes.** + +> "Click something in the preview and the editor jumps to that HTML/CSS." + +That request appears constantly in developer forums. None of these extensions deliver it. + +--- + +## Phoenix Code: A Different Approach + +Phoenix Code has Live Preview built in—no extension needed. But the difference is how you work with it. + +![Mode selector](../../docs/08-Features/images/livePreview/lp-mode.png) + +### Edit Mode (Pro) + +Stop switching between preview and code. Click text to edit it. Swap images visually. Drag elements to rearrange. Your source updates automatically. + + + +[See all Edit Mode features →](/docs/Pro%20Features/live-preview-edit) + +### Highlight Mode (Free) + +Click any element in the preview → jump directly to its code. No more hunting through your source. + +![Click to navigate to code](../../docs/07-Pro%20Features/images/inspect-element-hover.png) + +One click, and your cursor is on the right line. + +--- + +## When to Switch (and When Not To) + +**Stay in VS Code if:** + +- Live reload is enough for your workflow +- You're in a framework project with its own dev tools +- You don't need element → code navigation + +**Consider Phoenix Code if:** + +- You want click-to-code navigation +- You build static sites, landing pages, or marketing content +- You're tired of scrolling through source to find elements + +--- + +## Learn More + +- [Download Phoenix Code](https://phcode.dev) +- [Live Preview Documentation](/docs/Features/Live%20Preview/live-preview) +- [Edit Mode (Pro)](/docs/Pro%20Features/live-preview-edit) diff --git a/blog/2026-03-04-phoenix-code-vs-brackets/index.md b/blog/2026-03-04-phoenix-code-vs-brackets/index.md new file mode 100644 index 00000000..bd14da0c --- /dev/null +++ b/blog/2026-03-04-phoenix-code-vs-brackets/index.md @@ -0,0 +1,148 @@ +--- +title: "Phoenix Code vs Brackets: What Changed and Why It Matters" +description: "Brackets hasn't been updated since 2021. Phoenix Code picked up where it left off — and went a lot further. Here's what's different and how to switch." +authors: [charly] +tags: + - brackets + - comparison + - migration + - code-editor + - live-preview + - open-source +--- + +Remember hitting Save and watching the browser just... update? No build step, no terminal incantation, no waiting. You'd nudge a `margin-left` by two pixels and *there it was*, already moved, already right. That was Brackets. And if you felt a little pang reading that sentence, this post is for you. + + + +Nobody expected to be reading a eulogy for an editor in 2026. But here it is. Brackets is dead, and that lands with the same tone as hearing your favourite dive bar finally closed. Not shocked. Still sad. + +The thing is, 85,000 people *still* open Brackets every month. Every month! Nobody's fixing bugs. Extensions are rotting. The community forums have that particular silence of a website that's technically online but spiritually gone. And yet people keep coming back. You don't do that for software you merely tolerate. You do that for software that understood you. + +--- + +## What Happened to Brackets + +Adobe released Brackets 1.0 back in 2014 — a web-native editor built on web standards, with live preview baked right in. Genuinely ahead of its time. + +For a few years, things were good. Designers loved it. Front-end devs loved it. Adobe... well, Adobe had other things going on. The commits slowed. The roadmap went quiet. Then in January 2022, Adobe officially [handed Brackets over](https://x.com/brackets/status/1480581149604782080) to the open source community. Corporate-speak for "we're done here." No more updates followed. The last meaningful release was already a year old by then. + +And that could've been the end. Probably should've been, statistically. Most orphaned projects just... fade. + +Here's a stat that tells you everything: 52% of Phoenix Code's website traffic comes from brackets.io redirects. Half the people finding Phoenix Code went looking for Brackets first — typed the old URL out of muscle memory or clicked a dusty bookmark. That redirect traffic drops 43% every year, though. Eventually there won't be anyone left to redirect. + +The writing's on the wall. Brackets had a good run. + +--- + +## What Phoenix Code Inherited + +Phoenix Code isn't some unrelated editor that slapped "Brackets successor" on its marketing page. It grew directly out of the Brackets community. Not "community" in the vague corporate sense — the actual people. The ones who'd been filing issues, writing extensions, hanging out in the IRC channel back when that was still a thing. + +Same DNA, same instincts, different name. Same book, new chapter. What carried over: + +**Live Preview DNA.** The thing that made Brackets special. Edit your HTML/CSS, see it update in real time. Phoenix Code kept this and cranked it way, way up — but more on that in a minute. + +**The lightweight feel.** No 2GB install. No fifteen "recommended extensions" before you can actually write code. Open a folder, start working. That philosophy hasn't changed. + +**Web-focused and opinionated.** HTML, CSS, JavaScript — that's the sweet spot. Phoenix Code doesn't try to be an IDE for everything. It knows what it's good at, and it stays there. + +**The community itself.** The people who cared enough to keep Brackets alive are the same ones building Phoenix Code now. That continuity matters — it means the people who understood your workflow are still the ones making decisions. + +--- + +## Feature Comparison + +So what do you actually get if you switch? Here's the side-by-side: + +| Feature | Brackets | Phoenix Code | +|---------|----------|-------------| +| Live Preview | Yes (basic) | Yes + edit directly in preview | +| Visual Editing | Limited | Full: color pickers, number dials, drag-and-drop | +| Git Integration | No (extension needed) | Built-in | +| Browser Version | No | Yes ([phcode.dev](https://phcode.dev)) | +| Chromebook Support | No | Yes | +| Extension Marketplace | Dying | Active + growing | +| Active Development | No (since 2021) | Yes (regular releases) | +| Open Source | Yes | Yes (AGPL-3.0) | +| Image Gallery | No | Built-in stock images | +| Price | Free | Free (Pro from $9/mo) | + +The free tier of Phoenix Code already does more than Brackets ever did. That's not a knock on Brackets — it's just what happens when a project gets five years of active development poured into it. + +--- + +## What Phoenix Code Added + +Phoenix Code didn't just keep Brackets on life support. Years of GitHub issues, forum threads, and feature requests finally got answered — the things Brackets users had been wishing for are showing up now. + +### Edit Directly in the Preview + +Remember wishing you could just *click* on something in the live preview and change it right there? That live preview was magic, but you always had to work backwards — see the thing you want to change, go *find it in the code*, edit, then check. Every single time. + +You can skip all that now. Click text in the preview, type your changes, and the source code updates automatically. Swap images by dragging new ones in. Rearrange elements visually. It's what live preview always wanted to be when it grew up. + +![Live Preview modes](../../docs/08-Features/images/livePreview/lp-mode.png) + +### Visual Editing Tools + +You spent hours in Brackets typing hex codes, squinting at the result, nudging one character, squinting again. Like tuning a guitar by ear — except with bad pitch. + +Color pickers that work inline. Number dials you can scrub to adjust values. Gradient editors. Not groundbreaking individually, but together they make CSS tweaking *way* faster than guessing hex codes and refreshing. + +![Color picker](../../docs/images/editingColors/colorPicker.png) + +### Built-in Git + +The Brackets Git extension ecosystem was... fragile. You'd find one that mostly worked, pray it kept getting updated, and then one day it didn't. Classic. + +Phoenix Code ships with Git integration out of the box — commit, push, pull, diff, all right there. No hunting, no compatibility roulette. It just works. That phrase gets overused. But it just works. + +![Git integration](../../docs/08-Features/images/git-images/git-commit.png) + +### Runs in Your Browser + +Go to [phcode.dev](https://phcode.dev). That's the whole editor. In your browser. No install, no admin privileges, no "sorry, Chromebooks aren't supported." School computer? Fine. Tablet in a coffee shop? Sure. Your friend's laptop where you definitely shouldn't be installing software? Also fine. + +Try doing that with Brackets. + +### Stock Image Gallery + +Niche one, sure. But if you've ever built a client website and done the alt-tab-to-Unsplash-search-something-download-rename-import shuffle fourteen times in an afternoon, you'll appreciate having a built-in library of stock photos you can drag straight into your project. + +![Image gallery](../../docs/07-Pro%20Features/images/image-gallery.png) + +### Measurement Tools + +Spacing. Alignment. "Is that 16 pixels or 18?" You'd have Brackets on one screen and a design tool on the other, squinting back and forth. Now you can inspect spacing, measure distances between elements, and check alignment — all inside the preview. If you used Brackets for design work, this'll feel like home, minus the extra tool cluttering your taskbar. + +![Measurements](../../docs/07-Pro%20Features/images/measurements.png) + +--- + +## How to Switch + +If you know Brackets, you basically already know Phoenix Code. + +**Your workflow stays the same.** Open a folder, edit files, live preview — identical flow. The keyboard shortcuts are familiar. The UI layout will feel like Tuesday. + +**Extensions.** Some Brackets extensions have Phoenix Code equivalents. Some work directly. The marketplace is smaller than what Brackets had at its peak, but it's actively growing — and more importantly, the extensions actually *work* because someone's maintaining them. + +**Project files.** Just open your existing project folder in Phoenix Code. No migration wizard. No config file conversion. No ceremony. It just works. + +**The learning curve?** Almost flat. You'll spend maybe ten minutes going "oh, that's where they put that" and then you're productive again. The new features — visual editing, Git, the browser version — are all additive. Nothing you relied on was taken away. Your muscle memory still counts. + +The hardest part of switching is the emotional one. Brackets was *your* editor. You had your setup, your extensions, your rhythm. That's real. Nothing will be exactly the same — but the things that made Brackets feel like yours are still there in the DNA. + +--- + +## Come Home + +Phoenix Code was built for Brackets people. By Brackets people. If you loved that editor, this was made for you. The community that kept Brackets alive is the same one that built something better when keeping it going wasn't enough anymore. + +Your old bookmarks redirect here for a reason. + +- [Try Phoenix Code](https://phcode.dev) +- [Live Preview Documentation](/docs/Features/Live%20Preview/live-preview) +- [Edit Mode (Pro)](/docs/Pro%20Features/live-preview-edit) +- [The Legacy of Brackets — Continued](/blog/Blog-Legacy) diff --git a/blog/2026-03-04-phoenix-code-vs-vscode/index.md b/blog/2026-03-04-phoenix-code-vs-vscode/index.md new file mode 100644 index 00000000..cc0c7614 --- /dev/null +++ b/blog/2026-03-04-phoenix-code-vs-vscode/index.md @@ -0,0 +1,97 @@ +--- +title: "Phoenix Code vs VS Code: Which Editor Fits Your Workflow?" +description: "VS Code dominates code editing. Phoenix Code takes a different path with live preview and visual editing. A comparison of both — and when each one makes sense." +authors: [charly] +tags: + - vs-code + - comparison + - code-editor + - live-preview + - visual-editing +--- + +You've been there. Forty minutes into a landing page, saving, switching to Chrome, scrolling back to the hero section, squinting at padding values. Which `div` is it? You save again. Check again. Still wrong. Seventeen extensions installed over two years — half of them mysteries — and you're *still* toggling between windows to see your own work. + +There's a different way. But first, some context. + + + +## The gap nobody talks about + +VS Code is extraordinary. 74% market share. 50,000+ extensions. A debugger that makes grown engineers weep with joy. If you write Python or Rust or Go for a living, close this tab. Seriously. You've already got the right tool. + +But something doesn't add up. The most sophisticated code editor ever built, and it *still* treats HTML like it's 1997. Write markup in one window. Check it in another. Adjust a padding value. Save. Switch. Scroll. Squint. Go back. Try `24px` instead of `20px`. Save. Switch. Scroll. Squint. + +That loop. Over and over. + +Code editors were designed for people who think in functions and data structures. And they handle that well. But if you're positioning a call-to-action button, you're not solving the same kind of problem as an engineer debugging a race condition. The tools shouldn't be identical. + +## What if you could just... click the thing? + +You've probably wondered: what if the preview wasn't read-only? + +Phoenix Code's live preview isn't the "save and reload" you're used to. You click text in the preview. You edit it there. The heading changes, the source file updates, and you never leave the page you're looking at. Drag a section above another one. Done. The HTML rearranges itself. + +![Live Preview mode selector](../../docs/08-Features/images/livePreview/lp-mode.png) + +"WYSIWYG editors tried this in 2005 and the code they generated was garbage." Fair concern. Phoenix Code doesn't generate code — it edits *your existing code*. Your markup stays yours. Clean. Exactly the way you wrote it. + +Even in the free version, there's Highlight Mode. Click any element in the preview, and it jumps you to that line in the source. Sounds small until you're staring at 400 lines of nested markup trying to find the right container. Then it feels like finding the light switch in a dark room. + +![Click to navigate to code](../../docs/07-Pro%20Features/images/inspect-element-hover.png) + +## The tiny tools that save weird amounts of time + +You might not expect it, but the color picker — it appears inline when you hover a hex value — turns out to be one of the *most-used* features. Not the live preview. Not the drag-and-drop. The color picker. + +![Color picker](../../docs/images/editingColors/colorPicker.png) + +Makes sense, actually. You change colors constantly. In VS Code you'd type a hex code, save, check the browser, decide it's too warm, go back, type another code, save, check again. With the picker you just... pick. You see the change live. Two seconds instead of thirty. + +Same idea with the number dials. Hover over a `margin` or `padding` value, drag the dial, watch it change in real time. No save-switch-scroll loop. No guessing whether `16px` or `18px` looks better — you can see both before you commit. + +![Tool box](../../docs/07-Pro%20Features/images/tool-box.png) + +The big productivity killers aren't the hard problems. They're the tiny ones, repeated two hundred times a day. + +## What you give up + +| Area | VS Code | Phoenix Code | +|------|---------|--------------| +| Extension ecosystem | 50,000+ for every language imaginable | Growing, web-focused | +| Debugging | World-class (breakpoints, call stacks, remote) | Basic | +| Language support | 100+ languages with full IntelliSense | HTML, CSS, JavaScript | +| Live visual editing | Not built-in | Built-in, editable preview | +| Browser version | Codespaces (paid) | [phcode.dev](https://phcode.dev) (free) | +| Price | Free | Free (Pro from $9/mo) | + +If your day involves stepping through Python breakpoints or managing a monorepo with fifteen microservices — Phoenix Code isn't built for that. VS Code's debugger alone has years of dedicated engineering behind it, and its extension ecosystem is unmatched in scope. + +Phoenix Code solves a different problem — one that VS Code doesn't focus on. + +## The browser thing + +Quick tangent, because this matters more than it might seem. Phoenix Code runs entirely in your browser at [phcode.dev](https://phcode.dev). No install. No setup. Open the URL, open a project, work. + +Chromebook? Works. Library computer where you can't install anything? Works. Your partner's laptop because yours died and the client needs changes by morning? ...yeah. It works. + +VS Code has vscode.dev, but it can't run extensions or a terminal. Codespaces can, but that's a paid service. Phoenix Code gives you the full editor — visual tools, live preview, everything — available to anyone with a browser. Because sometimes "you can't install software" is the whole problem. + +## Who actually uses this + +Sixty-nine percent of Phoenix Code's paying users are designers and agencies. Not developers. + +That number makes sense once you see the pattern. A designer in Lisbon builds Shopify themes and tried four editors before finding one where she could see changes without the save-reload dance. A small agency in Toronto uses the browser version because their junior designers rotate through shared workstations. A freelancer in Nairobi works from a cybercafé on a machine he doesn't own. + +None of them needed a better code editor. They needed a visual tool that *happened* to give them real code access. Free. Open source. No lock-in. + +That gap — visual, browser-based editing with real code access — is where Phoenix Code fits. Not everywhere. Just there. + +--- + +## Learn More + +- [Download Phoenix Code](https://phcode.dev) +- [Live Preview Documentation](/docs/Features/Live%20Preview/live-preview) +- [Edit Mode (Pro)](/docs/Pro%20Features/live-preview-edit) +- [All Features](/docs/Features/beautify-code)