Props

To pass props, use the Svelte.props hash in your controller, and then access them as props on your view with the $props() rune.

Additionally, controller instance variables are automatically passed as props, but never override props set with Svelte.props manually, and are passed without an @ symbol.

This behavior has changed since v0.7.x

Pre-v0.8.0, props were magically available with the window.props store, or just $props (using the store accessor).

Since v0.8.0, and the introduction of the $props rune, I decided to make props explicit and pass them as normal component props. They now function exactly like locals did in v0.7.x.

Examples

Controller

def show
  Svelte.props[:user] = User.find_by(username: params[:username])
  @greeting = "Hello,"
end

View

<script>
  const { user, greeting } = $props();
  
  let mailto = $derived("mailto://" + user.email);
</script>

<h1>{greeting} {user.name}</h1>
<a href={mailto}>{user.email}</a>

<style>
  h1 {
    color: red
  }
</style>