🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

api-designer

Package Overview
Dependencies
Maintainers
5
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

api-designer

A web editor for creating and sharing RAML API specifications

0.4.1
latest
Source
npm
Version published
Weekly downloads
44
-22.81%
Maintainers
5
Weekly downloads
 
Created
Source

API Designer

![Gitter](https://badges.gitter.im/Join Chat.svg)

Build Status Dependency Status DevDependency Status 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.

Examples of designing RAML with API Designer in the Wild

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

FAQs

Package last updated on 05 Apr 2017

Did you know?

Socket

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.

Install

Related posts

Socket Now Supports pylock.toml Files

Product

Socket Now Supports pylock.toml Files

Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.

By Trevor Norris  -  Jun 05, 2025