{"id":14962526,"url":"https://github.com/villy-p/vscode-webview-extension-svelte","last_synced_at":"2025-10-24T22:32:30.045Z","repository":{"id":251799138,"uuid":"837403515","full_name":"Villy-P/VSCode-Webview-Extension-Svelte","owner":"Villy-P","description":"A template repository to quickly make a Visual Studio Code Webview Extension using Svelte and Rollup","archived":false,"fork":false,"pushed_at":"2024-11-13T20:46:36.000Z","size":343,"stargazers_count":3,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T04:31:51.651Z","etag":null,"topics":["boilerplate","boilerplate-template","rollup","svelte","template","template-project","vscode","vscode-api","vscode-extension"],"latest_commit_sha":null,"homepage":"","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/Villy-P.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","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":"2024-08-02T22:34:51.000Z","updated_at":"2024-11-13T20:46:40.000Z","dependencies_parsed_at":"2024-09-12T08:35:59.583Z","dependency_job_id":null,"html_url":"https://github.com/Villy-P/VSCode-Webview-Extension-Svelte","commit_stats":{"total_commits":74,"total_committers":1,"mean_commits":74.0,"dds":0.0,"last_synced_commit":"ac90ce71e0b6eeb9dced5bbc6887694fd74dda88"},"previous_names":["villy-p/vscode-webview-extension-svelte"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villy-P%2FVSCode-Webview-Extension-Svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villy-P%2FVSCode-Webview-Extension-Svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villy-P%2FVSCode-Webview-Extension-Svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villy-P%2FVSCode-Webview-Extension-Svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Villy-P","download_url":"https://codeload.github.com/Villy-P/VSCode-Webview-Extension-Svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238043943,"owners_count":19407117,"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":["boilerplate","boilerplate-template","rollup","svelte","template","template-project","vscode","vscode-api","vscode-extension"],"created_at":"2024-09-24T13:29:54.458Z","updated_at":"2025-10-24T22:32:29.654Z","avatar_url":"https://github.com/Villy-P.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VSCode-Webview-Extension-Svelte\n\nA template repository to quickly make a Visual Studio Code Webview Extension using Svelte 5 and Rollup\n\nThis repo gives you everything you need to start making your own webview extensions using the power and reactivity of Svelte.\nIt automatically comes with everything you need, from components to CSS.\n\n## Startup\n\nYou can create a template repository by running `npx vscode-webview-extension-svelte-generator folder-name` in your terminal.\n\nAfter you create your repo, follow the install steps to get started.\nTo run your extension, you can run `npm run compile` to begin compiling the frontend and backend, and press `F5` to start the Extension enviroment.\n\nYou can find the extension by pressing `Ctrl-Shift-P` and navigating to `Hello World`.\n\nWhen you do make a change on the front or backend, use `Ctrl-R` on your Extension Environment to see the changes.\nYou can also close the webview page and reopen it using `Ctrl-Shift-P`.\n\nAfter that, you are good to go!\nRead the `Directory Composition` section to see where to find which files.\nRead the `Examples` section to see examples of what to do.\n\n## Directory Composition\n\n### Front End\n\nThis is your webview itself and all files pertaining to it:\n\n| File / Folder     | Use                                         |\n| ----------------- | ------------------------------------------- |\n| `src/main.ts`     | The base file for your Svelte Webview       |\n| `src/App.svelte`  | This is your webview page                   |\n| `src/css/`        | This folder holds all your CSS              |\n| `src/components/` | You can put all your Svelte components here |\n\nYou can put `ts` files that you use on the front end anywhere in the project directory EXCEPT the `src/extension` folder.\n\n### Back End\n\nThis is the VSCode Backend that will contain all files used by the backend.\n\n| File / Folder                | Use                                                       |\n| ---------------------------- | --------------------------------------------------------- |\n| `src/extension/extension.ts` | This is the base file for your extension.                 |\n| `src/extension/panel.ts`     | This is the class that handles the creation of the Panel. |\n| `src/extension/`             | Place all utility `ts` files here                         |\n\n## Additions\n\nVSCode-Webview-Extension-Svelte supports libraries like TailwindCSS, which you can add in the setup script.\n\nIf you want to add other popular libraries to your project, and did not do so in the setup script, go to [ADDITIONS.md](./ADDITIONS.md).\n\n## Examples\n\n### Sending data from the backend to front end\n\n`src/extension/extension.ts`\n\n``` ts\nimport * as vscode from 'vscode';\nimport { SveltePanel } from './panel';\n\nexport function activate(context: vscode.ExtensionContext) {\n let disposable = vscode.commands.registerCommand('extension-name.helloWorld', () =\u003e {\n  SveltePanel.render(\"showPanel\", \"Panel Name\", context.extensionUri);\n\n  SveltePanel.currentPanel?.post({\n   title: \"data-name\",\n   msg: \"This is a message from the backend\"\n  });\n });\n\n context.subscriptions.push(disposable);\n}\n\nexport function deactivate() {}\n```\n\n`src/App.svelte`\n\n``` html\n\u003cscript\u003e\n window.addEventListener(\"message\", (e) =\u003e {\n  if (e.data.title === \"data-name\")\n   console.log(e.data.msg);\n });\n\u003c/script\u003e\n\n\u003cp class=\"title\"\u003eHello, World!\u003c/p\u003e\n```\n\n## Contributing\n\nCheck out the [contributing guidelines](.github/CONTRIBUTING.md).\n\n## License\n\nVSCode Webview Extension Svelte is licensed under the [MIT](./LICENSE) license\n\n## Changelog\n\nView all upcoming and previous releases [here](./CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvilly-p%2Fvscode-webview-extension-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvilly-p%2Fvscode-webview-extension-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvilly-p%2Fvscode-webview-extension-svelte/lists"}