This package has been deprecated

    Author message:

    Use @api-components/api-url instead

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

    4.1.0 • Public • Published

    Published on NPM

    Build Status


    An element to render query / URI parameters form from AMF data model.

    It also allows to create custom query parameters list, outside schema definition, when allowCustom property is set.

    It uses api-url-data-model to transform AMF model to the view model recognized by this element.

    The main task of the element is to produce / update view model for both query / URI parameters so it can be used by the URL editor to create final request URL value.


    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-url-params-editor

    In an html file

        <script type="module">
          import '@api-components/api-url-params-editor/api-url-params-editor.js';
          const editor = document.querySelector('api-url-params-editor');
          editor.onurivalue = (e) {
            console.log('URI values', e.detail.value);
          editor.onqueryvalue = (e) {
            console.log('Query values', e.detail.value);

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@api-components/api-url-params-editor/api-url-params-editor.js';
    class SampleElement extends PolymerElement {
      render() {
        return html`
      _queryValueChanged(e) {
        this.queryValues = e.detail.value;
      _uriValueChanged(e) {
        this.uriValues = e.detail.value;
      _pathModelChangeHandler(e) {
        this.pathViewModel = e.detail.value;
      _queryModelChangeHandler(e) {
        this.queryViewModel = e.detail.value;
    customElements.define('sample-element', SampleElement);

    Passing AMF data model

    The component does not directly interact with AMF model. It uses a view model generated by api-url-data-model. This element parses API spec to produce basic information about currently selected endpoint like path variables model, query parameters model, and base URI.

    Your UI has to provide a way to select an endpoint. You can use api-navigation element which renders API structure in a nav bar and dispatches selection event.

    In an html file

    <script type="module">
    import '@api-components/api-url-editor/api-url-editor.js';
    import '@api-components/api-url-params-editor/api-url-params-editor.js';
    import '@api-components/api-url-data-model/api-url-data-model.js';
      const api = await generateApiModel();
      const selectedEndpoint = 'amf://id#63'; // some ID from the AMF model for endpoint / operation
      const model = document.querySelector('api-url-data-model');
      model.amf = api; // This is required to compute ld+json keys!
      model.selected = selectedEndpoint;
      const urlEditor = document.querySelector('api-url-editor');
      urlEditor.baseUri = model.apiBaseUri;
      urlEditor.endpointPath = model.endpointPath;
      urlEditor.queryModel = model.queryModel;
      urlEditor.pathModel = model.pathModel;
      const editor = document.querySelector('api-url-params-editor');
      urlEditor.queryModel = model.queryModel;
      urlEditor.uriModel = model.pathModel;
      urlEditor.onquerymodel = (e) => {
        urlEditor.queryModel = e.detail.value;
      urlEditor.onurimodel = (e) => {
        urlEditor.pathModel = e.detail.value;


    git clone
    cd api-url-params-editor
    npm install

    Running the demo locally

    npm start

    Running the tests

    npm test


    npm i @api-components/api-url-params-editor

    DownloadsWeekly Downloads






    Unpacked Size

    115 kB

    Total Files


    Last publish


    • carowright
    • jarrodek
    • twoplustwoone
    • lbauret