{"id":22814581,"url":"https://github.com/kit-data-manager/inclde","last_synced_at":"2026-04-28T11:32:34.991Z","repository":{"id":197213629,"uuid":"698224551","full_name":"kit-data-manager/INCLDE","owner":"kit-data-manager","description":"INCLDE - Includable Linked Metadata Editor","archived":false,"fork":false,"pushed_at":"2024-02-05T03:27:26.000Z","size":508,"stargazers_count":0,"open_issues_count":15,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-07T08:48:56.626Z","etag":null,"topics":["client-side","editor","gui","inactive","json-ld","linked-data","web-component"],"latest_commit_sha":null,"homepage":"https://kit-data-manager.github.io/INCLDE/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kit-data-manager.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-09-29T12:45:00.000Z","updated_at":"2025-02-12T17:39:54.000Z","dependencies_parsed_at":"2023-11-09T13:40:21.615Z","dependency_job_id":"29f75c33-d11b-426a-9f7f-37ea0ff1f164","html_url":"https://github.com/kit-data-manager/INCLDE","commit_stats":null,"previous_names":["kit-data-manager/inclde"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2FINCLDE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2FINCLDE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2FINCLDE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2FINCLDE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kit-data-manager","download_url":"https://codeload.github.com/kit-data-manager/INCLDE/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246385415,"owners_count":20768672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["client-side","editor","gui","inactive","json-ld","linked-data","web-component"],"created_at":"2024-12-12T13:09:21.321Z","updated_at":"2026-04-28T11:32:34.595Z","avatar_url":"https://github.com/kit-data-manager.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# INCLDE – Includable Linked Data Editor\n\nINCLDE (spelled \"/ɪnˈkluːd/\", as \"include\") is a web component that allows editing of linked data. The goal is to allow easy integration into web-based applications.\n\n- [Demo](https://kit-data-manager.github.io/INCLDE/)\n- [NPM Package](https://www.npmjs.com/package/@kit-data-manager/inclde)\n\n## Installation\n\n```bash\nnpm install\n```\n\nTo start the dev server use the following command:\n```bash\nnpm start\n```\n\n## Embedding / including in to existing projects\n\nThe web component can be built using `npm run build` and after embedding the resulting files in to a website, INCLDE can be invoked like other web components. The components' documentation has a separate, [auto-generated readme file](./src/components/inclde-editor/readme.md). Example:\n\n```javascript\nfetch(\"/data/example.jsonld\")\n  .then((response) =\u003e response.json())\n  .then((data) =\u003e {\n    const editor = document.createElement(\"inclde-editor\");\n    editor.data = data;\n    editor.config = config;\n    editor.addEventListener('editorClosed', event =\u003e {\n      console.log('event', event.detail);\n      // Process return data further\n    })\n    document.body.appendChild(editor);\n  });\n```\n\nYou may also want to take a look at the [index.html example](./src/index.html), which is what you see when you run `npm start`.\n\n### Properties\n\n| Property              | Attribute | Description | Type               | Default     |\n| --------------------- | --------- | ----------- | ------------------ | ----------- |\n| `config` _(required)_ | `config`  |             | `object \\| string` | `undefined` |\n| `data` _(required)_   | `data`    |             | `object \\| string` | `undefined` |\n\n`data` defines the data that should be edited. It can be either a JSON object or a JSON-LD string.\n`config` defines the configuration of the editor. It can be either a JSON object or a JSON-LD string.\n\nAn example config showcasing all currently available functionality:\n```JSON\n{\n  \"title\": \"INCLDE Demo Instance\",\n  \"hideAttributesByDefault\": false,\n  \"allowNewAttributes\": true,\n  \"attributConfig\": [\n    {\n      \"onType\": \"http://schema.org/Comment\",\n      \"attributes\": [\n        {\n          \"name\": \"http://schema.org/image\",\n          \"readOnly\": true\n        }\n      ]\n    },\n    {\n      \"onId\": \"https://adhesivewombat.bandcamp.com/track/funky-sundays\",\n      \"attributes\": [\n        {\n          \"name\": \"http://schema.org/duration\",\n          \"hidden\": true\n        }\n      ]\n    }\n  ]\n}\n```\nAllowing specific attributes to be hidden or set to read only.\n\n### Events\n\n| Event          | Description                                                                                                                                                                  | Type                                                   |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |\n| `editorClosed` | Fired when the editor is closed with the save or cancel buttons. `event.detail` contains the edited data if the save button was clicked, undefined otherwise.                | `CustomEvent\u003cNodeObject \\| NodeObject[] \\| undefined\u003e` |\n\n## Custom element implementation\n\nCustom Elements provide a way to overwrite the way certain elements are rendered. This can be used to add custom functionality to the editor.\n\nFor this custom elements need to implement the `CustomElement` interface.\n\nHere a minimal example:\n\n```typescript\t\nimport { h } from '@stencil/core';\nimport { CustomElement } from './index';\n\nexport default class ExampleEl implements CustomElement {\n  public static id = 'http://custom-elements.definition/example';\n  public value: string = \"\";\n\n  private callback?: (value: any) =\u003e void;\n\n  constructor(valueObj: any, callback?: (value: any) =\u003e void) {\n    if (typeof valueObj['value'] === 'string') {\n      this.value = valueObj['value'];\n    } else {\n      // Error handling\n    }\n    this.callback = callback;\n  }\n\n  private onInput(event: InputEvent) {\n    if (event.target instanceof HTMLInputElement) {\n      this.value = event.target.value;\n\n      if (this.callback !== undefined) {\n        this.callback(this.value);\n      }\n    }\n  }\n\n  render() {\n    return \u003cinput value={this.value} onInput={this.onInput} /\u003e\n  }\n}\n```\n\n## License\n\nINCLDE (formerly lmd-editor) is licensed under MIT License. See [LICENSE](LICENSE) for more information.\n\nCurrently, the editor also makes use of icons from [Font Awesome](https://fontawesome.com) 6.4.0 ([License](https://fontawesome.com/license/free))\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit-data-manager%2Finclde","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkit-data-manager%2Finclde","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit-data-manager%2Finclde/lists"}