Your first component
This is a Svelte component:
<h1>Hello world</h1> It does exactly what you’d expect — on the server, it renders that exact string, with some surrounding comments…
import { render } from 'svelte/server';
import App from './App.svelte';
const { html } = await render(App);
console.log(html); // <!--[--><h1>Hello world</h1><!--]--> …while in the browser, it creates an <h1> element with Hello world text inside it, and mounts it to your chosen target element:
import { mount } from 'svelte';
import App from './App.svelte';
const component = mount(App, {
target: document.querySelector('#root')
}); You generally won’t use render and mount (or hydrate) directly — SvelteKit does that for you.