{"id":22297765,"url":"https://github.com/paulledemon/hover-preview","last_synced_at":"2025-07-29T01:33:08.365Z","repository":{"id":249426124,"uuid":"830406157","full_name":"PaulleDemon/Hover-Preview","owner":"PaulleDemon","description":"Preview on hover","archived":false,"fork":false,"pushed_at":"2024-09-05T11:48:24.000Z","size":2876,"stargazers_count":23,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-05T06:04:13.503Z","etag":null,"topics":["code","css","extension","hover-preview","html","html-preview","html5","javascript","live-preview","preview","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=FoxcraftTech.hoverpreview","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PaulleDemon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["PaulleDemon"],"buy_me_a_coffee":"artpaul"}},"created_at":"2024-07-18T08:02:05.000Z","updated_at":"2025-01-13T19:46:27.000Z","dependencies_parsed_at":"2024-07-26T18:18:19.348Z","dependency_job_id":"4e2fa9ab-1923-4c12-adaa-ac7a390e1de0","html_url":"https://github.com/PaulleDemon/Hover-Preview","commit_stats":null,"previous_names":["paulledemon/hover-preview"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/PaulleDemon/Hover-Preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulleDemon%2FHover-Preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulleDemon%2FHover-Preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulleDemon%2FHover-Preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulleDemon%2FHover-Preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PaulleDemon","download_url":"https://codeload.github.com/PaulleDemon/Hover-Preview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulleDemon%2FHover-Preview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267616582,"owners_count":24116155,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["code","css","extension","hover-preview","html","html-preview","html5","javascript","live-preview","preview","vscode","vscode-extension"],"created_at":"2024-12-03T17:51:17.285Z","updated_at":"2025-07-29T01:33:07.975Z","avatar_url":"https://github.com/PaulleDemon.png","language":"JavaScript","funding_links":["https://github.com/sponsors/PaulleDemon","https://buymeacoffee.com/artpaul","https://ko-fi.com/L3L612WN7K'"],"categories":[],"sub_categories":[],"readme":"# Hover preview 🚀 - VsCode extension [BETA] \n\n\u003cp\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/PaulleDemon/Hover-Preview/main/icons/hover-preview.png\" width=\"100\" height=\"100\" alt=\"preview\"\u003e\n\u003c/p\u003e\n\nThis is a simple vscode extension used for previewing your html elements while hovering.\nCurrently made for html files only.\n\n\u003e[!NOTE]\nThis is still in beta, currently this extension will create a temp file in your working directory to render the html (called `.hoverpreview.temp.html`), we'll soon change that. Please refer to [roadmap](roadmap.md)\n\n**You must wait for the extension to completely load to preview** \n\n![preview](https://raw.githubusercontent.com/PaulleDemon/Hover-Preview/main/documentation/images/preview.gif)\n\n## What is Hover preview?\n\nWe have all come across front-end codes that we don't understand because of lack of visual cues. Like the\none shown below\n\n\u003cp\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/PaulleDemon/Hover-Preview/main/documentation/images/code.png\" width=\"550\" height=\"350\" alt=\"preview\"\u003e\n\u003c/p\u003e\n\n\nNow it can become overwhelming at first glance if you have no prior experience in the CSS library or framework used in the code. So to make it easier Hover Preview provides you with a quick preview of what it the element would look like in the browser.\n\n![preview](https://raw.githubusercontent.com/PaulleDemon/Hover-Preview/main/documentation/images/preview.gif)\n\n## Why use Hover preview?\n1. Less toggling between Browser and VsCode.\\\n2. Get quick glance of the elements.\n3. Easier to learn new CSS frameworks.\n4. Easily understand other's code with visual preview, making it ideal learning tool.\n5. Save time.\n6. Improve productivity.\n\n## Features of Hover Preview 🌟\n1. Preview HTML pages on Hover.\n2. Preview Specific elements.\n3. Configure screen size.\n\n## Limitations\n* Currently only available for HTML files.\n* Cannot interact wth the preview.\n* Animations won't be played in preview.\n\n## Extension Settings\n\nSettings.json\n```json\n{\n    \"hoverPreview.previewSize\": { // changes the preview size on hover tooltip\n        \"width\": 200, // default size\n        \"height\": 200 // default size\n    },\n}\n\n```\n\n### Support open-source development?\nWant to support further development?\nYou can support my work on Ko-fi or BMC\n\n\u003ca href='https://ko-fi.com/L3L612WN7K' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\n## Roadmap 🗺️\n\nPlease refer to [roadmap](roadmap.md) \n\n\n### Extra\n\n* Oh! don't forget to 🌟 [star this repo](https://github.com/PaulleDemon/Hover-Preview) for updates.\n\n* Thanks for visiting Hover Preview, enjoy your free [landing page templates](https://github.com/PaulleDemon/landing-pages)\n\n\n**Enjoy!**\n\n---\n\n## License\nLicense held by Paul, Github: PaulleDemon, Dev.to: https://dev.to/paul_freeman\n\nThe source code is under AGPL license, this doesn't affect the end user. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulledemon%2Fhover-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulledemon%2Fhover-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulledemon%2Fhover-preview/lists"}