Gitter npm version Bower version
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.
There is an online preview version of the API Designer, check it out a different branch.
npm install -g api-designer
api-designer
This will start a local designer instance using the in-browser filesystem.
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>
If you want to contribute to this project, please read our contribution guide first.
Copyright 2013 MuleSoft, Inc. Licensed under the Common Public Attribution License (CPAL), Version 1.0