Svelte component - Box with children works weird in editor

Builder content link

Builder public api key

What are you trying to accomplish

  1. I`m trying to follow the example for svelte located here which should allow me to build reusable components with content coming from builder, but when I tried the example code gave me a weird experience in the builder editor where I cant add items using the “add block” button.
  2. What is the issue you are having with the Typescript types for all the sdks? I tried React and now Svelte and I have experience some weird issues about types even using the correct type from the library.

Screenshots or video link

Code stack you are integrating Builder with
Sveltekit (fresh install for testing integration)

Reproducible code example
This is the code I’m using, is based on one of your examples, even using your example I had the same issue.

<!-- BoxWithChildren.svelte -->
<script lang="ts">
	import { RenderBlocks } from '';
	import type { BuilderBlock } from '';
	export let textBefore = '';
	export let textAfter = '';
	export let children: BuilderBlock[];

	<p>Box with children</p>
	<slot />
	<RenderBlocks blocks={children} />
import type { RegisteredComponent } from '';
import BoxWithChildren from './BoxWithChildren.svelte';

const BoxWithChildrenBuilder: RegisteredComponent = {
	component: BoxWithChildren,
	name: 'BoxWithChildren',
	canHaveChildren: true,
	inputs: [
			name: 'textBefore',
			type: 'string',
			defaultValue: 'Simple text before children'
			name: 'textAfter',
			type: 'string',
			defaultValue: 'Simple text after children'
			name: 'children',
			type: 'blocks',
			hideFromUI: true,
			defaultValue: [
					'@type': '',
					component: {
						name: 'Text',
						options: {
							text: 'this is editable within builder '
					responsiveStyles: {
						large: {
							display: 'flex',
							flexDirection: 'column',
							position: 'relative',
							flexShrink: '0',
							boxSizing: 'border-box',
							marginTop: '8px',
							lineHeight: 'normal',
							height: 'auto',
							textAlign: 'center'

export default BoxWithChildrenBuilder;


Hello @victor.cano,

Welcome to the forum.

Can you tell us which “” version you are using currently?

“name”: “”,
“version”: “0.4.5”,


I also followed this guide and also not working