Changing Default Style of Sandpack Preview

By default, Sandpack doesn’t apply any styles for its preview, so it might look a bit off compared to the rest of your site. You can provide your own baseline styles to make the preview look better. Here’s how.

It’s up to you what kind of styles you want to provide. You may want to change the default background, typography, or spacing.

Here’s an example:

body {
  font-family: sans-serif;
  margin: 8px 16px;
}

h1 {
  color: #111;
  margin-top: 16px;
}

p {
  color: #333;
}

You can also provide the CSS reset ↗ rules.

Once you’re done with adding rules, you can add them by creating base.css file and including it in your Sandpack default file:

import './base.css';

You will probably want to mark this file as hidden or read-only so the user doesn’t edit it accidentally:

'/base.css': {
  code: `...`,
  hidden: true,
  readOnly: true,
},