Multipart payload editor for ARC body editor

Usage no npm install needed!

<script type="module">
  import advancedRestClientMultipartPayloadEditor from 'https://cdn.skypack.dev/@advanced-rest-client/multipart-payload-editor';


Published on NPM

Build Status

Published on webcomponents.org


An AMF powered multipart payload editor for the HTTP request editor.


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 @advanced-rest-client/multipart-payload-editor

In an html file

    <script type="module">
      import '@advanced-rest-client/multipart-payload-editor/multipart-payload-editor.js';

In a LitElement

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

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

  _handleValue(e) {
    this.headersValue = e.detail.value;

  _handleModel(e) {
    this.modelValue = e.detail.value;
customElements.define('sample-element', SampleElement);

Generating view model from AMF model

When you have API model generated by AMF parser you can use api-view-model-transformer element to produce view model for the editor. This element produces common model for query parametrs, URI parameters, body, and headers.

<api-view-model-transformer @view-model-changed="${this._viewModelChanged}"></api-view-model-transformer>

  const api = await generateApiModel();
  const endpoint = '/api-endpoint';
  const operation = 'GET';
  const payloadModelArray = getOperationPayloadFromModel(api, endpoint, operation); // some abstract method
  const transformer = document.querySelector('api-view-model-transformer');
  transformer.api = api; // This is required to compute ld+json keys!
  const viewModel = transformer.computeViewModel(headersModelArray);
  document.querySelector('multipart-payload-editor').model = viewModel;


git clone https://github.com/advanced-rest-client/multipart-payload-editor
cd multipart-payload-editor
npm install

Running the demo locally

npm start

Running the tests

npm test

API components

This components is a part of API components ecosystem