api-designer
Advanced tools
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
FAQs
A web editor for creating and sharing RAML API specifications
The npm package api-designer receives a total of 99 weekly downloads. As such, api-designer popularity was classified as not popular.
We found that api-designer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.