Home

Awesome

Bramble is based on Brackets

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

Brackets is at 1.0 and 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.

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.

How to setup Bramble (Brackets) in your local machine

Step 1: Make sure you fork and clone Brackets.

$ git clone https://github.com/[yourusername]/brackets --recursive

Step 2: Install its dependencies

Navigate to the root of the directory you cloned and run:

$ npm install

NOTE: if you are running on Windows, and experience a build error with the iltorb package, consider adding the --no-optional flag to have npm skip installing iltorb, which is optional and requires python, gyp and a working c++ build environment. See comment in https://github.com/mozilla/brackets/pull/588#issuecomment-280438175

Step 3: Run Bramble:

The easiest way to run Bramble is to simply use:

$ npm start

This will generate the strings needed for localization in your src/nls folder and allow you to access Bramble on localhost:8000 (NOTE: you need npm version 5 for the cleanup step to run properly; if it doesn't, use npm run unlocalize to restore the files in src/nls/**/*). It will also build the Bramble iframe API in dist/ if necessary. You can terminate the server with Ctrl+C which will also clean up the strings that were generated in your src/nls folder. If any changes are made in the src directory, just refresh the page hosting Bramble in your browser to reflect those changes.

If you want to simply run the server without the localized strings, run:

$ npm run server

However, if you wish to run your own static server, there are several options available:

Assuming you have Bramble running on port 8000. Now you can visit http://localhost:8000/src.

NOTE 1: Bramble expects to be run in an iframe, which hosts its filesystem. For local development, use src/hosted.html instead of src/index.html. To see how the remote end should host Bramble's iframe, see src/hosted.js.

NOTE 2: Using npm run build will overwrite contents in the src/nls folder. These changes are necessary if you access Bramble using http://localhost:8000/src. After using Bramble, you can undo the changes by running npm run unlocalize.

NOTE 3: To use Bramble in a production setting locally, you can run npm run production and access Bramble at http://localhost:8000/dist

Extension Loading

Bramble loads a set of extensions defined in src/extensions/bramble-extensions.json. You can alter which extensions Bramble loads by adding or removing items from this list. You can also temporarily disable extensions by using ?disableExtensions. For example: to disable QuickView and CSSCodeHints, load Bramble with ?disableExtensions=QuickView,CSSCodeHints on the URL.

After installation

After you have everything setup, you can now run the server you chose in the root of your local Bramble directory and see it in action by visiting http://localhost:8000/src.

Bramble IFrame API

Bramble is designed to be run in an iframe, and the hosting web app to communicate with it via postMessage and MessageChannel. In order to simplify this, a convenience API exists for creating and managing the iframe, as well as providing JavaScript functions for interacting with the editor, preview, etc.

Loading the API

The hosting app must include the Bramble IFrame API (i.e., dist/bramble.js). Note: in development you can use src/hosted.html, which does this. This script can either be used as an AMD module, or as a browser global:

<script src="bramble.js"></script>
<script>
  // Option 1: AMD loading, assumes requirejs is loaded already
  require(["bramble"], function(Bramble) {
    ...
  });

  // Option 2: Browser global
  var Bramble = window.Bramble;
</script>

Bramble

The Bramble module has a number of methods, properties, and events. During its lifetime, Bramble goes through a number of states, including:

The current state of Bramble can be obtained by calling Bramble.getReadyState(). There are also a number of events you can listen for (i.e., Bramble is an EventEmitter):

Bramble.once("ready", function(bramble) {
  // bramble is the Bramble proxy instance, see below.
});

Bramble.on("error", function(err) {
  // Bramble is in an error state, and `err` is the error.
})

Bramble.on("readyStateChange", function(previous, current) {
  // Bramble's readyState changed from `previous` to `current`
});

NOTE: in some browsers (e.g., Firefox) when the user is in "Private Browsing" mode, the filesystem (i.e., IndexedDB) will be inaccessible, and an error will be sent via the error event (i.e., err.code === "EFILESYSTEMERROR"). This is the same error that occurs when the filesystem is corrupt (see autoRecoverFileSystem below).

Bramble Offline Support

The Bramble code is offline capable, and will indicate, via events, when it is ready to be used offline, as well as when there are updates available for existing offline cached resources. These events are triggered on Bramble vs. the bramble instance. The offline related events include:

Bramble.getFileSystem()

The FileSystem is owned by the hosting application, and can be obtained at any time by calling:

var fs = Bramble.getFileSystem();

This fs instance can be used to setup the filesystem for the Bramble editor prior to loading. You can access things like Path and Buffer via Bramble.Filer.*.

Bramble.formatFileSystem(callback)

WARNING: this will destroy data, and is meant to be used in the case that the filesystem is corrupted (err.code === "EFILESYSTEMERROR"), or for when an app wants to allow a user to wipe their disk.

Bramble.on("error", function(err) {
  if(err.code === "EFILESYSTEMERROR") {
    Bramble.formatFileSystem(function(err) {
      if(err) {
        // Unable to create filesystem, fatal (and highly unlikely) error
      } else {
        // filesystem is now clean and empty, use Bramble.getFileSystem() to obtain instance
      }
    });
  }
});

NOTE: you can turn this recovery behaviour on automatically by passing autoRecoverFileSystem: true in the options to Bramble.load().

Bramble.load(elem[, options])

Once you have a reference to the Bramble object, you use it to starting loading the editor:

// Start loading Bramble
Bramble.load("#webmaker-bramble");

Bramble.once("error", function(err) {
  console.error("Bramble error", err);
});

The elem argument specifies which element in the DOM should be used to hold the iframe. This element's contents will be replaced by the iframe. You can pass a selector, a reference to an actual DOM element, or leave it blank, and document.body will be used.

The options object allows you to configure Bramble:

Bramble.mount(root[, filename])

After calling Bramble.load(), you can tell Bramble which project root directory to open, and which file to load into the editor. NOTE: the optional filename argument, if provided, should be a relative path within the project root. Bramble will use this information when it is ready to mount the filesystem. Use the "ready" event to get access to the bramble instance:

// Setup the filesystem while Bramble is loading
var fs = Bramble.getFileSystem();

Bramble.once("ready", function(bramble) {
  // The bramble instance is now usable, see below.
});

fs.mkdir("/project", function(err) {
  // If we run this multiple times, the dir will already exist
  if (err && err.code !== "EEXIST") {
    throw err;
  }

  var html = ""                    +
    "<html>\n"                     +
    "  <head>\n"                   +
    "    <title>Bramble</title>\n" +
    "  </head>\n"                  +
    "  <body>\n"                   +
    "    <p>Hello World</p>\n"     +
    "  </body>\n"                  +
    "</html>";

  fs.writeFile("/project/index.html", html, function(err) {
    if (err) {
      throw err;
    }

    // Now that fs is setup, tell Bramble which root dir to mount
    // and which file within that root to open on startup.
    Bramble.mount("/project", "index.html");
  });
});

Bramble Instance Getters

Once the Bramble instance is created (e.g., via ready event or Bramble.mount() callback), a number of read-only getters are available in order to access state information in the Bramble editor:

NOTE: calling these getters before the ready() callback on the bramble instance won't do what you want.

Bramble Instance Methods

The Bramble instance has a number of methods you can call in order to interact with the Bramble editor and preview, all of which take an optional callback argument if you want to be notified when the action completes:

Bramble Instance Events

The Bramble instance is also an EventEmitter and raises the following events:

There are also high-level events for changes to files:

{
  oldPath: "/path/before/rename",
  newPath: "/path/after/rename",
  // Paths to all files contained inside the folder being renamed
  children: [ "relativeFilePath1",  "relativeFilePath2", ... ]
}

NOTE: if you want to receive generic events for file system events, especially events across windows using the same file system, use fs.watch() instead.

Troubleshooting

If you forgot to add the --recursive flag while cloning this repository, you might run into a similar error:

Tracing dependencies for: main
Error: ENOENT: no such file or directory, open '[..]/brackets/src/thirdparty/text/text.js'
In module tree:
    brackets
      language/LanguageManager
        file/FileUtils
          utils/Global

To fix it, run git submodule update --init --recursive in the main directory.