remorses / dokz

Effortless documentation with Next.js and MDX
466 stars 40 forks source link

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

Open preshonyee opened 4 years ago

preshonyee commented 4 years ago

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. image

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. image

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.

image

image

preshonyee commented 4 years ago

@remorses seen this yet?

remorses commented 4 years ago

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

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

remorses commented 4 years ago

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

preshonyee commented 4 years ago

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