I am trying to build a simple page such as: a code editor on the side and the preview on the other.
Very similar to what play.tailwindcss.com does.
The particular point I am concerned with is the resizing.
I want the "preview" to act as if it was in full page (except it's only half of the page) and have the break-points work accordingly.
Here, play.tailwindcss.com/EbRg1nhVVP?size=1132x1837, you can see tailwind successfully did it (try to resize the preview and you will see the different breakpoints trigger).
Taking a look at the code, It seems that behaviour is achievable with a smart combination of width, margin and scale updated when the user resize the preview.
Eg: width: 2448px; height: 720px; margin-left: -931px; transform-origin: center top; transform: scale(0.239379);
Before I try my hand at duplicating it by myself, I would like to know if anyone knows of a library, or piece of JS that would do that?
PS: I found nothing and my searches always bring me to someone trying to set a div in full screen (which is not what I am looking for).
CodePudding user response：
The Tailwind Playground itself is open source.
The key part you are interested in is probably the Preview.js responsive design mode.
<div className="flex-none text-center text-xs leading-4 tabular-nums whitespace-pre py-3 text-gray-900 dark:text-gray-400">
{constrainedResponsiveSize.width}
{' '}×{' '}
{constrainedResponsiveSize.height}
{' '}
<span className="text-gray-500">
({Math.round(constrainedResponsiveSize.zoom * 100)}%)
</span>
</div>
EDIT
The above code is actually just the title for showing the width, height and scale.
Essentially there is just an <iframe> inside a resizeable <div>. When the scale falls below 100% it resizes the contents of the iframe with a transform value.