This package has been deprecated

Author message:

Use @api-components/api-request instead

TypeScript icon, indicating that this package has built-in type declarations

4.1.1 • Public • Published

Published on NPM

Build Status


A HTTP headers editor.

It allows to edit headers in a convenient and accessible form editor and also allows to switch to the source edit view (thanks to CodeMirror).

The component works as a stand-alone editor that allows to define headers for HTTP request but also works with generated AMF model from API spec file.

<api-headers-editor allowcustom allowdisableparams allowhideoptional></api-headers-editor>

See breaking changes and list of required dependencies at the bottom of this document

Version compatibility

This version only works with AMF model version 2 (AMF parser >= 4.0.0). For compatibility with previous model version use 3.x.x version of the component.



npm install --save @api-components/api-headers-editor

In an html file

    <script type="module">
      import '@api-components/api-headers-editor/api-headers-editor.js';
    <api-headers-editor allowdisableparams allowcustom allowhideoptional></api-headers-editor>
      document.querySelector('api-headers-editor').onvalue = (e) {
        console.log('Headers value',;

In a LitElement

import { LitElement, html } from 'lit-element';
import '@api-components/api-headers-editor/api-headers-editor.js';

class SampleElement extends LitElement {
  render() {
    return html`

  _handleValue(e) {
    this.headersValue =;
customElements.define('sample-element', SampleElement);

Passing AMF data model


  const api = await generateApiModel();
  const endpoint = '/api-endpoint';
  const operation = 'GET';
  const headersModelArray = getOperationHeadersFromModel(api, endpoint, operation); // some abstract method
  const editor = document.querySelector('api-headers-editor');
  editor.api = api; // This is required to compute ld+json keys!
  editor.amfHeaders = headersModelArray;

The headersModelArray property is the value of shape of AMF model. It can be accessed via supportedOperation > expects shapes.


git clone
cd api-headers-editor
npm install

Running the demo locally

npm start

Running the tests

npm test

Breaking Changes in v3

You need to include CodeMirror into the document before importing this element as it expect this global variable to be already set.

This is due CodeMirror not being able to run as ES module.

Use your build system to bundle CodeMirror into the build and don't forget to export global variable.

<script src="node_modules/codemirror/lib/codemirror.js"></script>

Package Sidebar


npm i @api-components/api-headers-editor

Weekly Downloads






Unpacked Size

108 kB

Total Files


Last publish


  • carowright
  • jarrodek
  • lbauret
  • twoplustwoone