{"id":16225498,"url":"https://github.com/mikebild/introduction-svelte","last_synced_at":"2026-03-18T18:31:12.504Z","repository":{"id":43660583,"uuid":"451047910","full_name":"MikeBild/introduction-svelte","owner":"MikeBild","description":"A introduction into Svelte and SvelteKit","archived":false,"fork":false,"pushed_at":"2022-02-25T13:56:36.000Z","size":927,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-14T02:47:19.465Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeBild.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-23T08:41:01.000Z","updated_at":"2022-07-12T17:35:47.000Z","dependencies_parsed_at":"2022-09-12T06:00:30.044Z","dependency_job_id":null,"html_url":"https://github.com/MikeBild/introduction-svelte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fintroduction-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fintroduction-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fintroduction-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fintroduction-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeBild","download_url":"https://codeload.github.com/MikeBild/introduction-svelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773741,"owners_count":20993632,"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":[],"created_at":"2024-10-10T12:45:14.892Z","updated_at":"2026-02-02T16:03:17.692Z","avatar_url":"https://github.com/MikeBild.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction to Svelte and SvelteKit\n\n## Recommendations\n\n- Basic knowledge of\n  - JavaScript/TypeScript\n  - NodeJS\n- [NodeJS LTS](https://nodejs.org/en/download/) | [Node Version Manager](https://nvm.sh)\n- [VS Code](https://code.visualstudio.com/download)\n- [VS Code Extention](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)\n- [Chrome and Developer Tools](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn)\n\n## Svelte vs. SvelteKit\n\n### Use Svelte if...\n\n- You don't need/want SSR (Server Side Rendering)\n- You want to render a component into an existing page\n- You want to output things like a vanilla component, a WebComponent or a React component adapter\n\n### Use SvelteKit if...\n\n- You're ok with Beta software and living on the bleeding edge\n- You want SSR like Next.js/Nuxt.js\n- You want to have a backend API as part of your project\n- You want your app to work in a Serverless environment (e.g. Vercel/Netlify)\n- You want super fast hot reloading in development (via Vite)\n\n### Scenarios\n\nStill not sure what to use? Maybe these scenarios will help you decide:\n\n- \"I'm building a brand new web app (with backend/API)\": Use SvelteKit\n- \"I want to build an SPA (Single Page App) and I have a pre-existing backend and don't need SSR\": Use Svelte\n- \"I want to use Svelte in an existing web app\": Use Svelte\n- \"I'm cautious of new things but want SSR/routing\": Use SvelteKit\n\n## Hands-On\n\n### Svelte\n\n- [Why Svelte?](docs-svelte/intro.md)\n- [What is Svelte?](docs-svelte/svelte.md)\n- [Architecture](docs-svelte/architecture.md)\n- [Principles](docs-svelte/principles.md)\n- [Setup](docs-svelte/setup-cli.md)\n- [Basics](docs-svelte/basics.md)\n- [Reactivity](docs-svelte/reactivity.md)\n- [Props](docs-svelte/props.md)\n- [Logic](docs-svelte/logic.md)\n- [Events](docs-svelte/events.md)\n- [Bindings](docs-svelte/bindings.md)\n- [Lifecycle](docs-svelte/lifecycle.md)\n- [Stores](docs-svelte/stores.md)\n- [Motion, Transition and Animation](docs-svelte/motion-transition-animation.md)\n- [Class and Styles](docs-svelte/class-styles.md)\n- [Slots](docs-svelte/slots.md)\n- [Context API](docs-svelte/context-api.md)\n- [Special Elements](docs-svelte/special-elements.md)\n- [Module Context](docs-svelte/module-context.md)\n- [Debugging](docs-svelte/debugging.md)\n- [Recipies](docs-svelte/recipies.md)\n  - [Custom-Elements](docs-svelte/recipies-custom-elements.md)\n  - [Testing](docs-svelte/recipies-testing.md)\n\n### SvelteKit\n\n- [Why SvelteKit?](docs-sveltekit/intro.md)\n- [JAMStack](docs-sveltekit/jamstack-architecture.md)\n- [SvelteKit Architecture](docs-sveltekit/architecture.md)\n- [Setup and CLI](docs-sveltekit/setup-cli.md)\n- [Routing](docs-sveltekit/routing.md)\n- [Pages](docs-sveltekit/pages.md)\n- [Page Options](docs-sveltekit/page-options.md)\n- [Anchor Options](docs-sveltekit/anchor-options.md)\n- [Endpoints](docs-sveltekit/endpoints.md)\n- [Fetching Data](docs-sveltekit/data-fetching.md)\n- [Layout](docs-sveltekit/layout.md)\n- [Modules](docs-sveltekit/modules.md)\n- [Hooks](docs-sveltekit/hooks.md)\n- [Prerendering](docs-sveltekit/prerendering.md)\n- [Adapters and Build-Process](docs-sveltekit/build.md)\n  - [Adapters](docs-sveltekit/build-adapters.md)\n- [Recipies](docs-sveltekit/recipies.md)\n  - [Docker](docs-sveltekit/recipies-docker.md)\n  - [Markdown Svelte Extention](docs-sveltekit/recipies-mdsvex.md)\n\n## Svelte \u0026 SvelteKit Examples\n\n- [SvelteKit Blog using AWS Adapter](examples/sveltekit-blog/README.md)\n- [Svelte Single Page Application](examples/svelte-spa/README.md)\n- [Svelte/Kit Components](examples/svelte-components/README.md)\n- [Svelte Storybook](examples/svelte-storybook/README.md)\n- [Svelte Custom-Elements](examples/svelte-custom-elements/README.md)\n- [SvelteKit Server Side Rendering](examples/sveltekit-ssr/README.md)\n- [SvelteKit Static Website](examples/sveltekit-static-website/README.md)\n\n## GraphQL Server and AWS Intrastructure\n\n- [Apollo GraphQL Server](examples/graphql-server/packages/local-server/README.md)\n- [AWS-CDK AppSync + Lambdas](examples/graphql-server/packages/aws-infrastructure/README.md)\n\n## Atomic Design\n\n- Design System Principles by [Brad Frost](https://atomicdesign.bradfrost.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikebild%2Fintroduction-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikebild%2Fintroduction-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikebild%2Fintroduction-svelte/lists"}