{"id":20513500,"url":"https://github.com/microwebstacks/svelte-examples","last_synced_at":"2025-08-08T15:52:04.318Z","repository":{"id":162853168,"uuid":"606689058","full_name":"MicroWebStacks/svelte-examples","owner":"MicroWebStacks","description":"examples with svelte","archived":false,"fork":false,"pushed_at":"2023-07-17T17:44:31.000Z","size":152,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T14:22:12.523Z","etag":null,"topics":["netlify-deployment","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/MicroWebStacks.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,"governance":null},"funding":{"github":null,"patreon":null,"open_collective":"micro-web-stacks","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-02-26T09:01:03.000Z","updated_at":"2023-02-26T17:19:39.000Z","dependencies_parsed_at":"2023-09-26T01:43:27.250Z","dependency_job_id":null,"html_url":"https://github.com/MicroWebStacks/svelte-examples","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":"0.038461538461538436","last_synced_commit":"f17d5ad96938cfb1b83d83ca9282573e2820e2f7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MicroWebStacks%2Fsvelte-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MicroWebStacks%2Fsvelte-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MicroWebStacks%2Fsvelte-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MicroWebStacks%2Fsvelte-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MicroWebStacks","download_url":"https://codeload.github.com/MicroWebStacks/svelte-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242117717,"owners_count":20074438,"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":["netlify-deployment","svelte","sveltekit"],"created_at":"2024-11-15T21:11:29.339Z","updated_at":"2025-03-05T23:13:51.211Z","avatar_url":"https://github.com/MicroWebStacks.png","language":"Svelte","readme":"# svelte-examples\n\nSimple examples with Svelte Kit showing common web design patterns, with focus on server and client states management and synchronization.\n\n# 01_basics\n\nbasic example with home server rendered page and a prerendered page\n\nlive demo : https://svelte-basics.netlify.app/\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/6e5744d9-f70d-48af-b7ff-908415431a51/deploy-status)](https://svelte-basics.netlify.app/)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/MicroWebStacks/svelte-examples/tree/main/01_basics)\n[![open in Gitpod](./media/gitpod.svg)](https://gitpod.io/?on=gitpod#https://github.com/MicroWebStacks/svelte-examples/tree/main/01_basics)\n\n\n# 02_ssr-counter\n\nglobal server counter, keep state on page reload as long as the same instance is running. All clients will increment the same counter.\n\n\n* Sequence\n\n\u003cimg src=\"./media/02_ssr-counter-sequence.drawio.svg\" width=\"500\"\u003e\n\n* Project files\n\n\u003cimg src=\"./media/02_ssr-counter.drawio.svg\" width=\"500\"\u003e\n\n\n\nlive demo : https://svelte-ssr-counter.netlify.app/\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/71157122-a8d8-4bdf-92ee-7c000f77991d/deploy-status)](https://svelte-ssr-counter.netlify.app/)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/MicroWebStacks/svelte-examples/tree/main/02_ssr-counter)\n[![open in Gitpod](./media/gitpod.svg)](https://gitpod.io/?on=gitpod#https://github.com/MicroWebStacks/svelte-examples/tree/main/02_ssr-counter)\n\n\n# 03_server-cookie-counter\n\ncouter saved as a cookie, fetched, incremented and updated by the server\n\n\u003cimg src=\"./media/03_server-cookie-counter.drawio.svg\" width=\"500\"\u003e\n\nlive demo : https://svelte-cookie-counter.netlify.app/\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/12e511dd-b988-4c8a-a84f-0db3651889e0/deploy-status)](https://svelte-cookie-counter.netlify.app/)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/MicroWebStacks/svelte-examples/tree/main/03_server-cookie-counter)\n[![open in Gitpod](./media/gitpod.svg)](https://gitpod.io/?on=gitpod#https://github.com/MicroWebStacks/svelte-examples/tree/main/03_server-cookie-counter)\n\n# 04_client-counters\n\nclassical front end Cards counters. Each Card has a counter variable, all client side, resets on page reload, reactive DOM assignment.\n\nlive demo : https://svelte-client-counters.netlify.app/\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/e24c6238-9f4e-48cc-9391-f215fcd36c9a/deploy-status)](https://svelte-client-counters.netlify.app/)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/MicroWebStacks/svelte-examples/tree/main/04_client-counters)\n[![open in Gitpod](./media/gitpod.svg)](https://gitpod.io/?on=gitpod#https://github.com/MicroWebStacks/svelte-examples/tree/main/04_client-counters)\n\n# 05_sse-counter\n\nSSE: Server Sent Events. global var using a timer and Emitter.\n\nServer keeps couter state. Reloading the page has no effect on the counter states which just keeps counting independently.\n\nThis example is using both load functions on server and on client.\n\n* Notes\n\nrequires Node18 Node18 for ReadableStream()\n\nnot serverless compatible\n\n* Sequence\n\n\u003cimg src=\"./media/05_sse-counter-sequence.drawio.svg\" width=\"500\"\u003e\n\n* Project files\n\n\u003cimg src=\"./media/05_sse-counter.drawio.svg\" width=\"700\"\u003e\n\n[![open in Gitpod](./media/gitpod.svg)](https://gitpod.io/?on=gitpod#https://github.com/MicroWebStacks/svelte-examples/tree/main/05_sse-counter)\n\n# 06_markdown\n\nsimple example with markdown rendering\n","funding_links":["https://opencollective.com/micro-web-stacks"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrowebstacks%2Fsvelte-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrowebstacks%2Fsvelte-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrowebstacks%2Fsvelte-examples/lists"}