# Svelte component - Box with children works weird in editor

**URL:** <https://forum.builder.io/t/svelte-component-box-with-children-works-weird-in-editor/3948>\
**Category:** Technical Questions\
**Created:** [July 25, 2023, 11:34pm UTC](https://forum.builder.io/t/svelte-component-box-with-children-works-weird-in-editor/3948 "2023-07-25T23:34:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![victor.cano](https://avatars.discourse-cdn.com/v4/letter/v/e480ec/32.png) [@victor.cano](https://forum.builder.io/u/victor.cano)\
**Post date:** [July 25, 2023, 11:34pm UTC](https://forum.builder.io/t/svelte-component-box-with-children-works-weird-in-editor/3948/1 "2023-07-25T23:34:29Z")

</div>

**Builder content link**

> **[Builder.io: Drag & Drop Headless CMS](https://builder.io/content/fa098f1b50fd43a9862009238c0e46ed)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**Builder public api key**  
ac4c1566528641b78dbc8009f0d9ad95

**What are you trying to accomplish**

1. I`m trying to follow the example for svelte located [here](https://github.com/BuilderIO/builder/blob/main/examples/svelte-design-system/src/components/BoxWithChildren/BoxWithChildren.svelte) 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**

> **[Screen Recording 2023-07-25 at 5.17.15 PM.mov](https://drive.google.com/file/d/1bvVndS8iI3GuqKYooC5wtyUVOnlU_fCt/view?usp=sharing)**
>
> Google Drive file.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/79751655f241b6aa5c254afa188b2fb8e1e72351.png)

**Code stack you are integrating Builder with**  
Sveltekit (fresh install for testing [builder.io](http://builder.io) integration)

**Reproducible code example**  
This is the code I’m using, is based on one of your [examples](https://github.com/BuilderIO/builder/tree/main/examples/svelte-design-system), even using your example I had the same issue.

```auto
<!-- BoxWithChildren.svelte -->
<script lang="ts">
	import { RenderBlocks } from '@builder.io/sdk-svelte';
	import type { BuilderBlock } from '@builder.io/sdk-svelte/package/types/builder-block';
	export let textBefore = '';
	export let textAfter = '';
	export let children: BuilderBlock[];
</script>

<section>
	<p>Box with children</p>
	<p>{textBefore}</p>
	<slot />
	<RenderBlocks blocks={children} />
	<p>{textAfter}</p>
</section>

```

```auto
//BoxWithChildren.builder.ts
import type { RegisteredComponent } from '@builder.io/sdk-svelte';
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': '@builder.io/sdk:Element',
					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;

```

Thanks!

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 3, 2023, 6:40pm UTC](https://forum.builder.io/t/svelte-component-box-with-children-works-weird-in-editor/3948/2 "2023-08-03T18:40:34Z")

</div>

Hello @victor.cano,

Welcome to the [builder.io](http://builder.io) forum.

Can you tell us which “@builder.io/sdk-svelte” version you are using currently?

---

<div class="post-metadata">

**Author:** ![victor.cano](https://avatars.discourse-cdn.com/v4/letter/v/e480ec/32.png) [@victor.cano](https://forum.builder.io/u/victor.cano)\
**Post date:** [August 3, 2023, 6:52pm UTC](https://forum.builder.io/t/svelte-component-box-with-children-works-weird-in-editor/3948/3 "2023-08-03T18:52:27Z")

</div>

“name”: “@builder.io/sdk-svelte”,  
“version”: “0.4.5”,

---

<div class="post-metadata">

**Author:** ![Albert](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@Albert](https://forum.builder.io/u/Albert)\
**Post date:** [October 7, 2023, 12:52am UTC](https://forum.builder.io/t/svelte-component-box-with-children-works-weird-in-editor/3948/4 "2023-10-07T00:52:11Z")

</div>

@manish-sharma

I also followed this guide and also not working