svelte-examples
Simple examples with Svelte Kit showing common web design patterns, with focus on server and client states management and synchronization.
01_basics
basic example with home server rendered page and a prerendered page
live demo : https://svelte-basics.netlify.app/
02_ssr-counter
global server counter, keep state on page reload as long as the same instance is running. All clients will increment the same counter.
- Sequence
- Project files
live demo : https://svelte-ssr-counter.netlify.app/
03_server-cookie-counter
couter saved as a cookie, fetched, incremented and updated by the server
live demo : https://svelte-cookie-counter.netlify.app/
04_client-counters
classical front end Cards counters. Each Card has a counter variable, all client side, resets on page reload, reactive DOM assignment.
live demo : https://svelte-client-counters.netlify.app/
05_sse-counter
SSE: Server Sent Events. global var using a timer and Emitter.
Server keeps couter state. Reloading the page has no effect on the counter states which just keeps counting independently.
This example is using both load functions on server and on client.
- Notes
requires Node18 Node18 for ReadableStream()
not serverless compatible
- Sequence
- Project files
06_markdown
simple example with markdown rendering
