Skip to content

Passing Props

Props can be passed to the live code block using the props attribute. This attribute accepts a JSON object of props to pass to the live code block.

```jsx live props={{ children: 'hello world' }}
// code
```
export default ({ children }) => {
return <button>{children}</button>
}

Default Props

If you have a common set of props you’d like applied to all examples, you can configure it using defaultProps in the integration config:

astro.config.mjs
export default defineConfig({
integrations: [
liveCode({
defaultProps: {
theme: 'dark',
// apply client directives to all components (see next page)
'client:load': true
},
}),
],
})