{"id":15103565,"url":"https://github.com/explosion/displacy-ent","last_synced_at":"2025-09-27T02:31:40.819Z","repository":{"id":57212946,"uuid":"69860526","full_name":"explosion/displacy-ent","owner":"explosion","description":":boom: displaCy-ent.js: An open-source named entity visualiser for the modern web","archived":true,"fork":false,"pushed_at":"2018-04-08T21:11:51.000Z","size":72,"stargazers_count":197,"open_issues_count":3,"forks_count":43,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-05-09T11:28:31.936Z","etag":null,"topics":["css","javascript","named-entities","natural-language-processing","nlp","spacy","visualization"],"latest_commit_sha":null,"homepage":"https://demos.explosion.ai/displacy-ent","language":"CSS","has_issues":false,"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/explosion.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}},"created_at":"2016-10-03T10:20:36.000Z","updated_at":"2024-04-02T05:42:07.000Z","dependencies_parsed_at":"2022-08-24T21:01:28.642Z","dependency_job_id":null,"html_url":"https://github.com/explosion/displacy-ent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explosion%2Fdisplacy-ent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explosion%2Fdisplacy-ent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explosion%2Fdisplacy-ent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explosion%2Fdisplacy-ent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/explosion","download_url":"https://codeload.github.com/explosion/displacy-ent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219871850,"owners_count":16554459,"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":["css","javascript","named-entities","natural-language-processing","nlp","spacy","visualization"],"created_at":"2024-09-25T19:40:31.831Z","updated_at":"2025-09-27T02:31:35.521Z","avatar_url":"https://github.com/explosion.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://explosion.ai\"\u003e\u003cimg src=\"https://explosion.ai/assets/img/logo.svg\" width=\"125\" height=\"125\" align=\"right\" /\u003e\u003c/a\u003e\n\n# displaCy ENT: A modern named entity visualiser\n\n\u003e ⚠️ **As of v2.0.0, the displaCy visualizers are now integrated into\n\u003e the core library. [See here](https://spacy.io/usage/visualizers) for more \n\u003e details on how to visualize a `Doc` object from within spaCy. We're also\n\u003e working on a new suite of tools for serving and testing spaCy models. The\n\u003e code of the standalone visualizers will still be available on GitHub, just\n\u003e not actively maintained.**\n\nData exploration is an important part of effective named entity recognition because systems often make common unexpected errors that are easily fixed once identified. Despite the apparent simplicity of the task, automatic named entity recognition systems still make many errors, unless trained on examples closely tailored to the use-case. Check out the [demo](https://demos.explosion.ai/displacy-ent) to visualise [spaCy](https://spacy.io)'s guess at the named entities in the document. You can filter the displayed types, to only show the annotations you're interested in.\n\nTo read more about displaCy-ent.js, check out the [blog post](https://explosion.ai/blog/displacy-ent-named-entity-visualizer).\n\n[![npm](https://img.shields.io/npm/v/displacy-ent.svg)](https://www.npmjs.com/package/displacy-ent)\n\n## Run the demo\n\nThis demo is implemented in [Jade (aka Pug)](https://www.jade-lang.org), an extensible templating language that compiles to HTML, and is built or served by [Harp](https://harpjs.com). To serve it locally on [http://localhost:9000](http://localhost:9000), simply run:\n\n```bash\nsudo npm install --global harp\ngit clone https://github.com/explosion/displacy-ent\ncd displacy-ent\nharp server\n```\n\nThe demo is written in ECMAScript 6. For full, cross-browser compatibility, make sure to use a compiler like [Babel](https://github.com/babel/babel). For more info, see this [compatibility table](https://kangax.github.io/compat-table/es6/).\n\n## Using displacy-ent.js\n\nTo use displaCy ENT in your project, include [`displacy-ent.js`](assets/js/displacy-ent.js) from GitHub or via npm:\n\n```bash\nnpm install displacy-ent\n```\n\nThen initialize a new instance specifying the API and settings:\n\n```javascript\nconst displacy = new displaCyENT('http://localhost:8000', {\n    container: '#displacy',\n    defaultText: 'When Sebastian Thrun started working on self-driving cars at Google in 2007, few people outside of the company took him seriously.',\n    defaultEnts: ['person', 'org', 'date']\n});\n```\n\nOur service that produces the input data is open source, too. You can find it at [spacy-services](https://github.com/explosion/spacy-services).\n\nThe following settings are available:\n\n| Setting | Description | Default |\n| --- | --- | --- |\n| **container** | element to display text in, can be any query selector | `#displacy` |\n| **defaultText** | text used if displaCy ENT is run without text specified | `'When Sebastian Thrun started working on self-driving cars at Google in 2007, few people outside of the company took him seriously.'` |\n| **defaultModel** | model used if displaCy ENT is run without model specified | `'en'` |\n| **defaultEnts** | array of entities highlighted in text | `['person', 'org', 'gpe', 'loc', 'product']` |\n| **onStart** | function to be executed on start of server request | `false` |\n| **onSuccess** | callback function to be executed on successful server response | `false` |\n| **onRender** | callback function to be executed when visualisation has rendered | `false` |\n| **onError** | function to be executed if request fails | `false` |\n\n## Visualising Entities\n\nThe `parse(text, model, ents)` method renders a text for a given set of entities in the container.\n\n```javascript\nconst text = 'When Sebastian Thrun started working on self-driving cars at Google in 2007, few people outside of the company took him seriously.';\nconst model = 'en';\nconst ents = ['person', 'org', 'date'];\n\ndisplacy.parse(text, model, ents);\n```\n\n## Rendering Entities Manually\n\nAlternatively, you can use `render()` to manually render a text and its entity spans for a given set of entities:\n\n```javascript\nconst text = 'When Sebastian Thrun started working on self-driving cars at Google in 2007, few people outside of the company took him seriously.';\nconst spans = [ { end: 20, start: 5, type: \"PERSON\" }, { end: 67, start: 61, type: \"ORG\" }, { end: 75, start: 71, type: \"DATE\" } ];\nconst ents = ['person', 'org', 'gpe', 'loc', 'product'];\n\ndisplacy.render(text, spans, ents);\n```\n## How it works\n\ndisplaCy ENT uses only the `\u003cmark\u003e` element with data attributes and custom CSS styling. No additional, visible content or markup is added to your input text and no JavaScript is required to display the entities.\n\nHere's an example of the markup:\n\n```html\n\u003cdiv class=\"entities\"\u003e\n    When \u003cmark data-entity=\"person\"\u003eSebastian Thrun\u003c/mark\u003e started working on self-driving cars at\n    \u003cmark data-entity=\"org\"\u003eGoogle\u003c/mark\u003e in \u003cmark data-entity=\"date\"\u003e2007\u003c/mark\u003e, few people outside of the\n    company took him seriously.\n\u003c/div\u003e\n```\n\nAnd here is the CSS it needs to display the entity labels:\n\n```css\n.entities {\n    line-height: 2;\n}\n\n[data-entity] {\n    padding: 0.25em 0.35em;\n     margin: 0px 0.25em;\n     line-height: 1;\n     display: inline-block;\n     border-radius: 0.25em;\n     border: 1px solid;\n}\n\n[data-entity]::after {\n    box-sizing: border-box;\n    content: attr(data-entity);\n    font-size: 0.6em;\n    line-height: 1;\n    padding: 0.35em;\n    border-radius: 0.35em;\n    text-transform: uppercase;\n    display: inline-block;\n    vertical-align: middle;\n    margin: 0px 0px 0.1rem 0.5rem;\n}\n\n[data-entity][data-entity=\"person\"] {\n    background: rgba(166, 226, 45, 0.2);\n    border-color: rgb(166, 226, 45);\n}\n\n[data-entity][data-entity=\"person\"]::after {\n    background: rgb(166, 226, 45);\n}\n\n[data-entity][data-entity=\"org\"] {\n    background: rgba(67, 198, 252, 0.2);\n    border-color: rgb(67, 198, 252);\n}\n\n[data-entity][data-entity=\"org\"]::after {\n    background: rgb(67, 198, 252);\n}\n\n[data-entity][data-entity=\"date\"] {\n    background: rgba(47, 187, 171, 0.2);\n    border-color: rgb(47, 187, 171);\n}\n\n[data-entity][data-entity=\"date\"]::after {\n    background: rgb(47, 187, 171);\n}\n```\n\nEntity labels are taken from the `data-entity` attribute and are rendered after the span as a CSS pseudo element.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexplosion%2Fdisplacy-ent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexplosion%2Fdisplacy-ent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexplosion%2Fdisplacy-ent/lists"}