Brackets

Installation

macOS

# Using Homebrew
brew install brackets

# Manual download from releases
wget https://github.com/adobe/brackets/releases/download/release-2.3.0/Brackets.2.3.0.msi
# Run the installer

# Verify installation
brackets --version

Windows

# Chocolatey installation
choco install brackets

# Scoop installation
scoop install brackets

# Manual download
# Visit https://github.com/adobe/brackets/releases
# Download Brackets.2.3.0.msi (latest stable)
# Run installer and follow prompts

Linux (Ubuntu/Debian)

# Install via package manager (older version)
sudo apt update
sudo apt install brackets

# Or build from source (recommended for latest)
git clone https://github.com/adobe/brackets.git
cd brackets
npm install
npm start

Source Build

# Clone repository
git clone https://github.com/adobe/brackets.git
cd brackets

# Install dependencies
npm install

# Build for distribution
npm run build

# Run in development mode
npm start

# Run tests
npm test

Core Features

Live Preview

# Live preview updates HTML/CSS in real-time as you edit
# Click File > Live Preview (or use keyboard shortcut)
# Browser opens and syncs with editor changes

# View > Enable Live Preview
# View > Live Preview Highlight

# Live preview connects via WebSocket to update browser
# No page reload needed - see changes instantly

Inline Editing

# Quick Edit: Cmd+Shift+E (Mac) or Ctrl+Shift+E (Windows/Linux)
# Shows CSS rules inline when cursor is in HTML class/ID

# Example: Click on <div class="container"> and press Ctrl+Shift+E
# Shows .container { ... } in inline popup editor

# Make CSS changes without switching files
# Press Escape to close inline editor

Visual Tools

# Color picker: Click on color value and visual picker opens
# Gradient editor: Click on gradient and adjust visually
# Image preview: Hover over image URLs to preview
# Shortcut guide: Ctrl+H shows all available keyboard shortcuts

Project Workflow

Creating a Project

# Open Brackets
brackets

# File > Open Folder (Cmd+Ctrl+O or Ctrl+Alt+O)
# Select your project directory

# Left sidebar shows folder structure
# Extract project from ZIP for better performance

File Editing

# Create new file: File > New (Cmd+N or Ctrl+N)
# Save file: Cmd+S or Ctrl+S
# Save all: Cmd+Alt+S or Ctrl+Alt+S
# Rename file: Right-click in sidebar > Rename

# Quick open file: Cmd+P or Ctrl+P
# Start typing filename to search and open
# Press Enter to open, Escape to cancel

# Go to line: Ctrl+G (Windows/Linux) or Cmd+G (Mac)
# Find: Cmd+F or Ctrl+F
# Find and replace: Cmd+H or Ctrl+H
# Find all in files: Cmd+Shift+F or Ctrl+Shift+F

# Navigate to CSS rule: Ctrl+Shift+E in HTML element
# Go to definition: Cmd+K or Ctrl+K
# Jump to line number in editor

Extension Management

Installing Extensions

# File > Extension Manager (Cmd+' or Ctrl+')
# Search for extensions by name
# Click Install button

# Extensions are installed to:
# ~/.config/Brackets/extensions/user/ (Linux/Mac)
# %APPDATA%\Brackets\extensions\user\ (Windows)

Popular Extensions

# Beautify - Format HTML/CSS/JavaScript
# File > Beautify (or Beautify on Save)

# Markdown Preview - Preview markdown files live
# Open .md file and enable Live Preview

# Emmet - HTML/CSS abbreviation expansion
# Type abbreviation and press Tab
# Example: div.container>p.text*3

# QuickSearchAndReplace - Enhanced search functionality
# Ctrl+H for find and replace with preview

# Git - Version control integration
# File > Git > See available git commands

Extension Folder

# User extensions location:
# ~/.config/Brackets/extensions/user/

# Browse extensions directory
# mkdir -p ~/.config/Brackets/extensions/user/

# Remove extensions by deleting folder
# rm -rf ~/.config/Brackets/extensions/user/extension-name

Customization

Themes

# Edit > Preferences (Cmd+, or Ctrl+,)
# Change theme in preferences file

# Default themes included:
# - Light theme (default)
# - Dark theme (Dark Brackets)

# Custom theme installation via extensions
# Popular: Dark Brackets, Blackhole, Monokai

Keyboard Shortcuts

# Edit > Edit Keyboard Shortcuts (or check Help)
# Shortcuts file location:
# ~/.config/Brackets/extensions/user/brackets.keymap.json (Linux/Mac)

# Custom shortcuts:
# {
#   "key": "Ctrl-Shift-D",
#   "command": "debug.toggleBreakpoint"
# }

# Common shortcuts:
# Cmd+/ or Ctrl+/ - Toggle line comment
# Cmd+D or Ctrl+D - Add cursor at current line end
# Cmd+Shift+L or Ctrl+Shift+L - Select all occurrences

Preferences

# Edit > Preferences
# ~/.config/Brackets/brackets.json (Linux/Mac)
# %APPDATA%\Brackets\brackets.json (Windows)

# Common settings:
# {
#   "closeBrackets": true,
#   "autoUpdate": false,
#   "fontSize": 12,
#   "fontFamily": "SourceCodePro",
#   "indentUnit": 4,
#   "indentWithTabs": false,
#   "livePreview.enabled": true
# }

Debugging

Developer Tools

# Debug > Open Developer Tools (F12 or Cmd+Option+I)
# Console tab - View errors and logs
# Elements/Inspector - Inspect HTML/CSS
# Network tab - Monitor file downloads

# Reload page with F5
# Hard reload (clear cache): Cmd+Shift+R or Ctrl+Shift+R

Common Issues

# Live Preview not working:
# File > Close Live Preview Connection
# Re-enable via View > Enable Live Preview

# Extensions not loading:
# Help > Show Extensions Folder
# Check console for errors: Help > Open Developer Tools

# Performance issues:
# Close unused projects
# Disable unused extensions
# Edit > Preferences > Increase font cache

Keyboard Shortcuts

Shortcut	Action
Cmd+N / Ctrl+N	New file
Cmd+O / Ctrl+O	Open file
Cmd+W / Ctrl+W	Close file
Cmd+S / Ctrl+S	Save file
Cmd+P / Ctrl+P	Quick open file
Cmd+F / Ctrl+F	Find
Cmd+H / Ctrl+H	Find & Replace
Cmd+K / Ctrl+K	Jump to definition
Cmd+Shift+E / Ctrl+Shift+E	Quick edit (inline)
Cmd+/ / Ctrl+/	Toggle comment
Cmd+G / Ctrl+G	Go to line

Best Practices

Use live preview during development to catch CSS errors early
Organize projects in folders for better navigation
Use keyboard shortcuts for faster editing workflows
Enable auto-save in preferences for safety
Install only necessary extensions to maintain performance
Use inline editing for quick CSS modifications
Commit changes to version control before major edits
Keep HTML/CSS/JavaScript well-formatted with Beautify
Use Emmet abbreviations for faster HTML/CSS writing
Leverage Quick Open (Cmd+P) to navigate large projects

Development Workflow Example

# 1. Open project folder
brackets
# File > Open Folder > select project

# 2. Create new HTML file
# Cmd+N, type HTML boilerplate
# Use Emmet: html:5 and press Tab

# 3. Create CSS file
# New file: style.css
# Link in HTML: <link rel="stylesheet" href="style.css">

# 4. Enable Live Preview
# View > Enable Live Preview
# Browser opens with live reload

# 5. Edit HTML/CSS
# Make changes, see live preview update
# Inline edit CSS: Cmd+Shift+E in element

# 6. Install extensions if needed
# Cmd+' > search for Beautify
# Install and use for formatting

# 7. Debug with developer tools
# F12 to inspect elements
# Check console for errors

# 8. Save and commit
# Cmd+S to save
# git add, commit, push project

Resources

Last updated: 2026-03-30

Brackets

Installation

macOS

Windows

Linux (Ubuntu/Debian)

Source Build

Core Features

Live Preview

Inline Editing

Visual Tools

Project Workflow

Creating a Project

File Editing

Navigation

Extension Management

Installing Extensions

Popular Extensions

Extension Folder

Customization

Themes

Keyboard Shortcuts

Preferences

Debugging

Developer Tools

Common Issues

Keyboard Shortcuts

Best Practices

Development Workflow Example

Resources