Community

Values

Accessibility

Sandpack enables creators. Nothing should stand in someone's way from expressing their ideas. Sandpack fills the gap between the complexity of publishing and expressing yourself for public visualization and collaboration.

As a result, Sandpack creates interactive code snippets to be easily integrated into any project, regardless of the development language and the user setup. Also, giving you a fully live coding experience in the browser that brings the development experience from CodeSandbox closer to the consumer of the content on your website. We believe that getting live coding experience should not be harder than this.

Collaboration

With Sandpack, you're always one click away from opening a sandpack in CodeSandbox. This way, you can easily share bug reports, provide feedback on someone’s else sandpack, or fork your changes behind a unique URL.

Empowerment

Sandpack gives you a painless live coding environment in minutes and lets you focus on what matters, which is expressing your ideas through coding. Sandpack components are designed to be extensible and customizable no matter what is your environment, layout, or needs. It also does everything to keep everybody in the state of the flow as the content and code are next to each other so no other tools required to play with the code.

Also, it embeds the browser bundler that powers CodeSandbox and takes advantage of features like NPM dependency support, hot module reloading, error overlaying, and caching.

Roadmap

The following represents a high-level overview of Sandpack's roadmap.

Check out the roadmap on GitHub to get informed about what we’re working on, and what will come later. If you have any questions or comments please provide us feedback on Discord or GitHub.

Areas

We break our roadmap into 3 key areas: Community, DevX, and Usability.

Community

In order to grow the community and increase the adoption, we have to support more ways to consume Sandpack, regardless of the framework or the way to write a snippet of code.

DevX

Solve technical debts, implement new features to keep up to date with the latest releases from the community, and cover other community needs.

Usability

With Sandpack we strive to provide the best experience no matter where the given Sandpack is embedded, so SEO or usability is also a key part of improving the project.

Priorities, Next up

Features, bugs, or improvements that are considered for implementation in the next few months. Besides this, we encourage you to contribute to the project and drive our roadmap through contributions.

Planned for later

The rest of the issues that we have in mind for carry out eventually, probably later than 3-4 months from now.

Disclaimer

The purpose of our roadmap is to outline the general product direction for Sandpack. It is intended for information purposes only and it is not a commitment to deliver any material, code, or functionality. You should be aware that priorities and direction may change at any time and the order of issues does not reflect any type of priority.

Community

For general help using Sandpack, please check out the documentation. For additional help, you can use one of these channels to ask a question or find out if somebody else had the same before:

Discord - For live discussions with the Community

GitHub issues - Bug reports, feature requests, and contributions

GitHub discussions - Ideas, Q&A, show and tell, and general thoughts

GitHub projects - Our roadmap

Twitter - Get the latest news

License

Please see the LICENSE file for licensing information, and our FAQ for any questions you may have on that topic.

Contribution Guide

Any type of contribution is welcome! Sandpack can grow faster through the contributions of the community! Thanks so much for your enthusiasm and your work — we appreciate everything you do!

Before getting started please check out our contribution guide. If you would like to contribute to Sandpack and get involved but you’re not sure where to start with feel free to dive into issues with a good first issue label. If you have any questions, please open a draft PR or visit our Discord where the Sandpack team can help you.

Contributing to Sandpack

Thank you for your interest in contributing! We embrace community contributions as it brings Sandpack to a larger audience and makes the project better. Contribution guidelines are listed below. If you're unsure about how to start contributing or have any questions even after reading our guide, feel free to reach out us on Discord.

Code of conduct

Please follow our Code of conduct in the context of any contributions made to Sandpack.

Open development

Anyone can contribute. The primary communication about development on Sandpack happens in GitHub issues and GitHub discussions where the Sandpack team and contributors can collaborate.

Your first contribution

We appreciate first time contributors and we are happy to assist you in getting started. In case of questions, just create a draft PR or reach out to us via Discord.

Types of contributions

Docs

Our goal is to keep our docs comprehensive and updated. If you would like to help us in doing so, we are grateful for any kind of contribution:

Report missing content
Fix errors and possible typos in existing docs
Help us add more guides to our docs

Themes

We're open to supporting new Sandpack themes because our key goal is empowering developers to include custom live coding experiences over the web, regardless of your website layout or level of design expertise. That's why we provide plenty of options under @codesandbox/sandpack-themes, and we want to offer even more options. So, how can you contribute to new themes?

Create a new file in codesandbox/sandpack/sandpack-themes/src folder with following file [theme name].ts
The content of this file must be an export for an object that contains the theme:

import type { SandpackTheme } from "./types";
 
export const themeName: SandpackTheme = {
  ...themeObject,
};

Include your new theme into the index.ts file, that exposes all themes.

Features

To request new features, please create an issue on this project. Automatically a triage label will be added and the Sandpack team will follow up on your issue if that needs some clarification.

Upvoting issues and features

You are welcome to add your own reactions and feedback to the existing issues.

We will consider 👍 as the given issue is important to you.

Reporting bugs

Bug reports can make Sandpack better. So if you spot any issues with Sandpack please create an issue and follow the instructions using the bug report template.

Running Locally

General

Install Node.js version 14(latest stable)
- If you are using nvm (recommended) running nvm use will automatically choose the right node version for you.

nvm use 14

Install all project dependencies by running:

yarn

To start the development mode you need to build all dependencies first by running:

yarn build

Running Sandpack Docs

At the root folder run:

yarn dev:docs

Or at the docs folder run:

yarn run serve

Running Sandpack Landing

The landing page is powered by Next.js

At the root folder run:

yarn dev:landing

Or at the landing folder run:

yarn dev

Running Sandpack React in development mode

It will open a playground page powered by Storybook.

At the root folder run:

yarn dev:react

Server-side rendering FAQ