Convert Figma logo to code with AI

adobe logobrackets

An open source code editor for the web, written in JavaScript, HTML and CSS.

33,254
7,631
33,254
2,784

Top Related Projects

162,288

Visual Studio Code

60,150

:atom: The hackable text editor

IntelliJ IDEA Community Edition & IntelliJ Platform

Notepad++ official repository

Syntax highlighting files shipped with Sublime Text and Sublime Merge

14,224

TextMate is a graphical text editor for macOS 10.12 or later

Quick Overview

Brackets is an open-source code editor primarily focused on web development. It was created by Adobe and is designed to be lightweight, yet powerful, with a strong emphasis on visual tools and preprocessor support.

Pros

  • Live Preview feature allows real-time viewing of changes in the browser
  • Built-in preprocessor support for LESS and SCSS
  • Extensible architecture with a wide range of community-developed extensions
  • Clean, modern interface with inline editors for quick CSS/JS editing

Cons

  • Development has slowed down significantly since Adobe stopped active maintenance
  • Some users report performance issues with larger projects
  • Limited built-in features compared to more comprehensive IDEs
  • Lack of official support for newer web technologies and frameworks

Getting Started

  1. Download Brackets from the official website: https://brackets.io/
  2. Install the application on your system
  3. Launch Brackets and open a project folder or create a new HTML file
  4. Start coding and use the Live Preview feature by clicking the lightning bolt icon in the top-right corner

Note: While Brackets is still available for download and use, it's important to be aware that active development has ceased. Consider exploring alternative, actively maintained code editors for long-term projects.

Competitor Comparisons

162,288

Visual Studio Code

Pros of VS Code

  • Larger and more active community, resulting in more extensions and frequent updates
  • Better performance and stability, especially for larger projects
  • Integrated terminal and Git support

Cons of VS Code

  • Steeper learning curve for beginners
  • Higher resource consumption, especially RAM usage
  • Less focused on web development compared to Brackets' specialized features

Code Comparison

VS Code (settings.json):

{
  "editor.fontSize": 14,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "workbench.colorTheme": "Monokai"
}

Brackets (brackets.json):

{
  "fonts.fontSize": "14px",
  "wordWrap": true,
  "autoSave": true,
  "themes.theme": "dark"
}

Both editors use JSON for configuration, but VS Code offers more granular control over settings. Brackets' configuration is simpler and more focused on web development-specific options.

VS Code provides a more comprehensive development environment with broader language support, while Brackets excels in web development-specific features like live preview and inline editors. VS Code's extensive ecosystem and regular updates make it a more versatile choice for various programming tasks, whereas Brackets remains a solid option for web developers seeking a lightweight, specialized editor.

60,150

:atom: The hackable text editor

Pros of Atom

  • More extensive plugin ecosystem with a larger community
  • Built on Electron, offering better cross-platform compatibility
  • More frequent updates and active development

Cons of Atom

  • Higher memory usage and slower startup times
  • Steeper learning curve for customization
  • Less focus on web development-specific features

Code Comparison

Brackets (HTML highlighting):

<div class="container">
    <h1>Welcome to Brackets</h1>
    <p>Edit your code with style!</p>
</div>

Atom (JavaScript highlighting):

const greeting = 'Welcome to Atom';
console.log(greeting);
function editCode() {
    return 'Edit your code with power!';
}

Both editors offer syntax highlighting and code completion, but Brackets has more built-in features for web development, while Atom relies more on community-developed packages for similar functionality.

Brackets focuses on providing a lightweight editor with web-specific features out of the box, while Atom offers a more customizable and extensible platform that can be tailored to various development needs beyond web development.

IntelliJ IDEA Community Edition & IntelliJ Platform

Pros of IntelliJ IDEA Community Edition

  • More comprehensive IDE with support for multiple languages and frameworks
  • Robust refactoring tools and advanced code analysis
  • Extensive plugin ecosystem for customization and additional features

Cons of IntelliJ IDEA Community Edition

  • Heavier resource usage and slower startup time
  • Steeper learning curve for new users
  • More complex interface compared to Brackets' minimalist design

Code Comparison

Brackets (JavaScript):

define(function (require, exports, module) {
    "use strict";
    
    var CommandManager = require("command/CommandManager");
    var Commands       = require("command/Commands");
    var Menus          = require("command/Menus");
});

IntelliJ IDEA Community Edition (Java):

package com.intellij.openapi.actionSystem;

import org.jetbrains.annotations.NotNull;
import org.jetbrains.annotations.Nullable;

public interface AnAction {
    void actionPerformed(@NotNull AnActionEvent e);
}

Both IDEs use modular architectures, but IntelliJ IDEA's codebase is more extensive and complex, reflecting its broader feature set. Brackets focuses on web development, while IntelliJ IDEA Community Edition supports multiple languages and frameworks.

Notepad++ official repository

Pros of Notepad++

  • Lightweight and fast, with minimal system resources required
  • Extensive plugin ecosystem for added functionality
  • Supports a wide range of programming languages and file formats

Cons of Notepad++

  • Less modern and visually appealing interface compared to Brackets
  • Limited built-in web development features and live preview capabilities
  • Primarily focused on Windows, with limited cross-platform support

Code Comparison

Notepad++ (C++):

#include "NppDarkMode.h"
#include "Parameters.h"
#include "resource.h"

namespace NppDarkMode
{
	void initDarkMode()
	{
		// Dark mode initialization code
	}
}

Brackets (JavaScript):

define(function (require, exports, module) {
    "use strict";
    
    var CommandManager = require("command/CommandManager"),
        Menus          = require("command/Menus"),
        Commands       = require("command/Commands");

    // Extension initialization code
});

Both editors have their strengths, with Notepad++ excelling in performance and language support, while Brackets offers a more modern interface and web-focused features. The code snippets highlight the different programming languages used in their core development: C++ for Notepad++ and JavaScript for Brackets, reflecting their distinct architectures and target audiences.

Syntax highlighting files shipped with Sublime Text and Sublime Merge

Pros of Packages

  • More extensive language support and syntax highlighting
  • Highly customizable with a large ecosystem of packages and themes
  • Faster performance and lower resource usage

Cons of Packages

  • Steeper learning curve for beginners
  • Less intuitive interface compared to Brackets' visual-oriented design
  • Limited built-in features, requiring more setup and configuration

Code Comparison

Brackets (JavaScript):

define(function (require, exports, module) {
    "use strict";
    var CommandManager = require("command/CommandManager");
    var Commands       = require("command/Commands");
    var Menus          = require("command/Menus");
});

Packages (Python):

import sublime
import sublime_plugin

class ExampleCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        self.view.insert(edit, 0, "Hello, World!")

The code snippets demonstrate the different approaches to extending functionality. Brackets uses AMD modules and a more structured approach, while Packages relies on Sublime Text's plugin system with Python classes.

Packages offers more flexibility and power for advanced users, but Brackets provides a more accessible environment for web development, especially for beginners. The choice between the two depends on individual needs and preferences.

14,224

TextMate is a graphical text editor for macOS 10.12 or later

Pros of TextMate

  • Native macOS application, providing a more integrated and optimized experience for Mac users
  • Highly extensible through bundles, allowing for easy customization and language support
  • Lightweight and fast, with a clean and intuitive interface

Cons of TextMate

  • Limited to macOS, lacking cross-platform support unlike Brackets
  • Less frequent updates and slower development cycle compared to Brackets
  • Smaller community and ecosystem for extensions and themes

Code Comparison

TextMate (Ruby bundle example):

snippet do
def ${1:method_name}
	${0:# TODO}
end

Brackets (JavaScript example):

define(function (require, exports, module) {
    "use strict";
    // Module code here
});

Both editors support syntax highlighting, code snippets, and extensions, but their approaches differ. TextMate uses bundles for language support and snippets, while Brackets relies on a more modern extension system.

TextMate excels in its native macOS integration and lightweight design, making it a favorite among Mac developers. Brackets, on the other hand, offers cross-platform compatibility and a more active development cycle, appealing to a broader audience of web developers across different operating systems.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

:warning: On September 1, 2021, Adobe will end support for Brackets. If you would like to continue using, maintaining, and improving Brackets, you may fork the project on GitHub. Through Adobe’s partnership with Microsoft, we encourage users to migrate to Visual Studio Code, Microsoft’s free code editor built on open source.

Welcome to Brackets! Build Status

Brackets is a modern open-source code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript.

What makes Brackets different from other web code editors?

  • Tools shouldn't get in your way. Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit UI in Brackets puts context-specific code and tools inline.
  • Brackets is in sync with your browser. With Live Preview, Brackets works directly with your browser to push code edits instantly and jump back and forth between your real source code and the browser view.
  • Do it yourself. Because Brackets is open source, and built with HTML, CSS and JavaScript, you can help build the best code editor for the web.

Brackets may have reached version 1, but we're not stopping there. We have many feature ideas on our trello board that we're anxious to add and other innovative web development workflows that we're planning to build into Brackets. So take Brackets out for a spin and let us know how we can make it your favorite editor.

You can see some screenshots of Brackets on the wiki, intro videos on YouTube, and news on the Brackets blog.

How to install and run Brackets

Download

Installers for the latest stable build for Mac, Windows and Linux (Debian/Ubuntu) can be downloaded here.

Usage

By default, Brackets opens a folder containing some simple "Getting Started" content. You can choose a different folder to edit using File > Open Folder.

Most of Brackets should be pretty self-explanatory, but for information on how to use its unique features, like Quick Edit and Live Preview, please read How to Use Brackets. Also, see the release notes for a list of new features and known issues in each build.

In addition to the core features built into Brackets, there is a large and growing community of developers building extensions that add all sorts of useful functionality. See the Brackets Extension Registry for a list of available extensions. For installation instructions, see the extensions wiki page.

Need help?

Having problems starting Brackets the first time, or not sure how to use Brackets? Please review Troubleshooting, which helps you to fix common problems and find extra help if needed.

Helping Brackets

I found a bug!

If you found a repeatable bug, and troubleshooting tips didn't help, then be sure to search existing issues first. Include steps to consistently reproduce the problem, actual vs. expected results, screenshots, and your OS and Brackets version number. Disable all extensions to verify the issue is a core Brackets bug. Read more guidelines for filing good bugs.

I have a new suggestion, but don't know how to program!

For feature requests please first check our Trello board to see if it's already there; you can upvote it if so. If not, feel free to file it as an issue as above; we'll move it to the feature backlog for you.

I want to help with the code!

Awesome! There are lots of ways you can help. First read CONTRIBUTING.md, then learn how to pull the repo and hack on Brackets.

The text editor inside Brackets is based on CodeMirror—thanks to Marijn for taking our pull requests, implementing feature requests and fixing bugs! See Notes on CodeMirror for info on how we're using CodeMirror.

Although Brackets is built in HTML/CSS/JS, it currently runs as a desktop application in a thin native shell, so that it can access your local files. (If you just try to open the index.html file in a browser, it won't work yet.) The native shell for Brackets lives in a separate repo, adobe/brackets-shell.

I want to keep track of how Brackets is doing!

Not sure you needed the exclamation point there, but we like your enthusiasm.

What's Brackets working on next?

Contact info


Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.