Skip to main content

A component that just renders some static markup isn't very interesting. Let's add some data.

First, add a script tag to your component and declare a name variable:

<script>
	let name = 'world';
</script>

<h1>Hello world!</h1>

Then, we can refer to name in the markup:

<h1>Hello {name}!</h1>

Inside the curly braces, we can put any JavaScript we want. Try changing name to name.toUpperCase() for a shoutier greeting.

App.svelte
<h1>Hello world!</h1>

/* App.svelte generated by Svelte v4.2.19 */
import {
SvelteComponent,
detach,
element,
init,
insert,
noop,
safe_not_equal
} from "svelte/internal";

import "svelte/internal/disclose-version";

function create_fragment(ctx) {
let h1;

return {
c() {
h1 = element("h1");
h1.textContent = "Hello world!";
},
m(target, anchor) {
insert(target, h1, anchor);
},
p: noop,
i: noop,
o: noop,
d(detaching) {
if (detaching) {
detach(h1);
}
}
};
}

class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, create_fragment, safe_not_equal, {});
}
}

export default App;
result = svelte.compile(source, {
generate:
css:
});
/* Add a <style> tag to see compiled CSS */