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
Table of Contents
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.
Source code has been tested solely for our own use cases, which might differ from yours.
Please follow the instructions below to make the library work in your project.
You need the following software installed to be able to use this library:
npm i @covesa/ifex-viewer
# or
yarn add @covesa/ifex-viewer
# or
pnpm add @covesa/ifex-viewerThe 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.
- Visualize deployment layers
- Editable IFEX Spec
- VSCode Plugin for visualizing IFEX APIs right inside your IDE
Any contributions you make are greatly appreciated.
See CONTRIBUTING.md for more information.
Distributed under the Apache License 2.0. See LICENSE for more information.
See MAINTAINERS.md for more information.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
