API Designer

API Designer is a standalone/embeddable editor for RAML (RESTful API Modeling Language) written in JavaScript using Angular.JS. By default, the editor uses an in-browser filesystem stored in HTML5 Localstorage.

Examples of designing RAML with API Designer in the Wild

• Remote Medicine API
• Notes API
• Congo API for Drone Delivery

API Designer online

There is an online preview version of the API Designer, check it out a different branch.

Running Locally

npm install -g api-designer

api-designer

This will start a local designer instance using the in-browser filesystem.

Embedding

The following example details how to embed the API Designer:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <link rel="stylesheet" href="styles/api-designer-vendor.css">
  <link rel="stylesheet" href="styles/api-designer.css">
</head>
<body ng-app="ramlEditorApp">
<raml-editor></raml-editor>
<script src="scripts/api-designer-parser.js"></script>
<script>
  if (window.Worker) {
    // enable optional web worker for raml parsing 
    window.RAML.worker = new Worker('scripts/api-designer-worker.js#parser=./api-designer-parser.js&proxy=/proxy/');
  }
</script>
<script src="scripts/api-designer-vendor.js"></script>
<script src="scripts/api-designer.js"></script>
<script>
  // This part is needed only if you want to provide your own Persistance Implementation
  // Angular Module must match "ramlEditorApp"

  function myFileSystem($q, config, $rootScope) {
    var service = {};

    service.directory = function (path) {
      var deferred = $q.defer();

      // Your magic goes here:
      // Do deferred.resolve(data); to fulfull the promise or
      // deferred.reject(error); to reject it.

      // In case you want to send notifications to the user
      // (for instance, that he must login to save).
      // The expires flags means whether
      // it should be hidden after a period of time or the
      // user should dismiss it manually.
      $rootScope.$broadcast('event:notification', {message: 'Loading directory' + path, expires: true});

      return deferred.promise;
    };

    service.load = function (path, name) {
      var deferred = $q.defer();

      // Your magic goes here:
      // Do deferred.resolve(data); to fulfull the promise or
      // deferred.reject(error); to reject it.

      return deferred.promise;
    };

    service.remove = function (path, name) {
      var deferred = $q.defer();

      // Your magic goes here:
      // Do deferred.resolve(data); to fulfull the promise or
      // deferred.reject(error); to reject it.

      return deferred.promise;
    };

    service.save = function (path, name, contents) {
      var deferred = $q.defer();

      // Your magic goes here:
      // Do deferred.resolve(data); to fulfull the promise or
      // deferred.reject(error); to reject it.

      return deferred.promise;
    };

    return service;
  }

  angular.module('ramlEditorApp')
    .config(function (fileSystemProvider) {
      // Set myFileSystem as the filesystem to use
      fileSystemProvider.setFileSystemFactory(myFileSystem);
    });
</script>
<style>
  html,
  body {
    height: 100%;
  }
</style>
</body>
</html>

Contribution

If you want to contribute to this project, please read our contribution guide first.

License

Copyright 2013 MuleSoft, Inc. Licensed under the Common Public Attribution License (CPAL), Version 1.0