To get started you should just need to install the svelte + svelte loader in the webpack pipeline of phoenix. Then use the client side component api to put components into the server side rendered html.

And here’s a demo: https://github.com/syfgkjasdkn/svelte-phoenix-demo

Relevant commit: https://github.com/syfgkjasdkn/svelte-phoenix-demo/commit/3102c4b12dfdf290819c9b4df6324dcb6c3211ad

I’d like to thank everyone here for the help.

I did the ajustments in Webpack following the demo provided and the template from Svelte (template-webpack/webpack.config.js at master · sveltejs/template-webpack · GitHub), which also set things like:

module.exports = {
	(...)
	resolve: {
		extensions: ['.mjs', '.js', '.svelte']

I’ve bumped into an error (Runtime Error “require is not defined”) in the browser that prevented requires() injection into the index.mjs file.
I was able to get things working by the solution provided in https://stackoverflow.com/questions/52366829/require-is-not-defined-using-webpack-and-yarn, which consists in including a especific rule for .mjs in the webpack.config.js like:

{
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto",
      },

If anyone could share some design patterns tips on how to best integrate phoenix templates with Svelte components I would greatly appreciate.