Render .svelte files directly in the browser

This is for Svelte 4

Recently, I wanted to showcase a svelte example for threepipe. But adding a build step just for that seemed a bit too much.

So created a quick library that can import and render svelte files and components directly in the browser without a build step. (for use while development and showcase only).

Check it out on Github - https://github.com/repalash/svelte-browser-import

Working demos: https://repalash.com/svelte-browser-import/index.html

WARNING

Please note that it is very slow for any kind of production use.

This is a simple library that includes the svelte compiler and provides functions to import and render a Svelte App/Component (.svelte files) directly inside a browser without a build step. (Useful for development and testing)

Extracted out the Bundler from the Svelte REPL.

Usage -

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Svelte Browser Import</title>
    <script type="module">
        import { importSvelte } from 'https://unpkg.com/svelte-browser-import/dist/svelte-browser-import.es.js';
        const App = await importSvelte('./HelloWorld.svelte')
        const app = new App({
            target: document.getElementById('app'),
        })

        // app.$destroy() // destroy the app

        // or just 
        // renderSvelte('./HelloWorld.svelte')
    </script>
</head>
<body>
<div id="app"></div>
</body>
</html>

Render .svelte files directly in the browser ​

Render .svelte files directly in the browser