What can you make with Svelte on its own?

Build the part of a page that changes when someone makes a choice, such as a workshop form that shows different joining instructions for online and in-person attendees.

A Svelte component is a reusable piece of the interface. Its file can hold the page markup, the behavior and its styles. Svelte’s compiler turns that file into browser code as part of a build. A standalone Svelte project can use the official Vite starter to provide that build and a local preview.

How do you check that the instructions follow the choice?

Put two attendance choices in one component and make each button change the instructions below. Use made-up details and keep the exercise disconnected from registration, email and any saved records.

<script>
  let instructions = $state('Choose how you plan to attend.')
</script>

<button type="button" onclick={() => instructions = 'Look for the joining link.'}>
  Online
</button>
<button type="button" onclick={() => instructions = 'Check in at the front desk.'}>
  In person
</button>

<p aria-live="polite">{instructions}</p>

Start with a standalone Svelte preview
With a Node.js version Vite supports, run npm create vite@latest, choose Svelte and follow the setup instructions. Put the sample in the main .svelte component and open the local development preview.
Try both choices with the keyboard
Use Tab to reach each button and Enter to choose it. The instructions should follow the choice. The value marked with $state tells Svelte which change needs to appear on screen.
Open the same preview in a fresh tab
The starting message should appear again. If an organizer needs a list of attendees, add a submission that reaches a service and saves each response.

Check Vite’s setup instructions for Svelte

When would you need SvelteKit?

Use SvelteKit when you want the same Svelte components with an organized way to add pages, load data or handle submissions on a server. A single interactive screen can stay in standalone Svelte.

What the host needs
Setup	What it runs
Standalone Svelte with Vite	For a browser-only site, serve the built files. Plan the page addresses yourself if you add several screens.
SvelteKit pages prepared ahead of time	The static adapter can prepare the site as files. Keep the required server work in a separate service if you choose static hosting.
SvelteKit handling a form on the server	Use an adapter for a host that can run that server code. A form action can receive the answers, and your app still chooses where they are saved.

What should you keep before changing hosts?

Keep the editable .svelte files, the dependency lockfile that records exact versions, and the build settings. Svelte’s code uses the MIT license. A folder of generated files is useful for serving a particular version of a static site.

If the app receives or saves answers, keep the server code and arrange a separate copy of the data and files. On the new host, check a fresh visit at an inner page and follow one sample submission through to its saved record. Running an app server or a separate database can add costs.