{"id":13510158,"url":"https://github.com/typecode/typester","last_synced_at":"2025-12-31T01:03:18.300Z","repository":{"id":30177395,"uuid":"108893528","full_name":"typecode/typester","owner":"typecode","description":":black_nib: A WYSIWYG that gives you predictable and clean HTML","archived":false,"fork":false,"pushed_at":"2023-01-03T21:05:15.000Z","size":7453,"stargazers_count":45,"open_issues_count":33,"forks_count":2,"subscribers_count":9,"default_branch":"devel","last_synced_at":"2025-05-03T23:01:43.532Z","etag":null,"topics":["awesome","awesome-editor","awesome-text-editor","clean","es6","html","html-editor","html-text-editor","javascript","javascript-text-editor","js-text-editor","medium-editor","npm","rich-text-editor","text-editor","typester","wysiwyg","wysiwyg-editor","wysiwyg-js-editor","yarn"],"latest_commit_sha":null,"homepage":"https://typecode.github.io/typester/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/typecode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-30T18:44:45.000Z","updated_at":"2024-12-20T04:46:04.000Z","dependencies_parsed_at":"2023-01-14T16:30:36.527Z","dependency_job_id":null,"html_url":"https://github.com/typecode/typester","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/typecode%2Ftypester","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typecode%2Ftypester/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typecode%2Ftypester/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typecode%2Ftypester/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typecode","download_url":"https://codeload.github.com/typecode/typester/tar.gz/refs/heads/devel","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252826872,"owners_count":21810196,"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":["awesome","awesome-editor","awesome-text-editor","clean","es6","html","html-editor","html-text-editor","javascript","javascript-text-editor","js-text-editor","medium-editor","npm","rich-text-editor","text-editor","typester","wysiwyg","wysiwyg-editor","wysiwyg-js-editor","yarn"],"created_at":"2024-08-01T02:01:26.542Z","updated_at":"2025-12-31T01:03:18.270Z","avatar_url":"https://github.com/typecode.png","language":"JavaScript","readme":"# Typester ([typecode.github.io/typester](https://typecode.github.io/typester))\nA simple to use WYSIWYG text editor inspired by Medium and Medium Editor that gives you clean and predictable HTML from your user's input.\n\n- **Single file import (batteries included):**\n   No need to import separate stylesheets and additional dependencies. Typester comes with everything it needs rolled into one JS file.\n- **Engineered for modern JS modules**\n   Typester has been created using ES6+ JavaScript module patterns which means you need only import it and instantiate it. If you still prefer \u0026lt;script\u0026gt; imports that's fine too Typester will bind itself to the global scope allowing you to `new window.Typester({ /* options */ })`.\n- **Minimal DOM footprint**\n   It wont clutter your beautifully laid out markup with multiple DOM injections for each editor instance. Need multiple editors on a single page? No problem, typester will inject single instances of its DOM requirements which will be shared between the editors.\n- **Pure XSS-free DOM powered by [DOMPurify](https://github.com/cure53/DOMPurify)**\n   Typester, thanks to the awesome power of DOMPurify, will make sure that the HTML you receive is sanitized against XSS exploits.\n\n---\n#### Try out the [DEMO](https://typecode.github.io/typester/#demo)\n---\n\n### Installation\nRight now Typester is only available via npm. We may look into offering CDN hosted options and/or downloadable and self-hostable options. But, for now, you can:\n```\nnpm install typester-editor\n```\nor for the yarn folks:\n```\nyarn add typester-editor --save\n```\n\n### Usage\nSetting up Typester on your page is as easy as:\n```\nimport Typester from 'typester-editor'\n\nconst typesterInstance = new Typester({ el: document.querySelector('[contenteditable]') }) // Where document.querySelector(...) is a single DOM element.\n\n// If you need to tear down for any reason:\ntypesterInstance.destroy();\n```\n\n### Configuration\nYou can configure the formatters available for a specific typester instance in two ways:\n\n1. When you instatiate a Typester instance via the custom configs option:\n\n```\nnew Typester({\n    el: document.querySelector('[contenteditable]'),\n    configs: {\n        toolbar: {\n            buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']\n        },\n\n        styles: {\n          colors: {\n            flyoutBg: 'rgb(32, 31, 32)',\n            menuItemIcon: 'rgb(255, 255, 255)',\n            menuItemHover: 'rgb(0, 174, 239)',\n            menuItemActive: 'rgb(0, 156, 215)'\n          }\n        }\n    }\n});\n```\n\n2. By using a data attribute on the editable container\n```\n\u003cdiv contenteditable='true' data-toolbar-buttons='[\"bold\", \"italic\", \"h1\", \"h2\", \"orderedlist\", \"unorderedlist\", \"quote\", \"link\"]'\u003e\u003c/div\u003e\n```\n\nThe options available for the toolbar buttons are:\n- Inline formatters: `bold`, `italic`\n- Headers: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`\n- Lists: `orderedlist`, `unorderedlist`\n- Blockquotes: `quote`\n- Links: `link`\n\n### License\nTypester is released under the MIT license.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n\n\n---\n\n\n\n# Contributing\nIf you want to contribute to this project we welcome your input.\n\nYou can either:\n- Submit an issue / feature request which would help us greatly in figuring out what all this package needs to do\n- Resolve an already listed issue\n- Submit a tweak or new feature\n\n### Submit an issue / feature request\nPlease feel free to head over the our [Issues page](https://github.com/typecode/typester/issues)\nand submit your issue / feature request.\n\n### Resolve an issue / submit a tweak or new feature\n1. Fork this repo\n    1. See below for instructions on how to setup local dev\n2. Create your feature branch (`git checkout -b new-awesome-feature`)\n3. Make sure all tests pass\n    1. If you have added a new feature, make sure there is a test for it\n    2. Run the following:\n       `~\u003e yarn test_unit` (for unit tests) \u0026 `~\u003eyarn test_e2e` (end-to-end tests)\n    3. If you have changed the codebase in a way that requires the tests to be updated\n       please do so.\n4. Update the documentation if you've added any publicly accessible methods or options.\n5. Commit your changes as you would usually (`git add -i`, add changes, `git commit -m \"Succinct description of change\"`)\n6. Push to your feature branch (`git push origin new-awesome-feature`)\n7. Create a new pull request.\n\n### Setup local dev environment\nInstall all the node modules\n```\n~\u003e yarn\n```\n\n### Run build scripts\nFor a one time build\n```\n~\u003e yarn build\n```\nFor a continuous reactive build that watches for changes\n```\n~\u003e yarn watch\n```\n\n### Run the dev server\n```\n~\u003e yarn dev-server\n```\nYou should then be able to navigate your browser to:\n```\nhttp://localhost:9000\n```\n\n### Run the tests\n**Make sure you build first**\n\nUnit tests (Karma \u0026 Jasmine)\n```\n~\u003e yarn test_unit\n```\n\ne2e tests (nightwatch)\n```\n~\u003e yarn test_e2e\n```\n\nall tests (unit \u0026 e2e)\n```\n~\u003e yarn test\n```\n\n### Build and read the developer docs\nFor a once off build:\n```\n~\u003e yarn docs\n```\n\nFor a continuous file change reactive build\n```\n~\u003e yarn docs_watch\n```\n\nThen, to read the docs:\n```\n~\u003e yarn docs_server\n```\n\nAnd point you browser to:\n```\nhttp://localhost:9001\n```\n","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects","awesome"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypecode%2Ftypester","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypecode%2Ftypester","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypecode%2Ftypester/lists"}