Display Modes
Bar, frame, ribbon & label
Patterns & Effects
Solid, stripes & neon glow
Visual Customization
Colors, opacity & emoji
Tab Title Prefix
DEV - My App in tab bar
Icon Badge
Tab count or env label
Themes
Light, dark & auto modes
Projects
Group & manage environments
Environment Types
6 defaults + custom types
URL Matching
Exact, wildcard & regex
Import & Export
Backup & restore as JSON
Onboarding
5-step guided intro tour
Quick Switching
Command palette for envs
Keyboard Shortcuts
⌘+Shift+S and more
Inline Env Switching
Hover arrows on label
Quick On/Off Toggle
Power button in header
Live Preview
Real-time setting changes
Shopify Integration
11 features for Shopify devs
Push Content Mode
Shift page instead of overlay
Side Panel
Dock EnvHub in Chrome sidebar
Platform Support
Chrome, Edge, Brave & more
Internationalization
English, Spanish & more
Privacy & Permissions
Per-site or full access
Accessibility
ARIA, focus traps & more
Jump between environments instantly with ⌘+Shift+S — a command palette built for developers.
11 features: Mode Switcher, Admin Badge, Context Menus, Smart URLs & more.
Full dark mode with auto-detection. Matches your system preference or set manually.
No credit card required
All 23 features included — no tiers, no limits
Is there a catch?
No. EnvHub is and will always be free.
Will you ever charge?
No plans to add paid tiers.
How do you make money?
This is a passion project, not a business.
Is my data safe?
Everything stays in your browser. Zero tracking.
Environment Marker
40,000+ users
MV2 · limited display modes
Env Marker XjSv
3,000+ users
Basic ribbon only
Environment Indicator
Simple color bar
Modern Architecture
Built on Manifest V3 for performance & security
Made By Developers
Designed for real multi-environment workflows
Privacy First
Zero tracking, zero analytics, zero server calls
Getting Started
Install & create your first project
Create & manage project groups
Environments
Configure URLs, colors & types
Exact, wildcard & regex patterns
Customization
Colors, patterns & effects
Backup & restore configurations
Theme editor environment support
Quick actions & navigation
Preferences
Global settings & defaults
Install EnvHub and configure your first project in minutes.
General
4 questions
Installation
Features
5 questions
Privacy
Troubleshooting
A complete visual guide to everything EnvHub can do — with interactive UI examples for every feature.
Choose the display style that fits your workflow. Each mode is fully configurable with custom colors, patterns, sizes, and positioning.
A bold, full-width colored bar that stretches across an entire edge of the page. Impossible to miss — you'll always know exactly which environment you're working in.
Top, bottom, left, or right edge of the page
Thin (10px), Normal (20px), or Thick (30px)
Solid, animated stripes, or neon glow effects
Centered text label showing the environment name
Bar Mode — Top position with striped pattern
Frame Mode — Full-page border with corner label
A colored border that wraps the entire viewport. Always visible no matter how far you scroll — the frame stays fixed around the page, making it impossible to forget which environment you're on.
Frame stays fixed regardless of scrolling
Thin, normal, or thick border sizes
Small label badge in the corner identifies the environment
Add a glowing halo effect to the border
A classic diagonal ribbon tucked into the corner of the page. Provides minimal visual intrusion while being instantly recognizable — the developer's go-to for a clean aesthetic.
Top-left, top-right, bottom-left, or bottom-right
Doesn't cover content or push the layout
Adjust from 20% to 100% transparency
Ribbon Mode — Top-right corner position
Label Mode — Floating badge with emoji support
A small, floating badge that stays in the corner of the page. The most subtle option — perfect for when you want a gentle reminder without any visual clutter. Supports emojis for extra personality.
Add emojis to your labels for extra clarity
Click the label to open environment switching
Use ← → arrow keys to cycle through environments
Floating position doesn't affect page layout
Bar
Most visible
Frame
Always visible
Ribbon
Minimal intrusion
Label
Most subtle
Tell EnvHub which URLs belong to each environment. From simple domain matching to full regular expressions — it handles them all.
Group all your environments under a single project. Each environment has its own URL pattern, color, and type — so EnvHub knows exactly which indicator to show.
Match by full domain with automatic normalization. EnvHub strips protocols and trailing slashes so you don't have to.
staging.myapp.com
Case-insensitive substring match. Great for catching URLs that share a common keyword.
staging
Use asterisks to match dynamic subdomains or any part of a URL.
*.staging.example.com
Full regex support for complex matching. Toggle per-environment with the .* button.
^https://.*\.mysaas\.com
Automatic subdomain matching built in. EnvHub detects subdomains and matches them intelligently.
dev.myapp.com → matches "dev" subdomain
Every environment type has its own colors for the frame, background, and label — plus preset swatches, recent colors, and a custom hex input.
Edit environment — separate colors for background, stripe, and label
Each environment type has its own set of colors. Customize the bar/frame background, secondary stripe color, label background, and label text — all independently. Click any color circle to open the picker.
Color picker with Solid, Gradient & Stripes tabs — 12+ presets, recent colors, and custom hex input
The Display & Layout settings panel gives you full control over how the indicator looks and behaves. All changes are reflected instantly in the live preview at the bottom.
Slider with three stops: Thin (10px), Normal (20px), and Thick (30px). Adjust how prominent the indicator is.
Smooth slider from 20% to 100%. Make indicators subtle or bold depending on your preference.
Three-way segmented control: Small (10px), Normal (12px), or Large (14px) for the environment label text.
Dropdown to choose position: Top, Bottom, Left, Right for bars — or Top Left, Top Right, Bottom Left, Bottom Right for ribbons and labels.
Choose how the indicator is displayed
Display & Layout — mode, size, opacity, pattern, position, font size
Go beyond solid colors with gradient fills, animated stripe patterns, and neon glow effects. The Solid pattern is free — Gradient, Stripes, and Glow are Pro features.
Clean flat color fill. The default look — simple and clear.
12 built-in gradient presets with optional animation for smooth color flow.
Animated diagonal stripes using primary + secondary colors. Eye-catching and impossible to miss.
Glowing halo effect around the bar or frame. Perfect for production warnings.
The stripe pattern uses both your primary and secondary environment colors to create the diagonal pattern. You can control the stripe width and animation speed.
Thin (10px), Normal (20px), or Wide (30px)
None, Slow (2s), Normal (1s), or Fast (0.5s)
Uses Primary + Secondary colours from the environment settings
Clean diagonal stripes at a consistent angle
Striped bar — green/white dual-color with floating label badge
Instantly see which environment a tab belongs to — even when the page isn't visible. The environment name is prepended to every browser tab title.
Three tabs showing LOCAL, STAGING, and PROD prefixes — instantly identifiable
When you have the same site open in multiple environments, tab titles all look the same. EnvHub prepends the environment name so you can quickly identify — and switch to — the right one. Works with any page.
Add environment name to browser tab title (e.g., DEV - My App)
The prefix is injected directly into the page's <title> tag
<title>
EnvHub matches the current URL to your configured environment
The environment name is prepended to the existing page title
Scan your tabs at a glance — no need to click each one
The EnvHub toolbar icon shows a live badge — choose between a tab count of matched environments or the current environment label.
Clean icon, no badge
Number of matched tabs
Shows current env name
EnvHub icon in the Chrome toolbar with a live "3" badge
Without even opening EnvHub, the toolbar badge tells you how many tabs are currently matched to environments — or shows the active environment name. Choose the mode that fits your workflow.
Shows total number of open tabs that match any environment rule
Shows abbreviated environment name (e.g. DEV, STG, PROD) for the active tab
Clean icon with no badge — for those who prefer a minimal toolbar
Badge refreshes instantly as you open, close, or navigate tabs
Six built-in environment types cover every stage of your workflow — plus 2 custom types free and unlimited with Pro.
Your local development machine
Shared development server
Pre-production testing environment
Quality assurance testing
User acceptance testing
Live production environment
Appearance tab — 6 built-in types with the option to add more
EnvHub ships with 6 environment types that cover the most common workflow stages. These defaults cannot be removed, so you always have a solid baseline. Need more? Add up to 2 custom types free — unlimited with Pro.
Add custom environments — 2 free, unlimited with Pro — with emoji display labels 🚀
Built-in default types
Custom types free / Pro
Emoji label support
Defaults can't be removed
Organize environments into projects. Search, sort, favorite, duplicate, toggle, and manage everything from one unified panel.
Projects tab — search, sort, favorite, and toggle projects
Each project groups a set of URL rules and environments together. The active project is shown in the green viewing banner — with live indicators showing which environment matches the current tab.
Type to filter — results update live as you type. Quickly find any project by name.
Sort by A→Z, Z→A, Recent, or Newest. Your preference is remembered.
Star projects to pin them at the top. Favorited projects get an orange highlight border.
Turn projects on or off with a single tap — without deleting any configuration.
Project cards automatically display the site's favicon for instant visual recognition.
Quickly clone a project with all its rules, or delete one you no longer need.
Click any project to open the full editor. Add multiple environments with URL patterns, configure Shopify integration, duplicate existing projects, or delete ones you no longer need.
A keyboard-first command palette to jump between projects and environments instantly — without ever leaving your current page.
Quick Switcher — keyboard-driven command palette overlaid on your page
Type to filter projects by name. Results update instantly as you type.
← → to cycle projects, ↑ ↓ to select environments. Full keyboard control.
Press Enter to navigate to the selected environment URL. ⌘⇧ opens in a new tab.
The active environment for the current page is highlighted with a "Here" badge.
Each project shows its site favicon for instant visual recognition.
Shopify projects show Site / Admin / Editor tabs to switch Shopify contexts.
Power-user shortcuts for macOS and Windows. Open EnvHub, switch environments, save forms, and navigate — all without touching the mouse.
💡 Use arrow keys on the environment label to cycle environments
EnvHub is designed for speed. The Quick Switcher opens with a keyboard shortcut, and every action within it — navigating projects, selecting environments, switching tabs — is keyboard-driven. Zero mouse clicks required.
Keyboard shortcuts work on all sites
To use keyboard shortcuts (like ⌘⇧S to switch environments) on any site, grant access to all sites above.
Instead of overlaying your page, push the content down or inward — keeping every pixel of your site visible. Even adjusts sticky navbars automatically.
By default, EnvHub overlays the indicator on top of your page. This can occasionally hide sticky headers or edge content. Push Content Mode solves this by shifting the entire page to make room for the indicator.
Pushes page content downward, including sticky navs
Pushes content inward so nothing is obscured by the frame border
Automatically detects common sticky/fixed nav patterns and adjusts their top offset
Push page content instead of overlaying
One toggle — applies to all display modes globally
Purpose-built for Shopify developers. Switch between Site, Admin, and Theme Editor across environments — with theme IDs and preview bar control.
Quick Switcher — Admin vs Editor tabs automatically adjust URLs
When Shopify mode is enabled for a project, the Quick Switcher shows three context tabs. Each tab automatically rewrites the environment URLs to point to the correct Shopify path — no manual URL editing needed.
Opens the storefront — the public-facing shop. URLs use the base domain.
www.mystore.com
Opens the Shopify admin dashboard. Appends /admin to the base URL.
/admin
www.mystore.com/admin
Opens the theme editor. Appends /admin/themes/editor — with optional theme ID.
/admin/themes/editor
www.mystore.com/admin/themes/editor
Per-environment Shopify Theme ID — opens the correct theme in the editor
Shopify developers often juggle multiple stores and themes. EnvHub understands Shopify's URL structure and gives you per-environment theme IDs, automatic admin/editor URL rewriting, and even hides Shopify's annoying preview bar.
Automatically hide Shopify's theme preview bar
One-click context switching between storefront, admin, and theme editor
Color-coded badge next to the Shopify logo in admin area
Jump to Admin, Theme Editor, or copy preview URL from any storefront
Resolves .myshopify.com store name even from custom domains
Each environment can have its own Shopify theme ID for the editor URL
Appends /admin or /admin/themes/editor paths automatically
Automatically removes Shopify's theme preview banner for a cleaner view
Detects published theme via Shopify.theme.role; auto-enables on .myshopify.com URLs
Enable Shopify mode only for the projects that need it
Back up your entire configuration as a portable JSON file. Transfer projects between browsers, share setups with your team, or keep a safety backup.
Export your projects and settings as a JSON file for backup or transfer to another browser.
Exported JSON — human-readable, portable, and versioned
One click exports everything — all projects, environment rules, custom environment types, and settings — as a clean, human-readable JSON file with a date-stamped filename. Import it into another browser or share it with your team.
Export before updates, restore if anything goes wrong
Move your setup from Chrome to Edge, Brave, or any Chromium browser
Share your project config with teammates so everyone has the same setup
Switch between Light, Dark, or Auto appearance — and choose a colour skin. The entire popup and side panel adapt seamlessly.
Mode, position, size, pattern, and animation
Shopify and third-party settings
Keyboard shortcuts reference
Import and export your settings
Site access and keyboard shortcuts
Theme, language, and behaviour
Clean, bright interface for daytime use
Easy on the eyes for night owls
Follows your OS light/dark preference
Purple (default) or Monochrome Pro — more coming soon
Pin EnvHub to Chrome's sidebar and it stays with you on every tab. Manage projects, switch environments, and adjust settings — all without losing your place.
Click the sidebar icon in the EnvHub header to dock the extension into Chrome's built-in side panel. It stays open as you navigate between tabs — no more opening and closing the popup.
Open the EnvHub popup
Click the EnvHub icon in your toolbar
Click the sidebar icon
It's the split-panel icon in the top-right header next to close
That's it — it persists across tabs
Navigate freely; the panel stays open until you close it
The sidebar icon sits in the popup header — hover to see the tooltip
Stays open as you browse
All tabs & settings available
Light & dark mode supported
Click × to dismiss any time
Hover over the environment label on any page to cycle through environments without opening the popup. Confirm or cancel with a single click.
Hover the label to reveal ‹ and › arrows
Click an arrow to preview the next environment — bar colour updates instantly
Hit ✓ to keep the change, or ✕ to snap back
Arrows appear only when you hover — no visual clutter
Keep clicking to loop through every environment in the project
Bar colour updates in real-time before you confirm
Changed your mind? Hit ✕ to revert instantly
Instantly disable or re-enable the entire extension with a single click — the power button lives right in the header, always accessible.
EnvHub is disabled
Click the power icon to re-enable
Power icon in the header — always visible in popup and side panel
All projects and settings are preserved — nothing is lost when disabled
Disabling removes every bar, frame, ribbon, and label from all tabs
Don't want to disable everything? Each project has its own toggle. Turn off individual projects while keeping the rest active — Quick Switcher still works even for disabled projects.
Quick Switcher still finds disabled projects — handy for quick re-enabling
EnvHub is designed to work for everyone — screen readers, keyboard-only users, and those who prefer reduced motion. Accessibility isn't an afterthought.
Modals announce themselves to screen readers with role="dialog", aria-modal, and aria-label.
role="dialog"
aria-modal
aria-label
modal.js → role="dialog" + aria-modal
When a modal or dialog opens, keyboard Tab cycles only through focusable elements inside it — preventing focus from escaping behind the overlay.
dom.js → trapFocus() + focusFirst()
Toast notifications use role="alert" and aria-live="polite" so screen readers announce success/error messages.
role="alert"
aria-live="polite"
toast.js → role="alert" + aria-live
Invalid fields are marked with aria-invalid and linked to their error message via aria-describedby.
aria-invalid
aria-describedby
form.js → aria-invalid + aria-describedby
Respects prefers-reduced-motion — all animations and transitions are disabled when the OS preference is set.
prefers-reduced-motion
CSS → @media (prefers-reduced-motion)
Every action is keyboard-accessible — Escape closes modals, Tab navigates fields, and custom keyboard shortcuts control the content script.
Escape, Tab, Arrow keys, Cmd+Shift+E
You control exactly which sites EnvHub can access. Grant per-site permissions for minimal exposure, or allow all sites for the full Quick Switcher experience.
Allow access to 127.0.0.1:5500 to show the environment bar overlay?
"EnvHub" has requested additional permissions.
It could:
Read and change your data on 127.0.0.1
Only the site you're on gets permission
Read and change all your data on all websites
Full Access
EnvHub can show the environment bar on any site
Approved sites:
All websites
This allows the environment bar to appear on any site without asking.
Enables Quick Switcher and shortcuts everywhere
Limited Access
Access to 1 site
127.0.0.1:5500
Shortcuts limited
Keyboard shortcuts only work on approved sites
Shortcuts enabled
Only approve sites you actually use — maximum privacy
Grant once for seamless Quick Switcher and shortcuts everywhere
Choose "Use Sidebar" to manage projects without granting site access
Shows whether shortcuts are limited or fully enabled
Hide sensitive projects during screen sharing. Choose exactly which projects stay visible — the rest disappear until you turn it off.
Hide projects while sharing your screen. Only checked projects will be visible.
Deselect All
Tap the lock icon in the popup header or sidebar footer to open the Screen Share Mode panel.
Check the projects you want to keep visible. Unchecked projects will be completely hidden.
Present your screen without exposing sensitive client or internal project details to viewers.
A 5-step intro tour walks new users through everything EnvHub can do — from environment bars to keyboard shortcuts. Skip any time, or dive right in.
Visual environment indicators for developers.
Customize colors, patterns, and positions.
Group environments by project. Quick-switch with a click.
Use ⌘+⇧+S to cycle envs.
Create your first project and start seeing indicators.
Create your first project and bring EnvHub to life across all your environments.
The first time you open EnvHub, a 5-slide tour introduces every key feature — with image placeholders ready for real screenshots. Skip at any point, or click through to learn the ropes.
Introduces EnvHub and the value proposition
Shows different bar styles: green LOCAL, blue DEV, red PROD
Shows popup with projects, each with environment pills
Demonstrates ⌘+Shift+S shortcut and environment cycling
"Get Started" launches straight into your first project
EnvHub speaks your language. Switch the entire UI to your preferred language, or leave it on Auto to follow your browser's locale.
Display Language
Follows your OS/browser locale automatically
Empujar el contenido de la página en lugar de superponerlo
Comienza a organizar tus entornos
Leave on "Auto" to match your browser's locale automatically
Full English locale — the default language
Complete Spanish translation — every label, tooltip, and message
Additional languages are on the roadmap — stay tuned!
See your changes in real time. As you edit colors, patterns, and display modes, a live preview updates instantly — no saving required.
Background Color
Pattern
Stripe Color
Click edit on any environment type from the Appearance tab
Change colors, patterns, stripe widths — the bar updates instantly on the active page
Preview is live but non-destructive — cancel to revert, or save to keep
Every color and pattern change reflects on the page immediately
Preview is live as you edit — save only when you're happy
Cancel the form and everything reverts — no risk of breaking your setup
Live preview works with bar, frame, ribbon, and label modes
Click any element on a page to leave visual feedback. Annotations are anchored to specific elements, support threaded replies, and persist across page reloads.
Toggle on from the Reviews tab. Crosshair cursor lets you click any element to create an annotation.
Numbered pins appear on the page near the anchored element. Navigate between them with prev/next arrows.
Add replies to any annotation. Expand/collapse threads. React with emoji. Delete individual comments.
Mark as Open or Resolved. Assign priority levels: None, Low, Medium, High, Critical — with color-coded badges.
Filter by environment, priority, or status. Annotations are grouped by page path and environment.
Share a URL with #envhub-ann-{id} — it opens the page and scrolls to the annotation.
#envhub-ann-{id}
Floating toolbar appears when Review Mode is active
change titke
jhgjhg
change this link
change the title to blahhh
EnvHub works without an account — the Free plan needs no sign-up. Create an account to unlock Pro features, sync across browsers, and manage your profile.
Use all Free features without signing up. Your data stays local in Chrome Sync.
Create an account to unlock Pro features. Your profile includes an avatar and display name visible in annotations.
View your current plan, usage limits (projects, environments, custom types), and upgrade options — all from the Account tab.
Even without an account, enter a display name to leave annotations for team review.
free@test.com
No cost, but with limited features
Unlock the full power of EnvHub
Compare all plans
Built on Manifest V3 for all Chromium-based browsers. Safari support is on the way, and we're exploring mobile too.
Primary platform
Chromium-based
Desktop Safari extension currently in development. Same great features, native to macOS.
Mobile Safari extension being explored. Some platform limitations may apply — stay tuned for updates.
EnvHub is built on Chrome's latest Manifest V3 extension platform — the modern standard for browser extensions with improved security, performance, and privacy. No legacy APIs, fully future-proof.
MV3's service worker model means no persistent background pages draining resources
Install from the Chrome Web Store and it works across all Chromium browsers
Built for the modern web — no deprecated APIs, no migration needed
Get started with the free tier. Upgrade to Pro when you need more power.