Configure and generate code snippet for custom element


000.6.02 years ago2 years agoMinified + gzip package size for @reallyland/really-code-configurator in KB



Configure and generate code snippet for custom element

Buy Me A Coffee tippin.me Follow me

Version lit-element Node version MIT License

Downloads Total downloads Packagephobia Bundlephobia

CircleCI Dependency Status

codebeat badge Codacy Badge Code of Conduct

Better element for the web

Table of contents



# Install via NPM
$ npm install @reallyland/really-code-configurator



import { PropertyValue } from '@reallyland/really-code-configurator';

const properties: PropertyValue[] = [
    name: 'propertyString',
    value: 'property',
    type: 'string',
    name: 'propertyNumber',
    value: 0,
    type: 'number',
    name: 'propertyBoolean',
    value: true,
    type: 'boolean',
    name: 'propertyWithSelectableOptions',
    value: 'option-1',
    type: 'string',
    options: [
        label: 'option-1',
        value: 'option-1',
        label: 'option-2',
        value: 'option-2',
        label: 'option-3',
        value: 'option-3',

const cssProperties: PropertyValue[] = [
    name: '--test-property-width',
    value: '2px',

export { properties, cssProperties };


    <script type="module">
      import '/path/to/test-property.js';
      import '/path/to/@reallyland/really-code-configurator.js';
      import { properties, cssProperties } from '/path/to/properties.config.js';

      const configuratorEl = document.createElement('.configurator');

      /** Load `properties` and `cssProperties` */
      if (configuratorEl) {
        configuratorEl.properties = properties;
        configuratorEl.cssProperties = cssProperties;

    <really-code-configurator class="configurator" customelement="test-property">

Browser compatibility

really-code-configurator works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera).

Heavily tested on the following browsers:

Name OS
Edge 17 Windows 10
Edge 15 Windows 10
Internet Explorer 11 Windows 10
Safari 10.1 Mac OS 10.12
Safari 9 Mac OS X 10.11
Firefox 62 (w/o native Shadow DOM) macOS Mojave (10.14)
Chrome 69 (WRE 2019) Windows 10

API Reference


Coming soon


MIT License © Rong Sen Ng (motss)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.