Allow option for react component preview to show alongside the code.

[preshonyee]

Current situation analysis

Right now, the current way to preview react components doesn't offer a good user experience. It's requires a lot more cognitive effort to always keep in mind the state of the output while navigating the code.

Proposed solution

A better solution would be one that allows the code and the output to be visible side by side, at the same time. In my opinion, this would tremendously improve the user experience for users navigating a site using dokz. This is exactly what code-sandbox and in some way codepen does. Which is really good.

Alternative

I understand a different implementation might be much more complex, in that case, below is an alternative solution to the problem and is good too. This solution shows the code beneath while the output is shown above at the same time. The only issue with this might be instances where the lines of code are quite much and requires the page to be scrolled. down more.

[preshonyee]

@remorses seen this yet?

[remorses]

Yeah, i think the current approach is fine in my opinion

You can open a PR if you want with a new playground

The current playground works this way

• it accepts a code prop injected at compile time with the jsx code from inside playground
• it accepts a scope prop with the current file imports (there should also be exports but is not working currently)
• these props are injected to all components with name Playground

You can even import a playground from another npm package if you want

[remorses]

You can use the current playground as an example https://github.com/remorses/dokz/blob/eb08f69d60398e3746ded4ff3b9ae5f9cefe66e7/dokz/src/components/Playground.tsx#L31

[preshonyee]

thanks a lot...i'll look into it.