Advanced REST CLient settings screen

Usage no npm install needed!

<script type="module">
  import advancedRestClientArcSettingsPanel from 'https://cdn.skypack.dev/@advanced-rest-client/arc-settings-panel';


Published on NPM

Build Status

Published on webcomponents.org


Settings panel for Advanced REST Client.

Since version 3 this repository contains all settings panel instead of separate repositories.



npm install --save @advanced-rest-client/arc-settings-panel

In a LitElement

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/arc-settings-panel/arc-settings-panel.js';

class SampleElement extends LitElement {
  get styles() {
    return css`
      arc-menu {
        height: 500px;

  render() {
    return html`
customElements.define('sample-element', SampleElement);

Data source

The element dispatches settings-read when it needs the settings to be read. The event should be handled by the application and set settings on result property of the event detail. The result can be a promise.

The event has to be cancelled or otherwise the element will ignore it.

element.addEventListener('settings-read', (e) => {
  e.detail.result = Promise.resolve({ ... });

Settings change event

The element dispatches cancellable settings-changed custom event with name and value properties set on the detail object. The application should handle the event and store the settings data.

The element listens for the same event and if the event is non-cancellable then it updates property value on current panel, if applicable.


git clone https://github.com/advanced-rest-client/arc-settings-panel
cd arc-settings-panel
npm install

Running the demo locally

npm start

Running the tests

npm test

API components

This components is a part of API components ecosystem