{"id":22194570,"url":"https://github.com/offroaders123/num-text","last_synced_at":"2025-07-08T04:04:34.382Z","repository":{"id":48593391,"uuid":"278525713","full_name":"Offroaders123/Num-Text","owner":"Offroaders123","description":"A simple text editor Web Component for the browser!","archived":false,"fork":false,"pushed_at":"2025-04-27T05:25:35.000Z","size":140,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T06:00:53.472Z","etag":null,"topics":["desktop","editor","javascript","mobile","text-editor","vanilla-javascript","web-components"],"latest_commit_sha":null,"homepage":"https://npm.im/@stedit/num-text","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/Offroaders123.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":"2020-07-10T03:08:19.000Z","updated_at":"2024-10-11T22:59:12.000Z","dependencies_parsed_at":"2023-02-12T19:30:41.581Z","dependency_job_id":null,"html_url":"https://github.com/Offroaders123/Num-Text","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Offroaders123/Num-Text","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Offroaders123%2FNum-Text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Offroaders123%2FNum-Text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Offroaders123%2FNum-Text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Offroaders123%2FNum-Text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Offroaders123","download_url":"https://codeload.github.com/Offroaders123/Num-Text/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Offroaders123%2FNum-Text/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263432372,"owners_count":23465577,"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":["desktop","editor","javascript","mobile","text-editor","vanilla-javascript","web-components"],"created_at":"2024-12-02T13:13:28.735Z","updated_at":"2025-07-08T04:04:34.335Z","avatar_url":"https://github.com/Offroaders123.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Num Text\n\n[![npm](https://img.shields.io/npm/v/@stedit/num-text.svg)](https://www.npmjs.com/package/@stedit/num-text)\n[![downloads](https://img.shields.io/npm/dm/@stedit/num-text.svg)](https://www.npmjs.com/package/@stedit/num-text)\n\nA simple Web Component that adds line numbers and syntax highlighting to the default textarea element!\n\nThere are already plenty of code editors out there made for the browser, like [CodeMirror](https://codemirror.net) or [Monaco Editor](https://microsoft.github.io/monaco-editor), but they had more features than what I needed for my own projects, the main one being [Smart Text Editor](https://stedit.app). I decided to go ahead and make my own!\n\n## Getting Started\nThanks to the powerful [Web Components API](https://developer.mozilla.org/en-US/docs/Web/Web_Components), it's possible to create your own HTML elements that abstract away in-depth functionality that may otherwise be hard to work with manually. No need to import any stylesheets, or make any JavaScript calls. Just import the component's source into your page, and let the browser handle the rest!\n\n### Creating a Num Text element\nTo use a `\u003cnum-text\u003e` element in your own page, follow the steps written below:\n\n1. Add the component's script tag to the `\u003chead\u003e` of your page. This will register the component as a custom element that you will be able to use in your HTML and JavaScript.\n\n    ```html\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@stedit/num-text/dist/index.min.js\"\u003e\u003c/script\u003e\n    ```\n\n2. Add a `\u003cnum-text\u003e` element to the page using any of the ways you would for a default HTML element. Now you are ready to start editing!\n\n    ```html\n    \u003c!-- Add it directly to your HTML --\u003e\n    \u003cnum-text\u003e\u003c/num-text\u003e\n    ```\n    ```javascript\n    /* Or create it with JavaScript */\n    const editor = document.createElement(\"num-text\");\n    ```\n\n### Styling a Num Text element\nChanging the default styles of a `\u003cnum-text\u003e` element is fairly simple! Check out how to customize each part of the component's appearance:\n\n```html\n\u003c!-- Component structure --\u003e\n\n\u003cnum-text\u003e\n  \u003c!-- #shadow-root (open) --\u003e\n\n    \u003cstyle num-text-theme=\"vanilla-layout\" num-text-theme-type=\"user-agent\"\u003e\n      /* Minimum default component styles */\n    \u003c/style\u003e\n\n    \u003cstyle num-text-theme=\"vanilla-appearance\" num-text-theme-type=\"any\"\u003e\n      /* Additional appearance styles */\n    \u003c/style\u003e\n\n    \u003cstyle num-text-theme=\"vanilla-highlighting\" num-text-theme-type=\"syntax-highlight\"\u003e\n      /* Num Text's vanilla Prism theme styles */\n    \u003c/style\u003e\n\n    \u003cdiv part=\"container\"\u003e\n\n      \u003col part=\"gutter\"\u003e\n        \u003cli part=\"line-number\"\u003e\n          \u003c!--\n            ::before (Visible line number and it's surrounding padding)\n          --\u003e\n        \u003c/li\u003e\n      \u003c/ol\u003e\n\n      \u003cdiv part=\"content\"\u003e\n        \u003cpre part=\"syntax\"\u003e\n          \u003c!-- Prism syntax highlighting populates here --\u003e\n        \u003c/pre\u003e\n        \u003ctextarea part=\"editor\"\u003e\u003c/textarea\u003e\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n\n\u003c/num-text\u003e\n```\n\n*More coming soon!*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foffroaders123%2Fnum-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foffroaders123%2Fnum-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foffroaders123%2Fnum-text/lists"}