How to add a title to a sandbox created in codesandbox with the svelte template

I created a svelte project in codesandbox using the svelte client template. When I open the output of the sandbox in its own window, the title is "Sandbox - CodeSandbox".

The default template uses rollup, however it says at the top of the sandbox.config.json file that it won't effect it in the sandbox, and that appears to be correct. There is no existing index.html file either to edit it in.

https://codesandbox.io/s/transformer-svelte-ghtyd?fontsize=14&module=%2FApp.svelte

Solution

You can create a public directory at the root level of your project and add an index.html file there. Just make sure to include the JS and CSS bundles that your build will generate.

You can also use degit - a scaffolding tool - to start from a template project as explained here. This will generate the public directory and the index.html file, among others, for you.

The template is really very bare bones (a good thing in my opinion). See for yourself:

<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/bundle.css'>

    <script defer src='/bundle.js'></script>
</head>

<body>
</body>
</html>