{"id":16152683,"url":"https://github.com/simonsiefke/vscode-html-preview","last_synced_at":"2025-04-06T23:26:53.070Z","repository":{"id":119811511,"uuid":"197039810","full_name":"SimonSiefke/vscode-html-preview","owner":"SimonSiefke","description":"Html Preview for VSCode","archived":false,"fork":false,"pushed_at":"2022-12-31T10:57:08.000Z","size":5996,"stargazers_count":6,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T05:28:49.844Z","etag":null,"topics":["html","html-preview","preview"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/SimonSiefke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-07-15T17:02:15.000Z","updated_at":"2024-02-14T23:58:20.000Z","dependencies_parsed_at":"2023-06-03T06:00:21.695Z","dependency_job_id":null,"html_url":"https://github.com/SimonSiefke/vscode-html-preview","commit_stats":null,"previous_names":[],"tags_count":92,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-html-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-html-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-html-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-html-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonSiefke","download_url":"https://codeload.github.com/SimonSiefke/vscode-html-preview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247566699,"owners_count":20959462,"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":["html","html-preview","preview"],"created_at":"2024-10-10T01:08:39.008Z","updated_at":"2025-04-06T23:26:53.058Z","avatar_url":"https://github.com/SimonSiefke.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![travis build](https://img.shields.io/travis/com/SimonSiefke/vscode-html-preview.svg?style=flat-square)](https://travis-ci.com/SimonSiefke/vscode-html-preview) [![Version](https://vsmarketplacebadge.apphb.com/version/SimonSiefke.html-preview.svg)](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.html-preview) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)\n\n# Html Preview for VSCode\n\n![demo](./demo.png)\n\n\u003c!-- TODO demo gif --\u003e\n\n\u003c!-- ## TODO\n\n- reload page when external resources (e.g. images, javascript) change --\u003e\n\n## Commands\n\n| Command                            | Keybinding   |\n| ---------------------------------- | ------------ |\n| Html Preview: Open                 | `ctrl+alt+p` |\n| Html Preview: Close Preview Server | none         |\n\n\u003c!-- TODO use child process for efficiency --\u003e\n\u003c!-- TODO implicit head body tbody tags --\u003e\n\n\u003c!-- autoreload extension: nodemon --watch **/dist/** --exec node scripts/update-extension.js --\u003e\n\n\u003c!-- TODO support insertion of element via javascript, preview insertions can be done by referencing beforeid and afterid --\u003e\n\u003c!-- TODO live js via chrome devtools api / firefox devtools api similar to lighttable/brackets with chrome --\u003e\n\n\u003c!-- TODO http caching --\u003e\n\n\u003c!-- TODO stop probably not necessary because we can just disconnect when there are no more open sockets (meaning the user has closed the browser and probably wants to close the preview anyway, also he can just reopen the preview) --\u003e\n\n\u003c!-- TODO when opening preview, open new files to the left --\u003e\n\n\u003c!-- TODO shtml --\u003e\n\u003c!-- TODO htm --\u003e\n\u003c!-- TODO proxy? --\u003e\n\u003c!-- TODO cors --\u003e\n\u003c!-- TODO element moves https://trello.com/c/yMmDFqdq/928-live-html-support-moves --\u003e\n\u003c!-- TODO better highlight position matching --\u003e\n\u003c!-- TODO create vscode.workspace.createfilesystemwatcher --\u003e\n\u003c!-- TODO pretty urls when opening, e.g. localhost:3000 instead of localhost:3000/index.html --\u003e\n\u003c!-- TODO figure out whats best when another application is blocking the port (killing it or using another port) --\u003e\n\u003c!-- TODO dispose listeners in live preview --\u003e\n\u003c!-- TODO test when index.html is created or deleted, same for related files --\u003e\n\u003c!-- TODO maybe use webworker when there is actually a lot of processing on the client --\u003e\n\u003c!-- TODO test when css is deleted/created --\u003e\n\u003c!-- TODO multiple files at the same time, only reload index.html and not about.html when index.html is changed --\u003e\n\u003c!-- TODO like brackets: when no html file is opened, find the closest html file and open it --\u003e\n\u003c!-- TODO move extension tests to html-preview-service --\u003e\n\u003c!-- TODO select text in editor when selected in browser --\u003e\n\u003c!-- TODO fix bug \u003cbody\u003e\n  \u003cul\u003e\n    \u003cli\u003elive edit\u003c/li\u003e\n    \u003cli\u003eanother one\u003c/li\u003e\n    \u003cli\u003e\u003c/li\u003e\n    \u003cli\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n  TabNine::live TabNine::an\n\n  \u003cbutton\u003e\n  this is tab nice\n  \u003cspan\u003e\n  this\n  is TabNine\n  \u003cul\u003e\n\n  \u003cli\u003eanother\u003c/li\u003e\n  \u003cli\u003e\u003c/li\u003e\n  \u003cli\u003e\u003c/li\u003e\n  \u003cli\u003e\u003c/li\u003e\n  \u003c/span\u003e\n  \u003c/button\u003e\n\u003c/body\u003e\n cannot start with invalid html--\u003e\n\u003c!-- TODO build badge should have same style as other badges --\u003e\n\n\u003c!-- TODO bug\n\u003ch1\u003ehello world\u003c/h1\u003e\n\nthis is live edit\n\ninsert \u003cp\u003e\u003c/p\u003e around text\nthen replace the p with h2\nnot working\n --\u003e\n\n\u003c!-- TODO bug insert ! press tab with emmet, shows $node is not defined --\u003e\n\u003c!-- TODO reload plugin not working when opening preview inside vscode --\u003e\n\u003c!-- TODO liveshare integration --\u003e\n\n\u003c!-- TODO bug\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  \u003cstyle\u003e\n    h1 {\n      color: red;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003csection\u003e\n  \u003ch1\u003ehello world 1\u003c/h1\u003e\n\u003c/section\u003e\n\n\u003cbutton\u003e\n  this is a button\n\u003c/button\u003e\n\n\u003cinput type=\"checkbox\" name=\"\" id=\"\" /\u003e\n\u003cinput type=\"checkbox\" name=\"\" id=\"\" /\u003e\n\u003cinput type=\"checkbox\" name=\"\" id=\"\" /\u003e\n\nhydration error\n --\u003e\n\u003c!-- TODO live update settings --\u003e\n\u003c!-- TODO styleguide: no function keyword, no this, no let, no classes, no export default, no more than 2 parameters --\u003e\n\u003c!-- TODO enable every strict option in typescript (initialization, no implicit any etc) --\u003e\n\n\u003c!-- TODO bug\n\n/* button {\n  --color: rgba(37, 23, 226, 0.808);\n  border: 2px solid var(--color);\n  border-radius: 10px;\n  padding: 20px;\n  background: transparent;\n  box-sizing: border-box;\n}\nbutton:hover {\n  background: var(--color);\n  color: white;\n  cursor: pointer;\n} */\n\n/* html,\nbody {\n  height: 100%;\n}\nbody {\n  margin: 0;\n  display: grid;\n  place-items: center;\n} */\n\nbutton,\np {\n  color: red;\n  padding: 20px;\n}\n\np {\n  /* box-sizing: border-box; */\n}\n\np{\n  padding: 40px;\n}\n\nhighlight in css not working with comment\n --\u003e\n\n\u003c!-- TODO keep highlight of html element if css is edited (better: highlight from css inside html)--\u003e\n\n\u003c!-- TODO fix highlight of borders --\u003e\n\u003c!-- TODO lots of tests for highlight etc --\u003e\n\u003c!-- TODO why is\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cp\u003e0\u003c/p\u003e\n\u003c/html\u003e\n\ninvalid? --\u003e\n\n\u003c!-- TODO dynamic html, e.g. http://bl.ocks.org/d3noob/8952219 --\u003e\n\n\u003c!-- TODO bug  --\u003e\n\n## Credits\n\nMuch of this project is based on the Live Preview feature by [Brackets](https://github.com/adobe/brackets)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsiefke%2Fvscode-html-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonsiefke%2Fvscode-html-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsiefke%2Fvscode-html-preview/lists"}