Adding an in-browser code preview to your React Application with Sandpack

1

Sandpack by CodeSandbox

Sandpack is a live coding environment that runs on the browser. It is made by the team behind CodeSandbox/. The main objective here is to provide interactive examples to play around with, to users. I see it being widely used in things like blog posts and documentation (in fact the, work in progress, new React Docs is using Sandpack). In this article, we are going to look at how to add Sandpack to a React Application and then we will look at integrating it with Next MDX Remote in a NextJS Application.

#Open Source #Text Editors #Software Engineering 6 social mentions

2

Create React App

We are going to be adding Sandpack to a react application (made with create react app) thought the process should be quite the same for NextJS or Gatsby.

#Javascript UI Libraries #Developer Tools #JS Library 116 social mentions

3

CodeSandbox

Sandpack is a live coding environment that runs on the browser. It is made by the team behind CodeSandbox/. The main objective here is to provide interactive examples to play around with, to users. I see it being widely used in things like blog posts and documentation (in fact the, work in progress, new React Docs is using Sandpack). In this article, we are going to look at how to add Sandpack to a React Application and then we will look at integrating it with Next MDX Remote in a NextJS Application.

#Text Editors #Programming #Programming Tools 300 social mentions