DinoSsr is an experimental work in progress and subject to change!

DinoSsr renders server-side by default shipping no JavaScript.

Islands are Svelte components that become interactive in the browser. This is often referred to as "hydration" or "client-side render".

To create an Island add export const island = true; to the module script.

Below in an example clock.svelte Island component:

<script context="module">
  export const island = true;

  import {onMount} from 'svelte';

  export let label = '';

  let time = '';
  const update = () => {
    time = new Date().toLocaleTimeString();

  onMount(() => {
    setInterval(update, 1000);

  {#if label}{label}{/if}

This can be imported and used as <Clock /> like a standard Svelte component.

Using <Clock /> will render:

Using <Clock label="The time is:" /> will render:

Context and Props

Island components are rendered with the global route context (except serverData).

Island prop values must be JSON serializable. If an Island is nested within a parent Island it will receive props like any other child component.