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
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="dist/styles/api-designer-vendor.css">
<link rel="stylesheet" href="dist/styles/api-designer.css">
</head>
<body ng-app="ramlEditorApp">
<raml-editor></raml-editor>
<script src="dist/scripts/api-designer-vendor.js"></script>
<script src="dist/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"
angular.module('ramlEditorApp')
.factory('MyFileSystem', function ($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.
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;
})
.run(function (MyFileSystem, config, $rootScope) {
// Set MyFileSystem as the filesystem to use
config.set('fsFactory', 'MyFileSystem');
// 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: 'File saved.', expires: true});
});
</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