Sveltekit preview URLs not working and freezing the visual editor

[archoda]

Working on getting started with the editor. Have simple Sveltekit test/demo setup ( SSG ).

Tried running npm run dev ( http://localhost:5174 ) and npm run preview ( http://localhost:5173 ), each of which fails to show the content and the editor freezes and won’t load. Any help would be appreciated.

NOTE: I’ve also tried the exposed ‘–host’ url ( http://192.168.0.29:5173/ ), but this produces the same no-go results

Builder content link

Builder.io: Drag & Drop Headless CMS

Builder public api key
eaaf7cc3d56e4c259874a84eb6ea9104

What are you trying to accomplish
Simply trying to get the visual editor to work without freezing on initialization and work with the preview url.

Screenshots or video link
Live preview freezes and prevents the GUI/editor from loading

Only preview current draft functions

Svetlekit App loads the content - but the component is not displaying anything also.

No Build iFrame exists error:

Code stack you are integrating Builder with
Sveltekit ( SSG )

Reproducible code example

[archoda]

…still an issue…anyone else able to get SvelteKit/Builder preview working IN the visual viewer with localhost?

[scrapd]

I wasn’t able to get it working either : (

[dnikolai]

I’ve only gotten it to work in the following way.
Creating […catchAll] or [slug] in routes.

using this +page.server.js

import { fetchOneEntry, getBuilderSearchParams } from '@builder.io/sdk-svelte';
import { BUILDER_PUBLIC_API_KEY } from '$lib/apiKey.js';

export async function load(event) {
	// fetch your Builder content
	const content = await fetchOneEntry({
		model: 'page',
		apiKey: BUILDER_PUBLIC_API_KEY,
		options: getBuilderSearchParams(event.url.searchParams),
		userAttributes: {
			urlPath: event.url.pathname || '/'
		}
	});

	return { content };
}

And this as my +page.svelte

<script>
	import Counter, { CounterConfig } from '$lib/Counter.svelte';
	import { isPreviewing, Content } from '@builder.io/sdk-svelte';
	import { BUILDER_PUBLIC_API_KEY } from '$lib/apiKey.js';

	const CUSTOM_COMPONENTS = [
		{
			component: Counter,
			name: CounterConfig.name,
			inputs: CounterConfig.inputs
		}
	];

	export let data;
	const canShowContent = data.content || isPreviewing();
</script>
<h1>Page title</h1>

	{#if canShowContent}
		<Content
			model="page"
			content={data.content}
			apiKey={BUILDER_PUBLIC_API_KEY}
			customComponents={CUSTOM_COMPONENTS}
		/>
	{:else}
		Content Not Found
	{/if}

Here is my Counter.svelte component as well if you want a template for components.

<script context="module">
	export const CounterConfig = {
		name: 'Yuh',
		inputs: [
			{
				name: 'name',
				type: 'string',
				defaultValue: 'Meow Meow'
			},
			{
				name: 'colour',
				type: 'color'
			}
		]
	}
</script>
<script lang="ts">
	export let name: string;
</script>

<div>
	<h2> { name } </h2>
</div>

So far I’ve only gotten pages and components to work. Sadly it seems the Svelte integration guide is just AI generated and no one checked if it actually works.

Hope this helps!