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
```

hello world

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
      },
    }),
  ],
})