-
sandpack
A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Here's the PR if you're interested to see all of the details about it:
Then I remembered that CodeSandbox released their Sandpack component toolkit that you can use to create live code editing blocks. Since that's an npm package that you install, I figured it will definitely be more performant because its code will be compiled, optimized and shipped along with the page. So I decided to swap out the old embedded iframe with the new Sandpack component. And the results were surprizing:
I've noticed that the PageSpeed scores for https://chakra-ui.com were not that great. I know that we've built the page using the best practices, but for some reason the scores weren't what we expected. I took some time to analyze the metrics and noticed that the TTI (Time to Interactive) and TBT (Total Blocking Time) were crazy high!