Preview React Components#

Dokz can render your jsx code inside a playground, to enable this feature simply import the Playground component and add jsx inside it

To add variables inside the playground scope simply import them or export them

md
1
import { Playground } from 'dokz'
2
3
export const message = 'hello'
4
5
<Playground>
6
    <div style={{ height: 100, background: 'lightblue' }}>
7
        {message}
8
    </div>
9
</Playground>

The above code block will be render as follows

Rendering inside an iframe#

If you use media queries you probably want to render inside an iframe to preview how the component is rendered in small screens

md
1
import { Playground } from 'dokz'
2
3
<Playground iframe>
4
    <div style={{ height: 100, background: 'lightblue' }}>
5
        i am inside an iframe
6
    </div>
7
</Playground>