Builder content link
Builder public api key
ac4c1566528641b78dbc8009f0d9ad95
What are you trying to accomplish
- 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.
- 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 builder.io 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 '@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>
//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!