CodePen | SvelteKit Embed

Svelte

1<CodePen codepen_id="WNMvXpa" />

For a pen at https://codepen.io/spences10/pen/WNMvXpa, the codepen_id is the last part, WNMvXpa.

The embed starts as a preview and loads the pen when it is clicked. Pass click_to_load={false} to run it straight away.

Choose the open tabs

tabs takes one tab or several. This opens the CSS beside the result, in the dark theme.

Svelte

1<CodePen
2	codepen_id="WNMvXpa"
3	tabs={['css', 'result']}
4	theme="dark"
5	click_to_load={false}
6/>

Props

Prop	Type	Default
`codepen_id` The last part of the pen’s URL, e.g. `WNMvXpa`.	`string`	`''`
`tabs` Which tabs are open to start with.	`string[] \| 'js' \| 'css' \| 'scss' \| 'less' \| 'result'`	`'result'`
`click_to_load` Show a preview that loads the pen when clicked.	`boolean`	`true`
`editable` Let visitors edit the code in place.	`boolean`	`true`
`theme` A CodePen theme name or ID.	`'light' \| 'dark' \| 'default' \| string`	`'default'`
`height` Any CSS height.	`string`	`'500px'`
`width` Any CSS width.	`string`	`'100%'`
`loading` `lazy` waits until the embed is near the viewport, `eager` loads it straight away.	`'lazy' \| 'eager'`	`'lazy'`
`iframe_styles` Inline styles for the iframe. Defaults to the `height` and `width` props.	`string`	–