@covesa/ifex-viewer

Interface Exchange Framework (IFEX) Viewer

The IFEX Viewer is a web component designed to display API specifications created with the Interface Exchange Framework (IFEX) and is capable of rendering all elements specified in the IFEX Core IDL.

View Documentation . Try it out · Report Bug · Request Feature

About The Project

Features:

• IFEX Core IDL viewer: Supports and visualizes all properties provided by the IFEX Core IDL
• Easy usage: You can simply use the ifex viewer in any framework because it's a web component.
• Supports multiple files: You can pass multiple files to the viewer and it will render them all.
• Supports custom and deployment layers: You can define custom layers and deployment layers in your specification and the viewer will render them.

Coming soon:

• Customizability: Style the ifex viewer for your indidivdual needs
• Internationalization: Provides different languages

[!TIP] Quickly prototype and validate your IFEX API definitions by using the Playground.

(back to top)

Built With

• Vue
• tailwindcss
• Storybook

Source code has been tested solely for our own use cases, which might differ from yours.

(back to top)

Getting Started

Please follow the instructions below to make the library work in your project.

Prerequisites

You need the following software installed to be able to use this library:

• Node
• npm

Installation

npm i @covesa/ifex-viewer
# or
yarn add @covesa/ifex-viewer
# or
pnpm add @covesa/ifex-viewer

(back to top)

Usage

The viewer can be used in every modern browser because it's built as Web Component. You can use it in your project like a regular html element.

<body>
    <ifex-viewer id="viewer"></ifex-viewer>
</body>
<script>
  const viewer = document.getElementById('viewer');
  viewer.specifications = [{
      filename: 'my-api-specification.yml',
      content:`
name: "GalacticEmpireAPI"
description: "API for the operations and command structure of the Galactic Empire"
major_version: 1
minor_version: 0
namespaces:
  - name: "GalacticEmpire"
    description: "Namespace for operations related to the Galactic Empire"
    methods:
      - name: "recruitStormtrooper"
        description: "Recruits a new stormtrooper to the Imperial Army"
        input:
          - name: "name"
            datatype: "string"
            description: "Name of the recruit"
          - name: "planetOfOrigin"
            datatype: "string"
            description: "Planet where the recruit was born"
        output:
          - name: "stormtrooperId"
            datatype: "string"
            description: "The ID of the newly recruited stormtrooper"
      `
  }];
<script>

For more info about all the configuration options check out the documentation here.

(back to top)

Roadmap

• Visualize deployment layers
• Editable IFEX Spec
• VSCode Plugin for visualizing IFEX APIs right inside your IDE

(back to top)

Contributing

Any contributions you make are greatly appreciated.

See CONTRIBUTING.md for more information.

(back to top)

License

Distributed under the Apache License 2.0. See LICENSE for more information.

(back to top)

Contact

See MAINTAINERS.md for more information.

(back to top)