{"id":29017820,"url":"https://github.com/localnerve/editable-object","last_synced_at":"2026-03-11T06:32:38.281Z","repository":{"id":298363366,"uuid":"999763436","full_name":"localnerve/editable-object","owner":"localnerve","description":"An editable object web component ","archived":false,"fork":false,"pushed_at":"2026-02-19T14:34:04.000Z","size":311,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-19T17:57:04.018Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/localnerve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"localnerve","custom":["https://www.paypal.com/ncp/payment/DHCB5GUYMGX5U","https://www.paypal.com/donate/?hosted_button_id=U98LEKAK7DXML"]}},"created_at":"2025-06-10T18:44:30.000Z","updated_at":"2026-02-19T14:35:42.000Z","dependencies_parsed_at":"2025-06-10T19:23:36.647Z","dependency_job_id":"1229449c-8883-4e0d-9335-580dfce90d73","html_url":"https://github.com/localnerve/editable-object","commit_stats":null,"previous_names":["localnerve/editable-object"],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/localnerve/editable-object","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Feditable-object","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Feditable-object/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Feditable-object/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Feditable-object/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/localnerve","download_url":"https://codeload.github.com/localnerve/editable-object/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Feditable-object/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30373477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-25T23:07:04.360Z","updated_at":"2026-03-11T06:32:38.242Z","avatar_url":"https://github.com/localnerve.png","language":"JavaScript","funding_links":["https://github.com/sponsors/localnerve","https://www.paypal.com/ncp/payment/DHCB5GUYMGX5U","https://www.paypal.com/donate/?hosted_button_id=U98LEKAK7DXML"],"categories":[],"sub_categories":[],"readme":"# editable-object\n[![npm version](https://badge.fury.io/js/%40localnerve%2Feditable-object.svg)](http://badge.fury.io/js/%40localnerve%2Feditable-object)\n\n\u003e A small, fast, no-dependency, editable object webcomponent.\n\n## Summary\n\nA native web component for an editable object that allows a user to edit it's values, add or remove key/value pairs. JSON values only.  \nNon-browser module exports build helpers (for building CSP rules, etc).\n\nCan be a convenient 'todo' app to test data update and mutation on the front end with the least additional ceremony.\n\n## Web Details\n  + ~11k full, ~3k gzip\n\n## Events\n\nThis web component issues a 'changed' CustomEvent when an object property is added, edited, or removed. The format of the `event.detail` is as follows:\n\n```\n{\n  action: 'add' | 'edit' | 'remove',\n  key: '\u003cthe property key name\u003e',\n  previous: '\u003cthe previous value, null if action: 'add'\u003e',\n  new: '\u003cthe new value, null if action: 'remove'\u003e'\n}\n```\n\n## Attributes (and Properties)\n\n* `object` - *Optional*. The initial object to edit - Must be a JSON stringified object. Can be added later without JSON stringification via the javascript property `object`.\n\n\u003e Property name is also `object`.\n\n* `add-property-placeholder` - *Optional*. The text that prompts a user to add a new property to the object. Defaults to 'Add new property in key:value format'.\n\n  \u003e Property name is `addPropertyPlaceholder`.\n\n* `disable-edit` - *Optional*. Disallow the editing functions. Makes this component a read-only view of the object.\n\n  \u003e Property name is `disableEdit`.\n\n## Named Slots\n\n* `\"loading\"` - *Optional*. A named slot you can use to bring in content to display during loading. Hidden after initial object parse or later when object is set.\n\n## Javascript Public Properties and Methods\n\n* `object` **Property** - Assign a javascript `Object` to set the component's internals for editing. Any existing object is replaced. JSON compatible properties only (string, number, boolean, array, object, null).\n\n* `addPropertyPlaceholder` **Property** - Assign a prompt to show the user in the new property/value input box to override the default 'Add new property in key:value format'.\n\n* `disableEdit` **Property** - Assign to true to make the control read-only and disallow any editing.\n\n* `mergeObject(newObject)` **method** - Call to merge more properties into the underlying object under edit.\n\n## Overridable CSS Variables\n\n* `--eo-min-width` - The min-width for the component. Defaults to 300px.\n* `--eo-bg-color` - The overall control background color. Defaults to #fafafa.\n* `--eo-border-radius` - The border-radius of the control. Defaults to 4px.\n* `--eo-border-focused-color` - The color of the control border when focused. Defaults to #444.\n* `--eo-border-defocused-color` - The color of the control border when not focused. Defaults to #aaa.\n* `--eo-item-selected-bg-color` - The background color of the property list item when selected. Defaults to #999.\n* `--eo-item-selected-color` - The foreground text color of the property list item when selected. Defaults to #222.\n* `--eo-item-selected-border-radius` - The border-radius of the item selection box. Defaults to 4px.\n* `--eo-item-hover-border-width` - The hover border width. Defaults to 1px.\n* `--eo-item-hover-border-color` - The hover border color. Defaults to #ddd.\n* `--eo-item-hover-border-radius` - The border-radius of the item hover box. Defaults to 4px.\n* `--eo-icon-color` - The color of the toolbar button icons. Defaults to #444.\n* `--eo-add-new-icon-color` - The color of the 'add new property' toolbar button icon. Defaults to #444.\n* `--eo-input-focus-outline-color` - The color of the focus ring on the input boxes. Defaults to #26b.\n* `--eo-input-focus-outline-width`- The width of the focus ring on the input boxes. Defaults to 1px.\n* `--eo-input-focus-outline-style` - The style of the focus ring on the input boxes. Defaults to 'auto'.\n* `--eo-input-border-color` - The border color of 'add' and 'edit' input boxes. Defaults to #bbb.\n* `--eo-input-bg-color` - The background color of input controls. Defaults to #444.\n* `--eo-input-color` - The foreground text color of input controls. Defaults to #eee.\n* `--eo-input-font-family` - The font family of input controls. Defaults to 'sans-serif'.\n* `--eo-input-placeholder-color` - The foreground text color of input placeholder text. Defaults to #aaa.\n\n\n## Usage Example\n\n```html \n  \u003ceditable-object object=\"{'property1':'value1','property2':'value2'}\" add-property-placeholder=\"Add property in key:value format\"\u003e\u003c/editable-object\u003e\n```\nSee [The test reference](https://github.com/localnerve/editable-object/blob/master/test/fixtures/index.html) for another usage example, run/play with the test reference with `npm run test:server`.\n\n## Non-browser Exports\n\nThe non-browser version of the module exports methods to help with builds.\n\n### {Promise} getEditableObjectCssText()\n\nAsynchronously gets the raw shadow css text.  \nUseful for computing the hash for a CSP style rule.  \nReturns a Promise that resolves to the full utf8 string of css text.\n\n## License\n\nLocalNerve [BSD-3-Clause](https://github.com/localnerve/editable-object/blob/master/LICENSE.md) Licensed\n\n## Contact\n\ntwitter: @localnerve\nemail: alex@localnerve.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocalnerve%2Feditable-object","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flocalnerve%2Feditable-object","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocalnerve%2Feditable-object/lists"}